自制Jquery下拉框插件
(function ($) {
$.fn.select3 = function (option) { $(this).each(function () {
var _this = $(this);
var isInit = _this.prev('div').hasClass('select3-parent');
if(isInit){
_this.prev('div.select3-parent ').remove();//清空之前的组件
} var _default = {
className: 'select3-parent', //下拉框样式可自定义
width: '100px'
}; //是否是禁用状态
var isDisabled = _this[0].attributes.disabled;
if (isDisabled) {
_default.className += ' select3-disabled';
} //默认会根据元素设置的宽度给设置宽度,这里最好设置原始下拉框的宽度 //合并自定义属性
_default = $.extend(_default, option);
var _data_val = _this.children('option:checked').attr('value'); //默认选中项的值
_data_val = (_data_val ? _data_val : '-')
var _text = _this.children('option:checked').text().trim(); //默认选中项的文本
_text = (_text ? _text : '-');
var hasBorder = _default.border == false ? 'no-border' : ''; var _tplWrap = '<div class="'+ _default.className +' '+ hasBorder+'" style="width:'+ _default.width+'">' +
'<div class="select3-topic" data-val="'+ _data_val +'"><span>'+ _text +
'</span><i class="fa fa-sort-down"></i></div><ul class="select3-ul" style="width:'+ _default.width+'">'; _this.children().each(function () {
var _this = $(this);
var _data_val = $(this).attr('value');
var _text = $(this).text().trim();
var _disabled = _this.attr('disabled'); if (_this.is('optgroup')) {
_text = _this.attr('label');
_data_val = 'group';
_tplWrap += '<li data-val="'+ _data_val +'" class="select3-group">'+ _text + '<ul>';
_this.children().each(function () {
_text = $(this).text().trim();
_data_val = $(this).attr('value');
_tplWrap += '<li data-val="'+ _data_val +'">'+ _text +'</li>';
});
_tplWrap += '</ul></li>';
}else{
if (_disabled) {
_tplWrap += '<li data-val="'+ _data_val +'" disabled="disabled">'+ _text +'</li>';
} else {
_tplWrap += '<li data-val="'+ _data_val +'">'+ _text +'</li>';
}
}
}); _tplWrap += '</ul></div>'; _this.addClass('hide');//隐藏当前控件 _this.before(_tplWrap)//显示插件化后的控件 //绑定下拉事件
$('.select3-topic').unbind().on('click', function () {
var isDisabled = $(this).parent('div').hasClass('select3-disabled');
if (isDisabled) {
return;
} $('.open').not($(this).parent('div')).removeClass('open');
$(this).addClass('open');
$(this).children().addClass('open');
$(this).parent('div').toggleClass('open');
}); //绑定行点击事件
$('.select3-ul li[data-val!="group"]').unbind().on('click', function () {
var _parent = $(this).parents('.select3-ul');//获取父标签
var _val = $(this).attr('data-val');
var _text = $(this).text();
var _disabled = $(this).attr('disabled'); if (_parent.siblings('div').attr('data-val') == _val || _disabled) {
return;
} _parent.siblings('div').attr('data-val', _val);
_parent.siblings('div').find('span').text(_text);
_parent.parent('div').removeClass('open');//隐藏父标签
_parent.parent('div').next('select').val(_val);//设置select值 _parent.parent('div').next('select').change();
});
}); //body click 去除下拉
$('body').unbind().click(function(e){ var pType = e.target.tagName;
var className = e.target.className;
var reg = new RegExp('open') if (pType == 'I' || pType == 'SPAN') {
className = e.target.parentElement.className;
} if (className == 'open-dt' || pType == 'DT' || reg.test(className)) {
return;
} $('.open').removeClass('open');//select3第2版
}); };
})(jQuery);
CSS 代码:
/* select3 容器最外层未点开样式 */
.select3-parent{
font-family: Arial,"Microsoft YaHei";
font-size: 12px;
display: inline-block;
border-radius: 5px;
border:1px solid #dfdfdf;
height: 30px;
line-height: 30px;
cursor: pointer;
position: relative;
background-color: #ffffff;
color: #666666;
min-width: 60px;
vertical-align: top;
} .select3-disabled{
color:#999;
cursor:default;
background-color:#eee;
} .no-border{
border:none;
bottom: -5px;
} .select3-topic{
height: 30px;
line-height: 30px;
/*overflow: hidden;*/
padding-left: 10px;
padding-right: 10px;
} .select3-topic span{
height: 30px;
display: inline-block;
width: 88%;
overflow: hidden;
text-overflow:ellipsis;
} .select3-topic i{
float:right;
margin-top:5px;
} /* select3 下拉内容 */
.select3-ul{
display: none;
position: absolute;
list-style: none;
padding:0;
margin:0;
border:1px solid #dfdfdf;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-left:-1px;
background-color: #ffffff;
z-index: 999;
overflow: auto;
max-height: 330px;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
} /* 下拉内容样式 */ .select3-ul li{
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
text-overflow:ellipsis;
} .select3-ul li[disabled]{
/*background-color: #eeeeee;*/
color: #dfdfdf;
} .select3-ul li:hover{
background-color: #111e30;
color: #ffffff;
} .select3-ul li[disabled]:hover{
background-color: #ffffff;
color:#dfdfdf;
cursor: default;
} /* 分组标题样式 select3-group */
.select3-ul li.select3-group{
padding-left: 0;
padding-right: 0;
text-indent: 10px;
color: black;
} .select3-group{
cursor: default;
font-weight: bold;
} .select3-group ul{
font-weight: normal;
color: #666666;
list-style: none;
padding:0;
margin:0;
} .select3-group li{
padding-left: 10px;
padding-right: 10px;
} li.select3-group:hover{
background-color: #ffffff;
color: black;
} .select3-group li:hover{
cursor: pointer;
} /* select3 容器最外层点开后样式 */
.select3-parent.open{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
border-bottom: none;
border-bottom: 1px solid #fff;
} .select3-parent.open.no-border{
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
} /* 点开后,下拉菜单内容的样式 */
.select3-parent.open .select3-ul{
display: block;
} .select3-parent.open .select3-topic{
padding:0px;
height: 29px;
margin-left: 10px;
margin-right: 10px;
border-bottom: 1px solid #dfdfdf;
}
禁用效果:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAAAqCAIAAAD0/pM9AAACYElEQVR4nO3dvY6yQBiG4T3/M7CnsKKn5xDomYEhgjAalWRiNsavQFf9RN0RkJ+9r4oo5g3J8wyoCXwd68znc2NM7VvAX/ZV+yqFAWpRGMAChQEsUBjAQtPClGWplIqiKARGSEqZJMkv026MaVQYrbWUcrFY5Hm+AkaoKIo0TaWUWuvnad9sNnEcv1+YsiyrMX0fMtBUtfSXZfko7caYOI4Ph8P7hUmSJE3Tvo8UaEeapkmSPEp7lmW73e7Y5DuMlLIoir4PE2iH1loI8SjtcRx/f383KkwYhn0fI9CmMAyfpL3aoDDACYUBLFAYwAKFASwMpjCB57j+f1t1fHc2e/L2n56F7o2gML47e8E2aFOdhe4NujC+201mpjoL3eu5MIHn3C2oVbB8dzZzvKBuv2uXXV6a6ix80jDPMHeJqb/+DzznrWBNdRa6N8zC3IWo3ZV4qrPQvfEU5uc13z2nqZVVf0Kz0L1hFKb6weg+WLd5Ou1wCdZbpjoLH9F7YXy3ilTtSnzePO0UBMHqJ1jnD1qY6ix8Ts+FufzAWhss33W8wHdvr+ivV+JLul7/8TfOWRiW3s8wZ7frb/1339NffXVXLkEQrALP+d2X5RHNwsAMpjDAGFAYwAKFASxQGMAChQEsUBjAQreF4TZLmJLOb7PEjfwwJVmWKaUepb2FG/mVZSmE6PswgRZoraMo2m63j9JujJFSNirM8XjM81wIkaYpd1jGSGmtl8ullDLLsudpX6/XUsqmj7swxiil6p4jAIyAEEIp9eTccm2/3/NAJcAChQEsUBjAAoUBLFAYwMI/iPaz/g+iTJUAAAAASUVORK5CYII=" alt="" />
常态:
自制Jquery下拉框插件的更多相关文章
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- jquery 下拉框插件,实现智能补全,模糊搜索,多选
近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
- 基于Bootstrap的下拉框插件bootstrap-select
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...
- jquery 下拉框 收藏
jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...
- jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery)
jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <ht ...
随机推荐
- SPOJ:Another Version of Inversion(二维数组的逆序对)
DCE Coders admins are way much geekier than they actually seem! Kartik has been following that tradi ...
- Dijkstra再理解+最短路计数
众所周知,Dijkstra算法是跑单源最短路的一种优秀算法,不过他的缺点在于难以处理负权边. 但是由于在今年的NOI赛场上SPFA那啥了(嗯就是那啥了),所以我们还是好好研究一下Dij的原理和它的优化 ...
- Visual Studio 中使用的正则表达式 说明
Visual Studio 中使用的正则表达式 说明 2013-10-11 21:10:12| 分类: VB和VBA知识|举报|字号 订阅 参考:详解Visual Studio正则替换大 ...
- vue 基本知识整理
1 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例 2 可以扩展Vue构造器,从而使用预定义选项创建可复用的组件构造器 所有的Vue.js组件其实都是被扩展的Vue实例 每一个VUE ...
- UVaLive 6588 && Gym 100299I (贪心+构造)
题意:给定一个序列,让你经过不超过9的6次方次操作,变成一个有序的,操作只有在一个连续区间,交换前一半和后一半. 析:这是一个构造题,我们可以对第 i 个位置找 i 在哪,假设 i 在pos 位置, ...
- bzoj 3676: [Apio2014]回文串【回文自动机】
回文自动机板子 或者是SAM+manacher+倍增,就是manacher求本质不同回文串(让f++的串),然后在SAM倍增查询对应点出现次数 #include<iostream> #in ...
- 哈夫曼费用计算C++
#include<stdio.h> #include<string.h> #include<math.h> #include<iostream> #in ...
- background-size属性
background-size:属性有 auto:length :百分比 length 如:10px 20px 固定的 或者是写成一个 ,10px 另外一个就默认为 auto; 写成百分比的形式 是 ...
- scikit-learning教程(三)使用文本数据
使用文本数据 本指南的目标是探讨scikit-learn 一个实际任务中的一些主要工具:分析二十个不同主题的文本文档(新闻组帖子)集合. 在本节中,我们将看到如何: 加载文件内容和类别 提取适用于机器 ...
- Codeforces Round #261 (Div. 2) A
Description Pashmak has fallen in love with an attractive girl called Parmida since one year ago... ...