【UI】为项目添加类似于淘宝筛选列表勾选的ui-choose

简介: jQuery下载的地址:http://www.htmleaf.com/jQuery/Form/201512182916.htmlGitHub地址:https://github.com/wangxing218/ui-choose 具体的使用步骤,大家自行百度就可以搜索到,原始的效果如下: 这...

jQuery下载的地址:http://www.htmleaf.com/jQuery/Form/201512182916.html

GitHub地址:https://github.com/wangxing218/ui-choose

 

具体的使用步骤,大家自行百度就可以搜索到,原始的效果如下:

 这个插件的主要思想,就是将页面上绑定的<select>中的<option>转变成了<ul>和<li>!!!!!

============================================================================================================

这里咱们说明的是,对这个插件的样式按照自定义的需求进行修改的说明:

先看一下,最后的样子是这个样子的:

主要提现的效果就是可以让其整齐排列,一行2个,并且多余的文字自动省略号

 

要干的事情,第一就是为插件转化的ul和li设置bootstrap栅格系统

主要更改的就是下面这段:为ul添加了row   为li添加了 “col-lg-6 col-sm-6 col-md-6 col-xs-6”

 // 组建并获取相关的dom元素-select;
        _setHtml_select: function() {
            var _ohtml = '<ul class="ui-choose row">';
            this.el.find('option').each(function(index, el) {
                var _this = $(el),
                    _text = _this.text(),
                    _value = _this.prop('value'),
                    _selected = _this.prop('selected') ? 'selected' : '',
                    _disabled = _this.prop('disabled') ? ' disabled' : '';
                   var colClass = "col-lg-6  col-sm-6  col-md-6  col-xs-6";
                _ohtml += '<li title="' + _text + '" data-value="' + _value + '" class="' + _selected + _disabled +colClass+ '">' + _text + '</li> ';
            });
            _ohtml += '</ul>';
            this.el.after(_ohtml);

            this._wrap = this.el.next('ul.ui-choose');
            this._items = this._wrap.children('li');
            if (this._opt.itemWidth) {
                this._items.css('width', this._opt.itemWidth);
            }
            this.el.hide();
        },

文字过多自动省略号的,可以参考:http://www.cnblogs.com/sxdcgaq8080/p/8184499.html

 

 

 本篇文章的原始代码,可以查看GitHub项目:https://github.com/AngelSXD/myagenorderdiscount

大家可以去参考使用!!!

 

相关文章
|
1月前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
3月前
|
移动开发 开发框架 JavaScript
什么是 SAP UI5 项目 ui5.yaml 文件中的 specVersion 字段
什么是 SAP UI5 项目 ui5.yaml 文件中的 specVersion 字段
18 0
|
4月前
|
C++
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目(二)
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目
45 0
|
4月前
|
算法 关系型数据库 编译器
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目(一)
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目
69 0
|
6月前
|
小程序 JavaScript 前端开发
【易售小程序项目】项目创建+整合UI组件(FirstUI和uView)
【易售小程序项目】项目创建+整合UI组件(FirstUI和uView)
57 0
|
6月前
|
前端开发
ABAP2UI5 项目里动态创建模型的特性介绍
ABAP2UI5 项目里动态创建模型的特性介绍
32 0
|
7月前
使用在线编辑器创建 SAP UI5 项目并运行
使用在线编辑器创建 SAP UI5 项目并运行
30 0
|
7月前
|
前端开发 JavaScript API
借助 SAP 电商云 Spartacus UI 提供的 Schematics 辅助您的前端项目升级
借助 SAP 电商云 Spartacus UI 提供的 Schematics 辅助您的前端项目升级
40 0
|
7月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之一百零四 - SAP UI5 表格控件的支持复选(Multi-Select)以及如何用代码一次选中多个表格行项目
SAP UI5 应用开发教程之一百零四 - SAP UI5 表格控件的支持复选(Multi-Select)以及如何用代码一次选中多个表格行项目
50 0
|
7月前
|
Web App开发
SAP UI5 表格行项目内的按钮点击之后,如何获得当前所在的表格行项目的数据
SAP UI5 表格行项目内的按钮点击之后,如何获得当前所在的表格行项目的数据
39 0