怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 341 JQUERY DREAMWEAVER
Checkbox-jQuery双向选择器
来源：互联网
2023-03-17 00:46:27 243
Checkbox-jQuery双向选择器
工具/原料
- adobe dreamweaver
方法/步骤
新建html文档。
准备好需要用到的图标。
书写hmtl代码。
div class="selection-container">
div class="select-box left">
div class="select-box-title">未选择 - 告警规则
input type="checkbox" class="checkbox-all" />
/div>
div class="select-content">
ul class="unselect-ul">
li>
input type="checkbox" class="checkboxs" />
span>磁盘使用率普通告警/span> /li>
li>
input type="checkbox" class="checkboxs" />
span>磁盘使用率严重告警/span> /li>
li>
input type="checkbox" class="checkboxs" />
span>内存使用率普通告警/span> /li>
li>
input type="checkbox" class="checkboxs" />
span>内存使用率严重告警/span> /li>
li>
input type="checkbox" class="checkboxs" />
span>CPU使用率普通告警/span> /li>
li>
input type="checkbox" class="checkboxs" />
span>CPU使用率严重告警/span> /li>
li>
input type="checkbox" class="checkboxs" />
span>设备故障告警/span> /li>
li>
input type="checkbox" class="checkboxs" />
span>维护到期告警/span> /li>
/ul>
/div>
/div>
div class="arrows-box">
div class="arrow-btns">
div class="arrow-btn right">i>/i>/div>
div class="arrow-btn left">i>/i>/div>
/div>
/div>
div class="select-box right">
div class="select-box-title">已选择 - 告警规则
input type="checkbox" class="checkbox-all" />
/div>
div class="select-content">
ul class="selected-ul">
/ul>
/div>
/div>
/div>
书写css代码。
style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; cursor: pointer; }
.selection-container { height: 350px; margin: 10px; }
.select-box { width: 250px; height: 100%; border: 1px solid #ccc; float: left; }
.arrows-box { width: 50px; height: 100%; float: left; position: relative; }
.select-content { width: 100%; height: 320px; overflow-y: auto; overflow-x: hidden; }
.select-box-title { width: 90%; height: 30px; line-height: 30px; font-size: 12px; font-family: "微软雅黑"; padding: 0 5%; border-bottom: 1px solid #ccc; }
.select-box-title input { margin: 8px 0; }
.checkbox-all { float: right; }
.checkboxs { vertical-align: middle; }
.unselect-ul { padding: 10px 0; }
.select-content li { padding: 5px 15px; font-size: 12px; font-family: "微软雅黑"; }
.arrow-btns { width: 100%; height: 90px; position: absolute; top: 50%; margin-top: -45px; }
.arrow-btn { width: 20px; height: 12px; padding: 18px 10px; background: #eee; border: 1px solid #ccc; margin: 0 auto 5px; cursor: pointer; }
.arrow-btn i { display: inline-block; width: 100%; height: 100%; background: url("images/arrow-left.png") no-repeat center center; }
.arrow-btn.right i { background: url("images/arrow-right.png") no-repeat center center; }
/style>
书写并添加js代码。
script src="js/jquery-1.11.1.min.js" >/script>
script>
$(function(){
//全选函数
$('.checkbox-all').click(function(){
if($(this).prop('checked')){
$(this).parent().next().find('.checkboxs').prop('checked',true);
}else{
$(this).parent().next().find('.checkboxs').prop('checked',false);
}
})
//单个checkbox与全选的关系函数
$('.select-content').on('click','.checkboxs',function(e){
var checkedAll = $(this).parents('.select-content').prev().find('.checkbox-all');
var checkboxs = $(this).prop('checked');
if(!checkboxs&&checkedAll.prop('checked')){
checkedAll.prop('checked',false);
}else if(checkboxs&&!checkedAll.prop('checked')){
var lis = $(this).parents('ul').children();
for(var i=0;ilis.length;i ){
if($(lis[i]).find('.checkboxs').prop('checked')){
if(i==lis.length-1){
checkedAll.prop('checked',true)
}
}else{
break;
}
}
}
stopFunc(e);
});
$('.select-content').on('click','li',function(){
$(this).children('.checkboxs').click();
})
//左右移按钮点击事件
$('.arrow-btn').click(function(){
var checkboxs,origin,target,num=0;
if($(this).hasClass('right')){
origin = $('.unselect-ul');
target = $('.selected-ul');
}else{
origin = $('.selected-ul');
target = $('.unselect-ul');
}
checkboxs = origin.find('.checkboxs');
for(var i=0;icheckboxs.length;i ){
if($(checkboxs[i]).prop('checked')){
var that = $(checkboxs[i]).parent().clone();
that.children('input').prop('checked',false);
target.append(that);
$(checkboxs[i]).parent().remove();
}else{
num ;
}
}
if(checkboxs.length == num){
alert('未选中任何告警规则！');
}else{
origin.parent().prev().find('.checkbox-all').prop('checked',false);
}
})
})
function stopFunc(e){
e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}
/script>
代码整体结构。
查看效果。
注意事项
- jquery-1.11.1.min.js是个js包，可以网上下载。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JQUERY
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 332 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 375 JQUERY