Select 下拉菜单
原生方法
本框架对原生的select元素做了尽可能的美化处理,不加任何js依然表现出色。本框架对表单元素默认设置为宽100%,用户根据需要设置宽度。
<select> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> <div class="ax-break"></div> <select style="width:120px;"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">单选美化:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">多选美化:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select multiple> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> <option value="广州">广州</option> <option value="南宁">南宁</option> <option value="深圳">深圳</option> </select> </div> </div> </div> </div>
不同尺寸
本框架的select默认高度是38px,可使用的尺寸有ax-xs(18px),ax-sm(28px)和ax-lg(48px)。
插件方法
原生的下拉菜单不美观,而且在不同浏览器下有不同显示结果,为了保持风格统一改进体验,本框架在choices.js
基础上进一步美化了select元素,并将该插件与本框架进行了深度融合,目前所使用的版本是v9.0.1。原始插件详见Github。本框架主要改进内容如下:
- 将原插件的一些公共方法转移为ax.js的公共方法。
- 更新了fuse.js插件版本,并转移为ax.js的公共插件。
- 修改了插件的css命名方式。
- 修改了插件的调用方式,增加axSelect+其他属性的调用方式。
- 修改了克隆的input的class类,以便于css控制。
- 取消居右排列的样式,中文环境没有此类需求。
- 新增参数clasName,支持自定义样式。
- 增加对axSelect=*属性的支持。
- 增加对axInstance()方法的支持。
- 增加对disabled参数,通过参数直接禁用实例。
- 操作方法增加callback参数,this均指向实例。
- 新增参数width,支持自定义宽度。
使用方法
插件运行方式有两种:
- ax*属性:对input或select标签使用
axSelect
属性即可按默认参数运行插件。 - js实例:通过
new axSelect('#ID')
方式创建实例运行。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect> <option value="">请选择..</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select id="city"> <option value="">请选择..</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div>
-
let city = document.querySelector('#city'); new axSelect('#city');
定义宽度
下拉菜单默认是100%的宽度,如果需要自定义宽度有三个方法:
- 对select或input直接写上样式,比如style="width:100px;"
- 对select或input元素使用width属性,属性值需要带上单位,比如width:"100px"
- js调用的时候,对实例使用width属性,比如width:'100px'
<select axSelect style="width:200px"> <option value="">请选择..</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect='width:"150px"'> <option value="">请选择..</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div>
选项分组
对option使用optgroup
包裹即可。
<select axSelect> <option value="">请选择..</option> <optgroup label="直辖市"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </optgroup> <optgroup label="广东省"> <option value="深圳">深圳</option> <option value="广州">广州</option> <option value="珠海">珠海</option> <option value="惠州">惠州</option> </optgroup> <optgroup label="湖南省"> <option value="长沙">长沙</option> <option value="株洲">株洲</option> <option value="岳阳">岳阳</option> <option value="张家界">张家界</option> </optgroup> <optgroup label="江西省"> <option value="南昌">南昌</option> <option value="赣州">赣州</option> <option value="宜春">宜春</option> <option value="九江">九江</option> </optgroup> </select>
不可选
有两种方式禁用实例,首推新增方法:对元素使用disabled:true
属性即可实现禁止下拉和禁止选项;此外也可使用插件自身的disable()
方法禁用
如果要禁用选项,可像常规的select那样,给option选项写上disabled
属性即可。
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect='disabled:true'> <option value="">请选择..</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect> <option value="">请选择..</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆" disabled>重庆</option> </select> </div> </div> </div> </div>
多选
可像常规的select那样,对select使用multiple
属性即可。可配合常用参数使用:
- removeItemButton:是否显示删除选项按钮,默认是false,可使用true调用
- maxItemCount:最多能选几项,默认不限制
<select axSelect multiple> <option value="">请选择...</option> <optgroup label="直辖市"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </optgroup> <optgroup label="广东省"> <option value="深圳">深圳</option> <option value="广州">广州</option> <option value="珠海">珠海</option> <option value="惠州">惠州</option> </optgroup> <optgroup label="湖南省"> <option value="长沙">长沙</option> <option value="株洲">株洲</option> <option value="岳阳">岳阳</option> <option value="张家界">张家界</option> </optgroup> <optgroup label="江西省"> <option value="南昌">南昌</option> <option value="赣州">赣州</option> <option value="宜春">宜春</option> <option value="九江">九江</option> </optgroup> </select>
使用搜索
使用searchEnabled
属性即可启用模糊搜索。可配合常用参数使用:
- searchChoices:是否可筛选选项,默认是true,可使用false
- searchResultLimit:筛选结果最多显示几个,默认是4
- searchPlaceholderValue:检索框提示文字,默认为空
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect axSelect='searchEnabled:true'> <option value="">请选择..</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆" selected>重庆</option> </select> </div> </div> </div> </div>
默认选择
可像常规的select那样,对option使用selected
属性即可。
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect> <option value="">请选择..</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆" selected>重庆</option> </select> </div> </div> </div> </div>
手动创建选项
如果元素是input的话可将之当做手动创建选项的方法。使用回车键创建选项,使用Backspace键删除选项。
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" value="北京,上海,重庆" axSelect='placeholder:"输入文字...",removeItemButton:true'/> </div> </div> </div> </div>
操作
本框架下拉菜单支持通过按钮展开和关闭。以下是点击展开举例:
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select id="operate"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> <div class="ax-valid ax-color-primary" id="result"></div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="get">获取</a> <a href="###" class="ax-form-btn ax-btn ax-primary" id="add">增加</a> <a href="###" class="ax-form-btn ax-btn ax-primary" id="change">选择</a> <a href="###" class="ax-form-btn ax-btn ax-primary" id="clear">清除</a> </div> </div>
-
let operate = new axSelect('#operate'), get = document.querySelector('#get'), clear = document.querySelector('#clear'), add = document.querySelector('#add'), change = document.querySelector('#change'), result = document.querySelector('#result'); get.onclick = function () { result.innerHTML = operate.getValue(true, function () { alert('获取了'); }).toString(); } add.onclick = function () { operate.setValue([ { value: '南京', label: '南京' }, { value: '呼和浩特', label: '呼和浩特' }, ], function () { alert('新增了'); }); } change.onclick = function () { operate.setChoiceByValue('上海', function () { alert('选好了“上海”'); }); } clear.onclick = function () { operate.clearChoices(function () { alert('删除了'); }); }
不同尺寸
本框架对select下拉菜单支持四种尺寸,分别是ax-xs(高22px)、ax-sm(高28px)、ax-md(高38px)和ax-lg(高48px),使用size属性即可实现;如果是ax-form-group组合菜单,请同时给组合菜单追加尺寸类。
<div class="ax-form-group ax-xs"> <div class="ax-flex-row"> <div class="ax-form-label">特小尺寸:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect='size:"xs"'> <option value="xs">ax-xs(18px)</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group ax-sm"> <div class="ax-flex-row"> <div class="ax-form-label">小型尺寸:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect='size:"sm"'> <option value="sm">ax-sm(28px)</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">中型型尺寸:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect> <option value="md">ax-md(38px)</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group ax-lg"> <div class="ax-flex-row"> <div class="ax-form-label">大型尺寸:</div> <div class="ax-form-con"> <div class="ax-form-input"> <select axSelect='size:"lg"'> <option value="lg">ax-lg(48px)</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> </div> </div> </div> </div>
滑轮选择
鉴于mobiscroll的优点,本框架对另外物色了一款类似的滑轮选择插件mobileselect,并进行了大改以完全融入ax框架中。该插件为国内朋友所创建,详见Github。本框架做了如下改动:
- 可直接应用在input上,将最终值赋予input
- 将原插件AX风格化
- 修改了原class样式类
- 去掉setStyle方法
- 新增了className属性,并修改了创建窗口Dom的方法
- 去掉setTitle方法
- 修改了renderWheels方法
- 去掉checkIsPC方法,使用框架自带的axIsMobi方法
- 在PC端支持滚轮操作
- 增加打开类型,默认dialog,可选择popup和inline
- 增加labels参数,以显示列名
- 修改了Dom的class类
- 增加label,groupLabel和labels参数,以显示列名
- 增加setActive方法,给当前选项增加class类
- 修复mouseup离开wheel之后松开鼠标导致的粘滞Bug
- 回调函数修改this指向实例本身
- 默认keyMap新增name属性,默认显示name,如果没有name则显示value
- 增加final属性,确认后填入的值仅仅是最后一列的值
- 可从ul+li树和select下拉菜单取得数据
- 增加数据类型参数type,date是指日期,dataTime,array是默认值
- 新增getDate方法,获取日期
- 窗口标题随着滚动而改变内容
- 增加type参数,窗口不仅能在底部滑出还能以气泡和行内元素显示
- 新增setTitle方法和setValue方法
使用方法
插件运行方式有两种:
- ax*属性:对input或div绑定axScrollselct属性即可按默认参数运行插件。
- js实例:通过
new axScrollselct('#ID',{参数})
方式创建实例运行。
使用该插件首先需要有数据源,数据源目前可来源select下拉菜单,ul+li树结构,以及定义json变量。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">使用select数据:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"#ss-city"'> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">使用ul数据:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"#ss-country"'> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">使用json数据:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" id="car"> </div> </div> </div> </div>
-
let car = [ { id: "1", value: "兰博基尼" }, { id: "2", value: "劳斯莱斯", children: [ { id: "1", value: "曜影", }, { id: "2", value: "幻影", children: [ { id: "1", value: "标准版", }, { id: "2", value: "加长版", }, { id: "3", value: "巅峰之旅", }, { id: "4", value: "流光熠世", }, { id: "5", value: "都会典藏版", }, ], }, { id: "3", value: "古思特", children: [ { id: "1", value: "加长版", }, { id: "2", value: "永恒之爱", }, { id: "3", value: "英骥", }, { id: "4", value: "阿尔卑斯典藏版", }, ], }, { id: "4", value: "魅影", children: [ { id: "1", value: "标准版", }, { id: "2", value: "Black Badge", }, ], }, ], }, { id: "3", value: "宾利", children: [ { id: "1", value: "慕尚", children: [ { id: "1", value: "标准版", }, { id: "2", value: "极致版", }, ], }, { id: "2", value: "欧陆", children: [ { id: "1", value: "尊贵版", }, { id: "2", value: "敞篷标准版", }, { id: "3", value: "敞篷尊贵版", }, ], }, ], }, { id: "4", value: "法拉利",children: [ {id: "1",value: "LaFerrari", }, {id: "2",value: "法拉利488", }, {id: "3",value: "GTC4Lusso", }, ], }, { id: "5",value: "玛莎拉蒂",children: [ {id: "1",value: "总裁",}, {id: "2",value: "玛莎拉蒂GT",}, {id: "3",value: "Levante",}, ], }, ]; new axScrollSelect('#car', { wheels: [{data:car}], });
滚轮日期
有网友基于mobileselect插件改写了一款jQ的日期插件,本框架借鉴其写的日期函数,整合进来,是本插件支持选择年与日。
若要激活年月日选择,请将wheels的参数格式改成:date-1990-2021-ymd。使用方法如下:
- 四个参数必须用短横分开。
- 第一个参数date是表明数据类型,固定参数,不可更改。
- 第二个参数是开始年份,默认是auto。
- 第三个参数是结束年份,默认是auto。
- 第四个参数是数据结构,默认是ymd,即显示年月日,可选择ym(年月)。
- 如果起/止年份填auto,那么结束年份将是今年,开始年份是往前推20年。
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">年月日:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"date-1990-2021-ymd"'> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">年月:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"date-1990-2021-ym"'> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">今天年月日:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"date-auto-auto-ymd"'> </div> </div> </div> </div>
选择日期最好使用专业的日期选择插件,详见axDate插件。
多列独立数据
wheels参数接收数据来源,基本格式是[{data:数据一},{data:数据二},{data:数据三}...],有几组数据就会渲染成几列滚轮。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">多列数据:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" id="cols"> </div> </div> </div> </div>
-
let week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; let time = ["08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00",]; new axScrollSelect('#cols', { wheels: [{ data: week },{ data: time }], });
显示位置
该插件的type参数可设置窗口风格,默认是actionbar(底部滑出遮罩窗口),可选择popup(用axPopup包裹窗口),inline(行内显示,不定位)
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">actionbar:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"#ss-country",type:"actionbar"'> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">popup:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"#ss-country",type:"popup"'> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">inline:</div> <div class="ax-form-con"> <div class="ax-form-input"> <input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"#ss-country",type:"inline"'> </div> </div> </div> </div>