<select>
元素样式复写插件。
本插件只提供样式重写及基本的功能,如果需要更高级的功能,请参考:
<select data-am-selected>
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
</select>
<select multiple data-am-selected>
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
</select>
<select multiple data-am-selected>
<option value="a">Apple</option>
<option value="b" selected>Banana</option>
<option value="o">Orange</option>
<option value="m" selected>Mango</option>
</select>
<select multiple data-am-selected>
<optgroup label="水果">
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
</optgroup>
<optgroup label="装备">
<option value="phone">iPhone</option>
<option value="im">iMac</option>
<option value="mbp">Macbook Pro</option>
</optgroup>
</select>
btnWidth
: 按钮宽度,数字或者百分比,btnWidth: '50%'
btnSize
: 按钮尺寸,[xl|lg|sm|xs]
(参见 Button)btnStyle
: 按钮风格,[primary|secondary|success|warning|danger]
<select data-am-selected="{btnWidth: 300, btnSize: 'sm', btnStyle: 'secondary'}">
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
</select>
<select data-am-selected="{maxHeight: 100}">
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
<option value="phone">iPhone</option>
<option value="im">iMac</option>
<option value="mbp">Macbook Pro</option>
</select>
<select data-am-selected="{dropUp: 1}">
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
<option value="phone">iPhone</option>
<option value="im">iMac</option>
<option value="mbp">Macbook Pro</option>
</select>
基于 jQuery :contains
选择符实现的简易搜索。
<select data-am-selected="{searchBox: 1}">
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
<option value="phone">iPhone</option>
<option value="im">iMac</option>
<option value="mbp">Macbook Pro</option>
</select>
<select multiple data-am-selected minchecked="2" maxchecked="3">
<option value="a">Apple</option>
<option value="b">Banana</option>
<option value="o">Orange</option>
<option value="m">Mango</option>
</select>
给 <select>
元素添加 data-am-selected
属性(可设置相关参数),如上面的示例所示。
通过 $('select').selected(options)
启用样式复写。
如果项目中同时使用了 jQuery Form,$.fn.selected
有命名冲突,请使用 $('select').selectIt(options)
替代。
$(function() {
// 使用默认参数
$('select').selected();
// 设置参数
$('select').selected({
btnWidth: '300px',
btnSize: 'sm',
btnStyle: 'primary',
maxHeight: '100px'
});
});
btnWidth: null
: 按钮宽度,默认为 200px
btnSize: null
: 按钮尺寸,可选值为 xl|sm|lg|xl
btnStyle: 'default'
: 按钮样式,可选值为 primary|secondary|success|warning|danger
maxHeight: null
: 列表最大高度dropUp: 0
: 是否为上拉,默认为 0
(false
)