复选框左右移动

<div class="modal fade" id="configStaff" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="static">
    <div class="modal-dialog" role="document" style="width: 60%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h3 class="modal-title" id="exampleModalLabel">配置员工</h3>
            </div>
            <div class="modal-body" style="height: 500px;overflow:auto; ">

                <div class="row">
                    <!--<div class="col-xs-6">-->
                        <!--<div class="input-group">-->
                                <!--<span>-->
                                    <!--<input type="text" class="form-control" id="staffOrganizeCodeName_form" readonly style="width: 60%" placeholder="请选择部门">-->
                                    <!--<span class="input-group-btn">-->
                                        <!--<button class="btn btn-primary" onclick="showStaffOrganizationDiv();"><i class="fa"></i> 选择部门</button>-->
                                    <!--</span>-->
                                <!--</span>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="col-xs-6">
                        <div class="input-group">
                            <input type="hidden" id="staffOrganizeCode_form"/>
                            <input type="text" class="form-control" id="staffName" name="staffName" placeholder="员工编号、姓名、手机号">
                            <input type="hidden" class="form-control" id="superStaffNumber" name="superStaffNumber" placeholder="编辑的员工">
                            <input type="hidden" class="form-control" id="relationType" name="relationType" value = '1' placeholder="关系类型">
                            <span class="input-group-btn">
                                    <button class="btn btn-primary" onclick="queryConfigStaffInfo();"><i class="fa fa-search"></i> 查询</button>
                                    <button class="btn btn-white" onclick="clearStaffOrganization();"><i class="fa fa-eraser"></i> 清空</button>
                                </span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-5">
                        <select name="from" id="multiselect" class="form-control" size="8" multiple="multiple" style="height: 400px;">
                        </select>
                    </div>

                    <div class="col-xs-2" style="height: 400px;padding-top: 100px">
                        <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
                        <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                        <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
                        <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
                    </div>

                    <div class="col-xs-5">
                        <select name="to" id="multiselect_to" class="form-control" size="8" multiple="multiple" style="height: 400px;"></select>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> 关闭</button>
            </div>
        </div>
    </div>
</div>


效果图:


两个 Select 左右移动

引用插件: Multiselect v2.3.11

时间: 2024-10-28 22:56:54

复选框左右移动的相关文章

yii 使用checkBoxList 生成复选框每个复选框前面会生成隐藏输入框 怎么不让它生成

问题描述 yii 使用checkBoxList 生成复选框每个复选框前面会生成隐藏输入框 怎么不让它生成 yii 使用checkBoxList 生成复选框时会在每个复选框前面生成隐藏输入框 怎么不让他生成隐藏输入框 解决方案 手册里面有,或者你用html替换掉它里面生成的html标签去定义样式

android-Android 中带复选框的对话框

问题描述 Android 中带复选框的对话框 下面是关于带有复选框的对话框事例: final int DIALOG_ITEMS = 1; String data[] = { "one", "two", "three", "four" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceStat

lotus表单中勾选某一列前的复选框,则这个列下的富文本域由灰色,变成可以上传的正常状态?怎么做?

问题描述 lotus表单中勾选某一列前的复选框,则这个列下的富文本域由灰色,变成可以上传的正常状态?怎么做? 可以在表单中做到这样的效果吗:勾选某一列前的复选框,则这个列下的富文本域由灰色(不可上传),变成可以上传的正常状态?怎么做?

listview-在Android中如何自定义复选框?

问题描述 在Android中如何自定义复选框? 我想显示像 Radio button 这样的复选框,是否能自己定义复选框的形状和大小呢? 大家做过类似的功能吗? 解决方案 使用这个代码: <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@android:drawable/btn_radio"/

超炫超酷的复选框效果

复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS3 实现,未使用任何图片. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 前面三款效果都是灵感来自移动应用程序的滑动选择框效果,在选择和未选择状态之间通过滑动来切换效果,非常的动感.效果的实现方面是借用了一个 DIV 标签和一个

click事件执行两次-复选框单击按钮执行为什么会两次

问题描述 复选框单击按钮执行为什么会两次 $(".icheckbox_square-green").click(function(){ alert(2); console.log($(this).hasClass("checked")); if($(this).hasClass("checked")){ $(this).removeClass("checked"); }else{ $(this).addClass("

软件-CListCtrl 复选框 单行颜色绘制

问题描述 CListCtrl 复选框 单行颜色绘制 我想做一个CListCtrl Report风格扩展复选框的软件通过 选择复选框表示要测试的数据比如说分数高于60分的标注绿色低于60分的标注红色, 但是复选框和绘制颜色不兼容怎么处理?? 解决方案 复选框单独放在一列上,这一列不要绘制.或者连复选框一起重绘.

jquery实现带复选框的表格行选中删除时高亮显示

在实际的应用中可能会出现表格中带复选框的,删除时,将复选框所在的行的记录删除.在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示   通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复 选框的,删除时,将复选框所在的行的记录删除.在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示.这样给人的感觉非 常好. 效果如下:   我做的这里有两个功

Word中怎么制作打勾复选框

平时在编辑word时会需要制作打勾的复选框,也许很多朋友还不知道怎么设置,本教程就为大家介绍具体操作过程,下面就一起来看看吧.我们以Word2010版来演示word复选框打勾的整个操作过程. 第一步,单击"开发工具"--"控件"--"复选框内容控件",word会自动在当前光标位置插入一个复选框控件,如下图第三标识的. 第二步,选中上图第三标识的复选框,word默认是在复选框内打叉而不是打勾.我们选中复选框,会自动激活"属性",

excel 2013怎样插入复选框

  excel 2013插入复选框的教程: 插入复选框步骤1:打开软件,新建一个默认的空白文档. 插入复选框步骤2:点击文件选项卡命令,打开设置面板页面,单击选项,弹出对话框. 插入复选框步骤3:在弹出的对话框中,选择单击"自定义功能区",然后选择"不在功能区的命令". 插入复选框步骤4:找到"复选框"命令,然后在最右侧设置框中选定导入该命令的选项卡,然后点击添加. 插入复选框步骤5:这个时候,就可以在刚才选择的选项卡上看到复选框命令了,可以随便