使用Jquery X-Menu 插件实现多选checkbox控件的功能
2016-10-09 18:05
656 查看
Jquery X-Menu 插件可以用来实现表单多选形式。
实现效果如下:
下面介绍使用步骤:
1、在页面 head 引入 x-Menu 样式与脚本文件:
<link type="text/css" rel="stylesheet" href="css/powerFloat.css" />
<link type="text/css" rel="stylesheet" href="css/xmenu.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-powerFloat-min.js"></script>
<script type="text/javascript" src="js/jquery-xmenu.js"></script>
2、下拉控件的页面设计:
<div class="info_value_long">
<a id="selectdept" href="javascript:void(0);" class="as">
<span>选择部门</span>
</a>
<input type="hidden" value="" id="selectdeptidden" />
</div>
3、多选项的页面设计:
<div id="m2" class="xmenu" style="display: none;">
<div class="select-info">
<label class="top-label">已选部门:</label> <——决定哪些项别选择的区域
<ul>
</ul>
<a name="menu-confirm" href="javascript:void(0);" class="a-btn">
<span class="a-btn-text">确定</span>
</a>
<div>
<dl>
<dt class="open">需求部门</dt> <———第一个多选备选项区域
<dd>
<ul>
<li rel="1" class="">开发部</li>
<li rel="2">人事部</li>
<li rel="3">市场部</li>
<li rel="4" class="">业务部</li>
<li rel="5">财务部</li>
</ul>
</dd>
<dt class="open">缺编部门</dt> <———第二个多选备选项区域
<dd>
<ul>
<li rel="15" class="">研发部</li>
<li rel="16">广告部</li>
<li rel="17">出纳部</li>
<li rel="18" class="">后勤部</li>
</ul>
</dd>
</dl>
</div>
4、X-Menu的调用,在页面的 js代码中:
$(document).ready(function() {
$("#selectdept").xMenu({
width :600,
eventType: "click", //事件类型 支持focus click hover
dropmenu:"#m2",//弹出层
hiddenID : "selectdeptidden"//隐藏域ID
});
});
注意:上面只是介绍了X-Menu的大致使用步骤,在实际开发中,会有一些出入。详细文档参考:http://sc.chinaz.com/jiaoben/140126415770.htm
下载源码查看。
提示:修改样式文件参考 xmenu.css; 同时调用 x-menu 的jquery代码中,还有很大的一部分没有写进文章中,调用时请注意别遗漏。
实现效果如下:
下面介绍使用步骤:
1、在页面 head 引入 x-Menu 样式与脚本文件:
<link type="text/css" rel="stylesheet" href="css/powerFloat.css" />
<link type="text/css" rel="stylesheet" href="css/xmenu.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-powerFloat-min.js"></script>
<script type="text/javascript" src="js/jquery-xmenu.js"></script>
2、下拉控件的页面设计:
<div class="info_value_long">
<a id="selectdept" href="javascript:void(0);" class="as">
<span>选择部门</span>
</a>
<input type="hidden" value="" id="selectdeptidden" />
</div>
3、多选项的页面设计:
<div id="m2" class="xmenu" style="display: none;">
<div class="select-info">
<label class="top-label">已选部门:</label> <——决定哪些项别选择的区域
<ul>
</ul>
<a name="menu-confirm" href="javascript:void(0);" class="a-btn">
<span class="a-btn-text">确定</span>
</a>
<div>
<dl>
<dt class="open">需求部门</dt> <———第一个多选备选项区域
<dd>
<ul>
<li rel="1" class="">开发部</li>
<li rel="2">人事部</li>
<li rel="3">市场部</li>
<li rel="4" class="">业务部</li>
<li rel="5">财务部</li>
</ul>
</dd>
<dt class="open">缺编部门</dt> <———第二个多选备选项区域
<dd>
<ul>
<li rel="15" class="">研发部</li>
<li rel="16">广告部</li>
<li rel="17">出纳部</li>
<li rel="18" class="">后勤部</li>
</ul>
</dd>
</dl>
</div>
4、X-Menu的调用,在页面的 js代码中:
$(document).ready(function() {
$("#selectdept").xMenu({
width :600,
eventType: "click", //事件类型 支持focus click hover
dropmenu:"#m2",//弹出层
hiddenID : "selectdeptidden"//隐藏域ID
});
});
注意:上面只是介绍了X-Menu的大致使用步骤,在实际开发中,会有一些出入。详细文档参考:http://sc.chinaz.com/jiaoben/140126415770.htm
下载源码查看。
提示:修改样式文件参考 xmenu.css; 同时调用 x-menu 的jquery代码中,还有很大的一部分没有写进文章中,调用时请注意别遗漏。
相关文章推荐
- datagrid的几点简单应用,功能包括radio的单选,checkbox的多选,鼠标移动到行上颜色变深,链接传递多参数等功能。这里radio和checkbox都使用的是HTML控件。
- 使用jQuery插件和FCK实现csdn博客功能
- GBin1教程:使用jQuery插件jquery.validationEngine实现表单验证功能
- GBin1教程:使用jQuery插件jquery.validationEngine实现表单验证功能
- GBin1教程:使用jQuery插件jquery.validationEngine实现表单验证功能
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- 使用jquery插件实现打印指定区域功能
- PHP+Jquery+Ajax实现checkbox多选删除功能
- Jquery多选下拉列表插件jquery multiselect功能介绍及使用
- 使用jquery插件【jquery.cookie】,实现【记住我】功能
- ASP.NET jQuery 随笔 使用allValidator插件简单实现客户端验证功能
- 使用jquery插件【jquery.cookie】,实现【记住我】功能
- 简单测试实现 博客园的头像上传功能 使用插件jquery jcrop+fineupload
- Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)
- jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)
- jQuery实现换肤功能(使用cookie.js插件)
- CListCtrl控件实现点击单行选中当前CheckBox点击CheckBox实现多选功能