首页 > 代码库 > query多选下拉框插件 jquery-multiselect(修改)
query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了，其中
query多选下拉框插件 jquery-multiselect
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
这2个的介绍已经比较详细了，尤其是第二个有扩展MyValues函数，只是扩展有些bug，这里我在提出一些我的扩展，我们应该把multiValues属性定义在options里面，让每个multiselect控件都有自己的multiValues属性。我这里还需要一个获取text的方法。有关Myvalues和Mytexts的函数如下：
MyValues: function () {
return this.options.multiValues;
},
MyTexts: function () {
return this.buttonlabel.html();
},
默认的mytexts会有html编码效果，比如我的text是111&AAAA，我希望返回的呈现的text就是真是的值而不是111&AAA；要实现这个功能需要需要修改_setButtonValue函数
_setButtonValue: function (value) {
// this.buttonlabel.text(value);
this.buttonlabel.html(value);
},
在多选框弹出层关闭的时候我们要实现一些自己ajax请求，于是乎我们需要一个close函数，函数定义在options属性里面 WinClose: null,实现在close方法里面
if (this.options.WinClose) {
this.options.WinClose(this);
}
客户端的控件效果默认是没有固定高度，这里我们需要加一个固定高度给button
<button type="button" style=" height: 24px; overflow: hidden" >
最后的调用代码是：
$("select[id*=‘ListBox‘]").multiselect({
noneSelectedText: "==请选择==",
checkAllText: "全选",
uncheckAllText: ‘全不选‘,
selectedList: 5,
WinClose: function (val) {
alert("Values:" + val.MyValues() + " Texts:" + val.MyTexts());
}
});
实现的效果如下：
当我们关闭弹出层时会调用我们的Winclose函数
修改后的整个js如下：
/* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, boss:true, undef:true, curly:true, browser:true, jquery:true */
/*
* jQuery MultiSelect UI Widget 1.14pre
* Copyright (c) 2012 Eric Hynds
*
* http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
*
* Depends:
* - jQuery 1.4.2+
* - jQuery UI 1.8 widget factory
*
* Optional:
* - jQuery UI effects
* - jQuery UI position utility
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function ($, undefined) {
var multiselectID = 0;
var $doc = $(document);
$.widget("ech.multiselect", {
// default options
options: {
multiValues: "",
header: true,
height: 175,
minWidth: 225,
classes: '',
checkAllText: 'Check all',
uncheckAllText: 'Uncheck all',
noneSelectedText: 'Select options',
selectedText: '# selected',
selectedList: 0,
show: null,
hide: null,
autoOpen: false,
multiple: true,
position: {},
WinClose: null,
appendTo: "body"
},
_create: function () {
var el = this.element.hide();
var o = this.options;
this.speed = $.fx.speeds._default; // default speed for effects
this._isOpen = false; // assume no
// create a unique namespace for events that the widget
// factory cannot unbind automatically. Use eventNamespace if on
// jQuery UI 1.9+, and otherwise fallback to a custom string.
this._namespaceID = this.eventNamespace || ('multiselect' + multiselectID);
var button = (this.button = $('<button type="button" style=" height: 24px; overflow: hidden" ><span class="ui-icon ui-icon-triangle-1-s"></span></button>'))
.addClass('ui-multiselect ui-widget ui-state-default ui-corner-all')
.addClass(o.classes)
.attr({ 'title': el.attr('title'), 'aria-haspopup': true, 'tabIndex': el.attr('tabIndex') })
.insertAfter(el),
buttonlabel = (this.buttonlabel = $('<span />'))
.html(o.noneSelectedText)
.appendTo(button),
menu = (this.menu = $('<div />'))
.addClass('ui-multiselect-menu ui-widget ui-widget-content ui-corner-all')
.addClass(o.classes)
.appendTo($(o.appendTo)),
header = (this.header = $('<div />'))
.addClass('ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix')
.appendTo(menu),
headerLinkContainer = (this.headerLinkContainer = $('<ul />'))
.addClass('ui-helper-reset')
.html(function () {
if (o.header === true) {
return '<li><a class="ui-multiselect-all" href=http://www.mamicode.com/"#">' + o.checkAllText + '完整的demo下载地址