<!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(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="checkbox" '+sChecked+'></td>'; new_td_node1.innerHTML = '<td><input type="text" value="'+obj.value+'" name="'+obj.name+'" 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() { fnAddComboTr({ "checked":false, "name":'leipiNewField', "value":'' }); } /*组合checkbox*/ function fnParseOptions(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="checked"'; html += '<input name="'+inputs[1].name+'" value="'+inputs[1].value+'" '+sChecked+' type="checkbox"/>'+inputs[1].value+' '; if(gChecked=='orgchecked1')//竖排 html+='<br/>'; } } //alert(html); return html; } </script> </head> <body> <div class="content"> <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 = 'checkboxs'; window.onload = function() { if( UE.plugins[thePlugins].editdom ){ oNode = UE.plugins[thePlugins].editdom; var gTitle=oNode.getAttribute('title').replace(/"/g,"\""); $G('orgname').value = gTitle; 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 =='checkbox') fnAddComboTr(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 gTimestamp = new Date().getTime();//相同的gTimestamp为同一组checkbox var options = fnParseOptions(gTitle,gChecked,gTimestamp); if(!options) { alert('请添加选项'); return false; } //{|- 使用边界,防止用户删除了span标签,程序处理要把边界替换为空 var html = '{|-<span leipiplugins="checkboxs" title="'+gTitle+'">'; html +=options; html +='</span>-|}'; editor.execCommand('insertHtml',html); return true ; } catch ( e ) { try { editor.execCommand('error'); } catch ( e ) { alert('控件异常,请到 [雷劈网] 反馈或寻求帮助!'); } return false; } } else { oNode.setAttribute('title',gTitle); oNode.setAttribute('orgchecked',gChecked); oNode.innerHTML = fnParseOptions(gChecked); delete UE.plugins[thePlugins].editdom; return true; } }; </script> </body> </html>