站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jQuery自定义多选下拉框效果
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

jQuery自定义多选下拉框效果

来源: 易采站长站

项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好

通过$.fn 向jQuery添加新的方法

下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式

代码如下:  

1.效果图

2.代码


<div id="demo" class="dropdown-container">
<div class="dropdown-display">
<span></span>
<input type="text" class="iptdiplay" placeholder="请选择" readonly="readonly" />
</div>
<div class="dropdown-panel">
<div class="dropdown-search">
<span></span>
<input type="text" class="iptsearch" placeholder="关键字搜索" />
</div>
<ul class="dd-select">
<!-- area for dropdown items -->
</ul>
<div class="dropdown-opt">
<button class="dd-btn ok">确定</button>
<button class="dd-btn cancel">取消</button>
</div>
</div>
</div>


.dropdown-container{
display: block;
width: 200px;
height: 30px;
padding: 0px;
position: relative;
margin: 0px auto;
}

.dropdown-display{
display: block;
height: 30px;
position: absolute;
top: 0;
width:100%;
margin: 0px;
border:1px solid steelblue;
}
.dropdown-display span{
background: url(../static/choose_down_icon_01.png) no-repeat left 8px;
display: block;
height: 25px;
width: 10px;
position: absolute;
right: 5px;
top: 3px;
}
.dropdown-display input[class='iptdiplay']{
border: none;
border-color: transparent;
background: transparent;
border-radius: 0px;
box-shadow: none;
height: 30px;
width: 100%;
margin: 0px;
box-sizing: border-box;
box-shadow: none;
padding-left: 10px;
padding-right: 18px;
outline: none;
cursor: pointer;
text-overflow: ellipsis;
}
.dropdown-panel {
position: absolute;
top: 32px;
width:100%;
padding: 0px;
display: none;
border-left: 1px solid steelblue;
border-bottom: 1px solid steelblue;
border-right: 1px solid steelblue;
}

.dropdown-panel .dropdown-search{
display: block;
width: 100%;
height: 30px;
}
.dropdown-search span{
background: url(../static/chosen-sprite.png) no-repeat 100% -20px,linear-gradient(#eee 1%,#fff 15%);
display: block;
height: 25px;
width: 20px;
position: absolute;
right: 0px;
top: 3px;
}
.dropdown-search input[class='iptsearch']{
border: none;

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -