baixuanda
/
tba-gx-guochan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
							<!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 + '&nbsp;';
                    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="选项一&#10;选项二"><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(/&quot;/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, "&quot;");
        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>