轻量级Jquery简洁精美小巧的下拉框
本帖最后由 znds 于 2019-6-26 10:47 编辑基于jquery-1.11.2.min.js的下拉框=========================================
效果如下
引用了style 文件 里面 再引用 layout.css、base.css两个CSS
当然可以不这么麻烦 可以 全部写到一起去。
以下是style 文件样式定义==============================================
@charset "utf-8";
/* CSS Document */
@import url("layout.css");
@import url("base.css");
/*下拉菜单*/
.single-select {
position: relative;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
cursor: pointer;
*float: left;
}
.single-select .boxwrap {
display: inline-block;
vertical-align: middle;
}
.single-select .select-tit {
position: relative;
display: block;
padding: 5px 38px 5px 10px;
min-width: 40px;
line-height: 20px;
height: 20px;
border: solid 1px #eee;
text-decoration: none;
background: #fff;
white-space: nowrap;
word-break: break-all;
}
.single-select .select-tit span {
display: inline-block;
color: #333;
font-size: 12px;
vertical-align: middle;
}
.single-select .select-tit i {
position: absolute;
right: 0;
top: 0;
display: block;
width: 28px;
height: 100%;
border-left: 1px solid #eee;
background: url(skin_icons.png) 7px -189px no-repeat #fafafa;
}
.single-select .select-items {
display: none;
position: absolute;
left: 0;
top: 45px; /*overflow:hidden;*/
}
.single-select .select-items ul {
position: relative;
padding: 5px;
min-width: 120px;
max-height: 280px;
border: 1px solid #eee;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
}
.single-select .select-items ul li {
display: block;
padding: 4px 10px;
line-height: 20px;
font-size: 12px;
color: #666;
white-space: nowrap;
cursor: pointer;
}
.single-select .select-items ul li:hover {
color: #fff;
text-decoration: none;
background: #16a0d3;
}
.single-select .select-items ul li.selected {
color: #fff;
background: #16a0d3;
}
.single-select .arrow {
display: none;
position: absolute;
left: 15px;
top: 35px;
width: 21px;
height: 11px;
text-indent: -9999px;
background: url(skin_icons.png) 0 -290px no-repeat;
}
.single-select.up .select-items {
top: auto;
bottom: 45px;
}
.single-select.up .arrow {
top: -13px;
background: url(skin_icons.png) 0 -300px no-repeat;
}
.page-footer {
padding: 10px 0;
height: 32px;
font-size: 12px;
}
.page-footer .btn-wrap {
position: fixed;
margin: 0;
padding: 10px 0;
top: auto;
left: 15px;
right: 15px;
bottom: 0;
background: #fff;
z-index: 3;
}
.page-footer .btn-wrap:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* ==========================下拉框样式.结束======================== */
layout.css样式定义====================================================
@charset "utf-8";
/* CSS Document */
/*================管理首页布局.开始===================*/
.main-top{ position:absolute; top:0; right:0; left:180px; height:42px; z-index:11; }
.main-left{ position:absolute; top:0; bottom:0; left:0; width:180px; z-index:10; }
.main-container{ position:absolute; top:43px; right:0; bottom:0; left:180px; overflow:hidden; }
.main-container iframe{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; }
/*================管理首页布局.结束===================*/
base.css样式定义=====================================================
@charset "utf-8";
/* CSS Document */
*{ padding:0; margin:0; font-family:"Microsoft YaHei";font-size:10pt; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
time, mark, audio, video{ margin:0; padding:0; border:0; font-size:100%; text-decoration:none; }
html { line-height:1; }
ol, ul { list-style:none; }
接下来就要绑定 下拉框 样式。
以上css引用了 图标如下：
准备工作完成后开始js 下拉框样式的绑定事件=====================================
//单选下拉框
$.fn.ruleSingleSelect = function () {
var singleSelect = function (parentObj) {
parentObj.addClass("single-select"); //添加样式
parentObj.children().hide(); //隐藏内容
var divObj = $('<div class="boxwrap"></div>').prependTo(parentObj); //前插入一个DIV
//创建元素
var titObj = $('<a class="select-tit" href="javascript:;"><span></span><i></i></a>').appendTo(divObj);
var itemObj = $('<div class="select-items"><ul></ul></div>').appendTo(divObj);
var arrowObj = $('<i class="arrow"></i>').appendTo(divObj);
var selectObj = parentObj.find("select").eq(0); //取得select对象
//遍历option选项
selectObj.find("option").each(function (i) {
var indexNum = selectObj.find("option").index(this); //当前索引
var liObj = $('<li>' + $(this).text() + '</li>').appendTo(itemObj.find("ul")); //创建LI
if ($(this).prop("selected") == true) {
liObj.addClass("selected");
titObj.find("span").text($(this).text());
}
//检查控件是否启用
if ($(this).prop("disabled") == true) {
liObj.css("cursor", "default");
return;
}
//绑定事件
liObj.click(function () {
$(this).siblings().removeClass("selected");
$(this).addClass("selected"); //添加选中样式
selectObj.find("option").prop("selected", false);
selectObj.find("option").eq(indexNum).prop("selected", true); //赋值给对应的option
titObj.find("span").text($(this).text()); //赋值选中值
arrowObj.hide();
itemObj.hide(); //隐藏下拉框
selectObj.trigger("change"); //触发select的onchange事件
});
});
//绑定控件与DIV样式联动
$(selectObj).change(function () {
$(this).parent().find('.selected').removeClass('selected');
var index = $(this).prop('selectedIndex');
$($(this).parent().find('.boxwrap .select-items ul li')).addClass('selected');
var text = $(this).find('option:selected').text();
$(this).parent().find('.select-tit span').text(text);
})
//检查控件是否启用
if (selectObj.prop("disabled") == true) {
titObj.css("cursor", "default");
return;
}
//绑定单击事件
titObj.click(function (e) {
debugger
e.stopPropagation();
if (itemObj.is(":hidden")) {
//隐藏其它的下位框菜单
$(".single-select .select-items").hide();
$(".single-select .arrow").hide();
//位于其它无素的上面
arrowObj.css("z-index", "1");
itemObj.css("z-index", "1");
//显示下拉框
arrowObj.show();
itemObj.show();
} else {
//位于其它无素的上面
arrowObj.css("z-index", "99");
itemObj.css("z-index", "99");
//隐藏下拉框
arrowObj.hide();
itemObj.hide();
}
});
};
return $(this).each(function () {
singleSelect($(this));
});
}
上面已经完成了下拉框的绑定事件接下来 就是根据 class 来初始化绑定下拉框 这样就不需要在各个引用界面 重新书写调用绑定事件了。
废话不多说 上代码 ==========================================================================
$(function(){
$('.rule-single-select').ruleSingleSelect();
})
忘记上Jquery赋值操作了 废话不多说直接补上 代码如下===================================================
$('#主键').val(值).change();//代码赋值操作
免费入口：链接：https://pan.baidu.com/s/1_rTSs3s7v11lxqULARUK6w 提取码：ez4r
复制这段内容后打开百度网盘手机App，操作更方便哦这样 一个 精美的 下拉框 就完成了 总大小148 KB jquery-1.11.2.min.js 文件占93.6KB
为啥我都看不起jq,还是喜欢原生js 内裤超人 发表于 2019-6-26 10:20
为啥我都看不起jq,还是喜欢原生js
那你多 分享 一点js写的 兼容性又高的 又漂亮的 比较常用的插件出来。让我等 菜鸟 涨涨见识啊？ znds 发表于 2019-6-26 10:45
那你多 分享 一点js写的 兼容性又高的 又漂亮的 比较常用的插件出来。让我等 菜鸟 涨涨见识啊？
没什么好分享的，就是单纯喜欢js,不喜欢jq 内裤超人 发表于 2019-6-26 15:27
没什么好分享的，就是单纯喜欢js,不喜欢jq
jq 兼容性 好 。反正我觉得挺好用的。 znds 发表于 2019-6-26 17:33
jq 兼容性 好 。反正我觉得挺好用的。
我这边公司都是用js,页面加载快
页:
[1]