模板简介
模板使用说明(必读)
主题配色问题
关于V5模板中的CSS变量
首页修改地址后刷新不变的问题
顶部导航对应侧边栏菜单切换
侧边栏菜单的JS初始化
iframe子页面刷新问题
iframe版本右侧内容区域404问题
关于非iframe版本菜单高亮
iframe版本的Tab插件相关问题
关于iframe版本里面的加载动画
webuploader使用时候的问题
模板字体图标问题
关于版权和商业用途
模板中固有插件
1
bootstrap-colorpicker颜色选择
2
bootstrap-datepicker日期选择
3
bootstrap-datetimepicker日期时间
4
bootstrap-maxlength长度验证
5
bootstrap-select下拉选择
6
bootstrap-table表格插件
7
fullcalendar日程插件
8
jquery-confirm对话框
9
jquery-tagsinput标签插件
10
magnific-popup图片查看
11
webuploader上传插件
12
bootstrap-notify消息插件
13
chartjs图表插件
14
bootstrap.wizard向导插件
15
perfect-scrollbar滚动条插件
16
bootstrap-multitabs多标签
17
moment.js日期处理类
18
loading插件
19
popper插件
插件项目包含插件
1
bootstrap-daterangepicker
2
material-datetimepicker
3
dropzone上传
4
cropper图片裁剪
5
ckeditor富文本编辑器
6
editor.md编辑器
7
summernote富文本编辑器
8
tinymce富文本编辑器
9
ueditor富文本编辑器
10
wangeditor富文本编辑器
11
jquery-validate表单验证
12
bootstrap-selectN联动
13
bootstrap-lyear-select下拉
14
select2下拉选择框
15
lyear-dropdowntree下拉树状
16
ZTree树形菜单
17
treeview树状插件
18
jstree树状结构
19
imgVer拼图滑块
20
sliderVerification滑块验证
21
layer弹窗插件
22
jquery.auto.complete自动填充
23
fixedheadertable固定表头
24
fontIconPicker图标选择
25
jQuery Raty评分插件
26
jquery.toolbar弹出式工具栏
27
bootstrap-touchspin输入微调器
插件项目包含示例
1
表单布局示例
2
聊天页面示例
3
logo处使用文字
4
模态框中使用Tab
5
模态框最大化
6
搜索布局
7
搜索布局2
8
选择示例
9
选择示例2
10
选择示例3
11
选择示例4
12
代码演示切换
13
留言列表布局
14
布局(数据统计篇)
15
布局(产品价格篇)
16
布局(搜索框篇)
17
布局(用户篇)
18
布局(动画篇)
19
布局(其他篇)
20
另一种侧边栏菜单
21
顶部和左侧联动
22
JS初始化菜单
23
H5上传
bootstrap-lyear-select下拉 - 光年模板(V5)说明文档 - 笔下光年
网站首页
bootstrap-lyear-select下拉
该插件是我自己做的一个基于bootstrap的简单select下拉框插件,只支持单个选项(不支持多选项和分组)、搜索。使用时,记得引入页面style内的样式。 之所以做这个插件,只是为了配合后面的联动插件一起使用,如果你需要更多的其他功能,请使用另外的两个select插件。  如果你使用该插件,那么需要新增以下的样式。 ```css .lyear-select { position: relative; } .lyear-select .form-control { background-color: #fff!important; cursor: pointer; } .lyear-select .dropdown-menu { min-width: 100%; max-height: 300px; overflow-y: auto; } .lyear-select .dropdown-menu a { cursor: pointer; } .lyear-select .dropdown-menu li.selected a, .lyear-select .dropdown-menu li.selected:hover a { background-color: #33cabb; color: #fff; } .lyear-select .form-control { padding-right: 30px; } .lyear-select i.mdi { font-size: 20px; position: absolute; top: 3px; right: 5px; } ``` ```html <div class="form-group"> <select name="example-1" class="exampleSelect"> <option value=""></option> <option value="1">最新的</option> <option value="2">未审核</option> <option value="3">未通过</option> <option value="4">正在审核</option> <option value="5">已审核</option> <option value="6">已通过</option> </select> </div> ``` 在select上可以设置 `data-search="true"`(是否开启搜索) `data-width="200px"`(设置长度,可以设置百分比) `data-placeholder="请选择"`(设置空项的文字)。 ```javascript $('.simpleSelect').each(function() { var $this = $(this); $this.lyearSelect({ width: $this.data('width') ? $this.data('width') : '', // 宽度width,示例:75px、50% placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择', // 空值项提示语,默认:请选择 search: $this.data('search') ? $this.data('search') : false, // 是否允许搜索 }); }); ``` 获取选中值跟select原生一样没有区别。 ```javascript $('.exampleSelect').val(); ``` 插件项目中页面名字:`lyear_js_bootstrap_lyear_select.html` 演示地址:http://lyear.itshubao.com/v5/example/ 涉及的文件: - `js/bootstrap-lyear-select.min.js`
上一篇:
bootstrap-selectN联动
下一篇:
select2下拉选择框
阅读设置
字体大小
小号 (14px)
标准 (16px)
大号 (18px)
超大 (20px)
特大 (24px)
阅读主题
默认
护眼模式
夜间模式
古卷模式
恢复默认
确定