请问这种JS+CSS 样式叫什么名字？


想做一个如上图的功能，权限分配，点击 》 可以把左边全部转移到右边，> 转移单个。这个画面我只是画的一个大概的示意图，以前在其他地方也碰到过着东西，请问这种CSS+JAVASCRIPT的特性叫什么名字？ 这种样式去哪能找到漂亮的样式？  谁能帮帮忙啊。跪求。

解决方案 »

  1.   

    似乎是好几种功能的结合，hide+show?选中的check，右边显示，然后左边的隐藏掉
      

  2.   

    样式可以先慢慢自己调整css，至于实现的话，LZ，你的自己设计下，而且这个左右来回移动是要加校验和判断的！
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    .contend{width:700px;}
    .leftArea{float:left; width:230px;}
    .leftArea table {width:100%; font-size:12px; border-top:1px solid #41b1be; border-left:1px solid #41b1be; outline:1px solid #fff !important;}
    .leftArea table td{font-size:12px; line-height:120%; border-right:1px solid #41b1be; border-bottom:1px solid #41b1be; height:27px;}
    .centerArea{float:left; width:40px; height:300px; padding: 3px;}
    .rightArea{width:400px;}
    .rightArea table {width:100%; font-size:12px; border-top:1px solid #41b1be; border-left:1px solid #41b1be; outline:1px solid #fff !important;}
    .rightArea table td{font-size:12px; line-height:120%; border-right:1px solid #41b1be; border-bottom:1px solid #41b1be; height:27px;}
    .bordernone{width:40px; height: 24px; border:0px; background:#fff; margin-top:15px;}
    .submitArea{width:700px; text-align: right; margin:10px 3px 0 0;}
    .submitArea #conform{margin-right: 10px;}
    .blankarea{height:55px;}
    .select{background:#e7e7e7}
    .checkbox{padding:0px; width:14px; height:14px; overflow:hidden; border: 1px solid #41b1be; margin-left:5px;}
    </style>
    <script language="javascript" src="jquery.js"></script>
    </head><body><div class="contend">
    <!-- left area -->
    <div class="leftArea">
    <table border="0" cellpadding="3" cellspacing="0">
    <colgroup>
    <col style="width:30%; text-align:center;"></col>
    <col style="width:70%;"></col>
    </colgroup>
    <thead>
    <tr><td>序号</td><td>功能模块</td></tr>
    </thead><tbody>
    <tr><td>1</td><td>经营性运输服务许可信息</td></tr>
    <tr><td>2</td><td>处置计划信息</td></tr>
    <tr><td>3</td><td>准运证台帐</td></tr>
    <tr><td>4</td><td>处置场许可信息</td></tr>
    <tr><td>5</td><td>临时堆放许可信息</td></tr>
    <tr><td>6</td><td>综合利用处置许可信息</td></tr>
    <tr><td>7</td><td>回填场地登记信息</td></tr>
    <tr><td>8</td><td>土地档案管理</td></tr>
    <tr><td>9</td><td>垃圾处置分配</td></tr>
    <tr><td>10</td><td>日常运输上报</td></tr>
    <tr><td>11</td><td>视频监控</td></tr>
    <tr><td>12</td><td>综合利用需求信息</td></tr>
    <tr><td>13</td><td>综合利用供给信息</td></tr>
    </tbody>
    </table>
    <!-- center area -->
    </div><span class="centerArea">
    <div>
    <div class="blankarea">&nbsp;
    </div><div>
    <input type="button" class="bordernone" value=">>" id="toRightAll">
    <input type="button" class="bordernone" value=">" id="toRight">
    </div><div class="blankarea">&nbsp;
    </div><div>
    <input type="button" class="bordernone" value="<<" id="toLeftAll">
    <input type="button" class="bordernone" value="<" id="toLeft">
    </div>
    </div>
    <!-- right area -->
    </span><div class="rightArea">
    <table border="0" cellpadding="3" cellspacing="0">
    <colgroup>
    <col style="width:15%; text-align:center;"></col>
    <col style="width:55%;"></col>
    <col style="width:15%;"></col>
    <col style="width:15%;"></col>
    </colgroup>
    <thead>
    <tr><td>序号</td><td>功能模块</td><td>查看</td><td>更新</td></tr>
    </thead><tbody/>
    </table>
    </div>
    </div><div class="submitArea">
    <input type="button" value="确认" id="conform"><input type="button" value="删除" id="delete">
    </div><script type="text/javascript">
    var checkbox = '<td><input type=\'checkbox\' class=\'checkbox\'></td><td><input type=\'checkbox\' class=\'checkbox\'></td>';
    $(function() {
    modifyButton();
    });
    $('div.leftArea>table>tbody>tr, div.rightArea>table>tbody>tr').toggle(function() {
    $(this).addClass('select');
    modifyButton();
    }, function() {
    $(this).removeClass('select');
    modifyButton();
    });
    function modifyButton() {
    if (getDataSize('left', '.select') > 0) $('#toRight').attr('disabled', false);
    else $('#toRight').attr('disabled', true);
    if (getDataSize('right', '.select') > 0) $('#toLeft').attr('disabled', false);
    else $('#toLeft').attr('disabled', true);
    if (getDataSize('left', '') == 0) $('#toRightAll').attr('disabled', true);
    else $('#toRightAll').attr('disabled', false);
    if (getDataSize('right', '') == 0) $('#toLeftAll').attr('disabled', true);
    else $('#toLeftAll').attr('disabled', false);
    }
    function getDataSize(str, select) {
    return getSelectData(str, select).size();
    }
    function getSelectData(str, select) {
    if (str == null || str == '')
    return $('div.contend table tbody tr' + select);
    return $('.' + str + 'Area>table>tbody>tr' + select);
    }
    $('#toRightAll, #toRight').bind('click', function() {
    var select = (this.id == 'toRight' ? '.select' : '');
    moveObj(getSelectData('left', select), 'right');
    });
    $('#toLeftAll, #toLeft').bind('click', function() {
    var select = (this.id == 'toLeft' ? '.select' : '');
    moveObj(getSelectData('right', select), 'left');
    });
    $('#delete').bind('click', function() {
    $obj = getSelectData(null, '.select');
    if ($obj.size() == 0) {
    alert('请至少选择一项进行此操作。');
    } else if (window.confirm('你确定要删除选中项吗？'))
    getSelectData(null, '.select').remove();
    });
    function moveObj(obj, moveTo) {
    var $obj = obj.removeClass('select').clone(true);
    if (moveTo == 'left') {
    $obj.find('td:has(input)').remove();
    $obj.appendTo('div.' + moveTo + 'Area>table>tbody');
    } else {
    $obj.append(checkbox).appendTo('div.' + moveTo + 'Area>table>tbody');
    }
    obj.remove();
    modifyButton();
    }
    </script>
    </body>
    </html>
      

  4.   

    IE和Chrome测试通过。
    颜色和样式可能有细微区别，自己调整吧！
    有几点进行了调整：
    ①、左边有数据则>>可用，右边有数据则<<可用。
    ②、单击一行纪录背景颜色改变，表示被选中，再次点击则取消选中。
    ③、选中的纪录点击>或<进行移动，一次可以选择多条记录进行移动。
    ④、移动数据后该节点在原区域被删除，在目标点被创建。
    ⑤、选中的纪录点击删除按钮删除效果可以烤代码自己测试下，checkbox有bug在稍后修正后再贴上来。
    时间紧迫做得比较粗糙，大概功能应该是完成了。
      

  5.   

    修正了checkbox不能选中的bug
    加了必要的注释，增加可读性
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    .contend{width:700px;}
    .leftArea{float:left; width:230px;}
    .leftArea table {width:100%; font-size:12px; border-top:1px solid #41b1be; border-left:1px solid #41b1be; outline:1px solid #fff !important;}
    .leftArea table td{font-size:12px; line-height:120%; border-right:1px solid #41b1be; border-bottom:1px solid #41b1be; height:27px;}
    .centerArea{float:left; width:40px; height:300px; padding: 3px;}
    .rightArea{width:400px;}
    .rightArea table {width:100%; font-size:12px; border-top:1px solid #41b1be; border-left:1px solid #41b1be; outline:1px solid #fff !important;}
    .rightArea table td{font-size:12px; line-height:120%; border-right:1px solid #41b1be; border-bottom:1px solid #41b1be; height:27px;}
    .bordernone{width:40px; height: 24px; border:0px; background:#fff; margin-top:15px;}
    .submitArea{width:680px; text-align: right; margin:10px 3px 0 0;}
    .submitArea #confirm{margin-right: 10px;}
    .blankarea{height:55px;}
    .select{background:#e7e7e7}
    .checkbox{padding:0px; width:14px; height:14px; overflow:hidden; border: 1px solid #41b1be; margin-left:5px;}
    </style>
    <script language="javascript" src="jquery.js"></script>
    </head><body>
    <div class="contend">
    <!-- left area -->
    <div class="leftArea">
    <table border="0" cellpadding="3" cellspacing="0">
    <colgroup>
    <col style="width:30%; text-align:center;"/>
    <col style="width:70%;"/>
    </colgroup><thead>
    <tr><td>序号</td><td>功能模块</td></tr>
    </thead><tbody/>
    </table>
    <!-- center area -->
    </div><span class="centerArea">
    <div>
    <div class="blankarea">&nbsp;
    </div><div>
    <input type="button" class="bordernone" value=">>" id="toRightAll">
    <input type="button" class="bordernone" value=">" id="toRight">
    </div><div class="blankarea">&nbsp;
    </div><div>
    <input type="button" class="bordernone" value="<<" id="toLeftAll">
    <input type="button" class="bordernone" value="<" id="toLeft">
    </div>
    </div>
    <!-- right area -->
    </span><div class="rightArea">
    <table border="0" cellpadding="3" cellspacing="0">
    <colgroup>
    <col style="width:15%; text-align:center;"/>
    <col style="width:55%;"/>
    <col style="width:15%;"/>
    <col style="width:15%;"/>
    </colgroup><thead>
    <tr><td>序号</td><td>功能模块</td><td>查看</td><td>更新</td></tr>
    </thead><tbody/>
    </table>
    </div>
    </div><div class="submitArea">
    <input type="button" value="确认" id="confirm"><input type="button" value="删除" id="delete">
    </div>
    <!-- javascript -->
    <script type="text/javascript">
    var checkbox = '<td><input type=\'checkbox\' class=\'checkbox\'></td><td><input type=\'checkbox\' class=\'checkbox\'></td>';
    var strs = ['经营性运输服务许可信息','处置计划信息','准运证台帐','处置场许可信息',
    '临时堆放许可信息','综合利用处置许可信息','回填场地登记信息','土地档案管理',
    '垃圾处置分配','日常运输上报','视频监控','综合利用需求信息','综合利用供给信息'];
    var checked = false;
    // 画面初期对'>>', '>', '<', '<<'四个按钮制御
    $(function() {
    var $tbody = $('div.leftArea>table>tbody');
    for (var i = 0, len = strs.length; i < len; i++) {
    $tbody.append('<tr><td>' + (i+1) + '</td><td>' + strs[i] + '</td></tr>');
    }
    modifyButton();
    });
    // 为每一列加click监听，判断是选中还是取消
    $('div.leftArea>table>tbody>tr, div.rightArea>table>tbody>tr').live('click', function() {
    if (checked) {checked = !checked; return;}
    $(this).toggleClass('select');
    modifyButton();
    checked = false;
    });
    // '>>', '>', '<', '<<'四个按钮可用性制御
    function modifyButton() {
    if (getDataSize('left', '.select') > 0) $('#toRight').attr('disabled', false);
    else $('#toRight').attr('disabled', true);
    if (getDataSize('right', '.select') > 0) $('#toLeft').attr('disabled', false);
    else $('#toLeft').attr('disabled', true);
    if (getDataSize('left', '') == 0) $('#toRightAll').attr('disabled', true);
    else $('#toRightAll').attr('disabled', false);
    if (getDataSize('right', '') == 0) $('#toLeftAll').attr('disabled', true);
    else $('#toLeftAll').attr('disabled', false);
    }
    // 获取选中数据的个数
    function getDataSize(str, select) {
    return getSelectData(str, select).size();
    }
    // 获取选中数据
    function getSelectData(str, select) {
    if (str == null || str == '')
    return $('div.contend table tbody tr' + select);
    return $('.' + str + 'Area>table>tbody>tr' + select);
    }
    // '>>' 和 '>'按钮绑定click事件
    $('#toRightAll, #toRight').bind('click', function() {
    var select = (this.id == 'toRight' ? '.select' : '');
    moveObj(getSelectData('left', select), 'right');
    });
    // '<' 和 '<<'按钮绑定click事件
    $('#toLeftAll, #toLeft').bind('click', function() {
    var select = (this.id == 'toLeft' ? '.select' : '');
    moveObj(getSelectData('right', select), 'left');
    });
    // 删除按钮绑定click事件
    $('#delete').bind('click', function() {
    $obj = getSelectData(null, '.select');
    if ($obj.size() == 0) {
    alert('请至少选择一项进行此操作。');
    } else if (window.confirm('你确定要删除选中项吗？'))
    $obj.remove();
    });
    // checkbox绑定click事件
    $('.checkbox').live('click', function() {
    checked = true;
    });
    // 移动选中的纪录
    function moveObj(obj, moveTo) {
    var $obj = obj.removeClass('select').clone();
    if (moveTo == 'left') {
    // 从右向左移动时删除多余的checkbox
    $obj.find('td:has(input)').remove();
    } else {
    // 从左向右移动时添加checkbox
    $obj.append(checkbox);
    }
    $obj.appendTo('div.' + moveTo + 'Area>table>tbody');
    obj.remove();
    modifyButton();
    }
    </script>
    </body>
    </html>