|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
|
<title>进度条属性</title>
|
|
|
<script type="text/javascript" src="../internal.js"></script>
|
|
|
<link rel="stylesheet" href="../../../bootstrap/bootstrap.css">
|
|
|
<link rel="stylesheet" href="../../../bootstrap/bootstrap-responsive.css">
|
|
|
<style type="text/css">
|
|
|
*{color: #838383;margin: 0;padding: 0}
|
|
|
html,body {font-size: 12px;}
|
|
|
body {
|
|
|
padding-left: 20px;padding-right: 20px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<table class="table table-striped" style="margin-top:18px;margin-bottom: 0;">
|
|
|
<tr>
|
|
|
<th><span>控件名称</span><span class="label label-important">*</span></th>
|
|
|
<th><span>跨度</span></th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<input id="itemName" type="text" placeholder="必填项" size="20" />
|
|
|
</td>
|
|
|
<td>
|
|
|
<input id="signType" type="text" value="5" size="2" /> %
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th colspan="2">进度条样式</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2">
|
|
|
<label><input type="radio" value="progress-info" name="progressstyle" checked /><code>表示信息</code></label>
|
|
|
<div class="progress progress-info progress-striped active" style="margin:2px 0 9px 0;">
|
|
|
<div class="bar" style="width: 20%"></div>
|
|
|
</div>
|
|
|
<label><input type="radio" value="progress-success" name="progressstyle" /><code>表示完成情况，进度等</code></label>
|
|
|
<div class="progress progress-success progress-striped active" style="margin:2px 0 9px 0;">
|
|
|
<div class="bar" style="width: 40%"></div>
|
|
|
</div>
|
|
|
<label><input type="radio" value="progress-warning" name="progressstyle" /><code>表示警告，比较重要的事项</code></label>
|
|
|
<div class="progress progress-warning progress-striped active" style="margin:2px 0 9px 0;">
|
|
|
<div class="bar" style="width: 60%"></div>
|
|
|
</div>
|
|
|
<label><input type="radio" value="progress-danger" name="progressstyle" /><code>表示危险，重要程度为最高</code></label>
|
|
|
<div class="progress progress-danger progress-striped active" style="margin:2px 0 9px 0;">
|
|
|
<div class="bar" style="width: 80%"></div>
|
|
|
</div>
|
|
|
<input type="hidden" id="style" />
|
|
|
<p>进度条使用CSS3渐变/过渡/动画以实现所有效果。IE7到IE9，以及某些老版本的Firefox还不能完全支持这些特性。目前，Opera和IE还不支持动画效果。</p>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<script type="text/javascript">
|
|
|
var oNode = null;
|
|
|
window.onload = function() {
|
|
|
//弹出窗口初始化函数，这里主要是判断是编辑下拉列表还是新增
|
|
|
if( UE.plugins['progressbar'].editdom ){
|
|
|
oNode = UE.plugins['progressbar'].editdom;
|
|
|
$G('itemName').value = oNode.getAttribute('title');
|
|
|
$G('signType').value = oNode.getAttribute('sign_type');
|
|
|
var sStyle = oNode.getAttribute('progressstyle');
|
|
|
for ( var i = 0; i < document.getElementsByName('progressstyle').length;i++) {
|
|
|
if (document.getElementsByName('progressstyle')[i].value == sStyle){
|
|
|
document.getElementsByName('progressstyle')[i].checked = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
dialog.oncancel = function () {
|
|
|
if( UE.plugins['progressbar'].editdom ) {
|
|
|
delete UE.plugins['progressbar'].editdom;
|
|
|
}
|
|
|
};
|
|
|
dialog.onok = function (){
|
|
|
var sStyle = '';
|
|
|
for ( var i = 0;i < document.getElementsByName('progressstyle').length; i ++) {
|
|
|
if (document.getElementsByName('progressstyle')[i].checked){
|
|
|
sStyle = document.getElementsByName('progressstyle')[i].value;
|
|
|
$G('style').value = sStyle;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
if( $G('itemName').value == '') {
|
|
|
alert('控件名称不能为空');
|
|
|
$G('itemName').focus();
|
|
|
return false;
|
|
|
}
|
|
|
if( !oNode ) {
|
|
|
var sUrl = parent.getItemUrl;
|
|
|
ajax.request(sUrl, {timeout:60000,onsuccess:function (xhr) {
|
|
|
try {
|
|
|
var nItemId = xhr.responseText;
|
|
|
oNode = document.createElement("img");
|
|
|
oNode.setAttribute('title',$G('itemName').value.replace("\"","""));
|
|
|
oNode.setAttribute('name','data_' + nItemId);
|
|
|
oNode.setAttribute('value','0');
|
|
|
oNode.setAttribute('progressstyle',$G('style').value);
|
|
|
if ( $G('signType').value == '' ) {
|
|
|
oNode.setAttribute('sign_type','1');
|
|
|
} else {
|
|
|
oNode.setAttribute('sign_type',$G('signType').value);
|
|
|
}
|
|
|
oNode.setAttribute('class','progressbar');
|
|
|
oNode.setAttribute('className','progressbar');
|
|
|
oNode.setAttribute('src','/Public/diy_tf/image/form/progressbar.gif');
|
|
|
editor.execCommand('insertHtml',oNode.outerHTML);
|
|
|
return true ;
|
|
|
} catch ( e ) {
|
|
|
alert ( '插入控件出错，请联系OA管理员解决 ');
|
|
|
return false;
|
|
|
}
|
|
|
},onerror:function() {
|
|
|
alert('Request TimeOut');
|
|
|
}});
|
|
|
} else {
|
|
|
oNode.setAttribute('progressstyle',sStyle);
|
|
|
oNode.setAttribute('title',$G('itemName').value.replace("\"","""));
|
|
|
if ($G('signType').value == '') {
|
|
|
oNode.setAttribute('sign_type','1');
|
|
|
} else {
|
|
|
oNode.setAttribute('sign_type',$G('signType').value);
|
|
|
}
|
|
|
delete UE.plugins['imgupload'].editdom; //使用后清空这个对象，变回新增模式
|
|
|
return true;
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|