radios.html
9.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>复选框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta name="generator" content="www.leipi.org" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
<![endif]-->
<link rel="stylesheet" href="leipi.style.css">
<script type="text/javascript" src="../dialogs/internal.js"></script>
<script type="text/javascript">
function createElement(type, name)
{
var element = null;
try {
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {}
if(element==null) {
element = document.createElement(type);
element.name = name;
}
return element;
}
//checkboxs
function isIE()
{
if(window.attachEvent){
return true;
}
return false;
}
//moveRow在IE支持而在火狐里不支持！以下是扩展火狐下的moveRow
if (!isIE()) {
function getTRNode(nowTR, sibling) {
while (nowTR = nowTR[sibling]) if (nowTR.tagName == 'TR') break;
return nowTR;
}
if (typeof Element != 'undefined') {
Element.prototype.moveRow = function(sourceRowIndex, targetRowIndex) //执行扩展操作
{
if (!/^(table|tbody|tfoot|thead)$/i.test(this.tagName) || sourceRowIndex === targetRowIndex) return false;
var pNode = this;
if (this.tagName == 'TABLE') pNode = this.getElementsByTagName('tbody')[0]; //firefox会自动加上tbody标签，所以需要取tbody，直接table.insertBefore会error
var sourceRow = pNode.rows[sourceRowIndex],
targetRow = pNode.rows[targetRowIndex];
if (sourceRow == null || targetRow == null) return false;
var targetRowNextRow = sourceRowIndex > targetRowIndex ? false: getTRNode(targetRow, 'nextSibling');
if (targetRowNextRow === false) pNode.insertBefore(sourceRow, targetRow); //后面行移动到前面，直接insertBefore即可
else { //移动到当前行的后面位置，则需要判断要移动到的行的后面是否还有行，有则insertBefore，否则appendChild
if (targetRowNextRow == null) pNode.appendChild(sourceRow);
else pNode.insertBefore(sourceRow, targetRowNextRow);
}
}
}
}
/*删除tr*/
function fnDeleteRow(obj)
{
var oTable = document.getElementById("options_table");
while(obj.tagName !='TR')
{
obj = obj.parentNode;
}
oTable.deleteRow(obj.rowIndex);
}
/*上移*/
function fnMoveUp(obj)
{
var oTable = document.getElementById("options_table");
while(obj.tagName !='TR')
{
obj = obj.parentNode;
}
var minRowIndex = 1;
var curRowIndex = obj.rowIndex;
if(curRowIndex-1>=minRowIndex)
{
oTable.moveRow(curRowIndex,curRowIndex-1);
}
}
/*下移*/
function fnMoveDown(obj)
{
var oTable = document.getElementById("options_table");
while(obj.tagName !='TR')
{
obj = obj.parentNode;
}
var maxRowIndex = oTable.rows.length;
var curRowIndex = obj.rowIndex;
if(curRowIndex+1<maxRowIndex)
{
oTable.moveRow(curRowIndex,curRowIndex+1);
}
}
/*生成tr*/
function fnAddComboTr(gName,obj)
{
var oTable = document.getElementById('options_table');
var new_tr_node= oTable.insertRow(oTable.rows.length);
var new_td_node0 = new_tr_node.insertCell(0),new_td_node1 = new_tr_node.insertCell(1),new_td_node2 = new_tr_node.insertCell(2);
var sChecked = '';
if(obj.checked) sChecked = 'checked="checked"';
if(!obj.name) obj.name = '';
if(!obj.value) obj.value = '';
new_td_node0.innerHTML = '<td><input type="radio" '+sChecked+' name="'+gName+'"></td>';
new_td_node1.innerHTML = '<td><input type="text" value="'+obj.value+'" name="'+gName+'" placeholder="选项值"></td>';
new_td_node2.innerHTML ='<td><div class="btn-group"><a title="上移" class="btn btn-small btn-info" href="javascript:void(0);" onclick="fnMoveUp(this)"><i class="icon-white icon-arrow-up"></i></a><a title="下移" class="btn btn-small btn-info" href="javascript:void(0);" onclick="fnMoveDown(this)"><i class="icon-white icon-arrow-down"></i></a><a title="删除" class="btn btn-small btn-default" href="javascript:void(0);" onclick="fnDeleteRow(this)"><i class="icon-ban-circle"></i></a></div></td>';
return true;
}
function fnAdd() {
var dName = $G('hidname').value;
if(!dName) dName = 'leipiNewField';
fnAddComboTr(dName,{
"checked":false,
"name":'leipiNewField',
"value":''
});
}
/*组合checkbox*/
function fnParseOptions(gName,gChecked)
{
var oTable = document.getElementById('options_table');
var nTr = oTable.getElementsByTagName('tr'),trLength = nTr.length,html="";
for(var i=0;i<trLength;i++)
{
var inputs = nTr[i].getElementsByTagName('input');
if(inputs.length>0)
{
if(!inputs[1].value) continue;
var sChecked = '';
if(inputs[0].checked) sChecked = 'checked';// 在ie中，checked的值是空的 ,兼容IE 不要改为 checked="checked" 感谢@李静反馈
html += '<input name="'+gName+'" value="'+inputs[1].value+'" '+sChecked+' type="radio"/>'+inputs[1].value+' ';
if(gChecked=='orgchecked1')//竖排
html+='<br/>';
}
}
//alert(html);
return html;
}
</script>
</head>
<body>
<div class="content">
<input id="hidname" type="hidden"/>
<table class="table table-bordered table-striped">
<tr>
<th><span>控件名称</span><span class="label label-important">*</span></th>
<th><span>排列方式</span></th>
</tr>
<tr>
<td><input id="orgname" placeholder="必填项" type="text"/> </td>
<td>
<label class="radio" title="选项一 选项二"><input id="orgchecked0" checked="checked" name="checked" type="radio"> 横排 </label>
<label class="radio" title="选项一 选项二"><input id="orgchecked1" name="checked" type="radio" > 竖排 </label>
</td>
</tr>
<tr>
<td colspan="2">
<table class="table table-hover table-condensed" id="options_table">
<tr>
<th>选中</th>
<th>选项值</th>
<th>操作</th>
</tr>
<!--tr>
<td><input type="checkbox" checked="checked"></td>
<td><input type="text" value="选项一"></td>
<td>
<div class="btn-group">
<a title="上移" class="btn btn-small btn-info" href="#"><i class="icon-white icon-arrow-up"></i></a>
<a title="下移" class="btn btn-small btn-info" href="#"><i class="icon-white icon-arrow-down"></i></a>
<a title="删除" class="btn btn-small btn-default"><i class="icon-ban-circle"></i></a>
</div>
</td>
</tr-->
</table>
<a title="添加选项" class="btn btn-primary" onclick="fnAdd();">添加选项</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var oNode = null,thePlugins = 'radios';
window.onload = function() {
if( UE.plugins[thePlugins].editdom ){
oNode = UE.plugins[thePlugins].editdom;
var gTitle=oNode.getAttribute('title').replace(/"/g,"\"");
var gName=oNode.getAttribute('name').replace(/"/g,"\"");
$G('orgname').value = gTitle;
$G('hidname').value = gName;
var checked = oNode.getAttribute('orgchecked');
checked=='orgchecked1' ? $G('orgchecked1').checked = true : $G('orgchecked0').checked = true;
var inputTags = oNode.getElementsByTagName('input');
var length = inputTags.length;
var aInputs = [];
for(var i=0;i<length;i++)
{
//testEle.setAttribute("test","aaa"); // 自定义属性 设置
//testEle.attributes["test"].nodeValue; // 获得
if(inputTags[i].type =='radio')
fnAddComboTr(gName,inputTags[i]);
}
}
}
dialog.oncancel = function () {
if( UE.plugins[thePlugins].editdom ) {
delete UE.plugins[thePlugins].editdom;
}
};
dialog.onok = function (){
if( $G('orgname').value == '') {
alert('控件名称不能为空');
return false;
}
var gTitle=$G('orgname').value.replace(/\"/g,""");
var gChecked = 'orgchecked0';
if ($G('orgchecked1').checked) gChecked = 'orgchecked1';
if( !oNode ) {
try {
var options = fnParseOptions("leipiNewField",gChecked);
if(!options)
{
alert('请添加选项');
return false;
}
//{|- 使用边界，防止用户删除了span标签
var html = '{|-<span leipiplugins="radios" title="'+gTitle+'" name="leipiNewField">';
html +=options;
html +='</span>-|}';
editor.execCommand('insertHtml',html);
return true ;
} catch ( e ) {
try {
editor.execCommand('error');
} catch ( e ) {
alert('控件异常，请到 [雷劈网] 反馈或寻求帮助！');
}
return false;
}
} else {
var gName=oNode.getAttribute('name').replace(/"/g,"\"");
oNode.setAttribute('title',gTitle);
oNode.setAttribute('orgchecked',gChecked);
oNode.innerHTML = fnParseOptions(gName,gChecked);
delete UE.plugins[thePlugins].editdom;
return true;
}
};
</script>
</body>
</html>