/*******************************
* @author mr.think
* @author blog http://mrthink.net/
* @2012.02.28
* @可自由转载及使用,但请注明版权归属
*******************************/
; (function ($) {
/*
* 统一select样式并实现样式高度自定义的jquery插件@mr.think(http://mrthink.net/)
*/
$.fn.isimulateselect = function (iset) {
iset = $.extend({
selectboxcls: 'i_selectbox', //string类型,外围class名
curscls: 'i_currentselected', //string类型,默认显示class名
optioncls: 'i_selectoption', //string类型,下拉列表class名
selectedcls: 'selected', //string类型,当前选中class名
width: 196, //number类型,模拟select的宽度
height: 300, //number类型,模拟select的最大高度
zindex: 20,//层级顺序
fun:null
}, iset || {});
this.hide();
return this.each(function () {
var self = this;
var thiscurval, thisselect, cindex = 0;
//计算模拟select宽度
if (iset.width == 0) {
iset.width = $(self).width();
}
var html = '
' + $(self).find('option:selected').text() + '
';
//判断select中是否有optgroup
//用dt替代optgroup,用dd替代option
if ($(self).find('optgroup').size() > 0) {
$(this).find('optgroup').each(function () {
html += '- ' + $(this).attr('label') + '
';
$(this).find('option').each(function () {
if ($(this).is(':selected')) {
html += '- ' + $(this).text() + '
';
} else {
html += '- ' + $(this).text() + '
';
}
});
});
} else {
$(this).find('option').each(function () {
if ($(this).is(':selected')) {
html += '- ' + $(this).text() + '
';
} else {
html += '- ' + $(this).text() + '
';
}
});
}
//将模拟dl插入到select后面
$(self).after(html);
//当前模拟select外围box元素
thisbox = $(self).next('.' + iset.selectboxcls);
//当前模拟select初始值元素
thiscurval = thisbox.find('.' + iset.curscls);
//当前模拟select列表
thisselect = thisbox.find('.' + iset.optioncls);
/*
若同页面还有其他原生select,请前往https://github.com/brandonaaron/bgiframe下载bgiframe,同时在此处调用thisselect.bgiframe()
*/
//thisselect.bgiframe();
//弹出模拟下拉列表
thiscurval.click(function () {
if(thiscurval.hasclass("selectshow")){
thisselect.hide();
thiscurval.removeclass("selectshow");
return false;
}
thiscurval.addclass("selectshow");
$('.' + iset.optioncls).hide();
$('.' + iset.selectboxcls).css('zindex', iset.zindex);
$(self).next('.' + iset.selectboxcls).css('zindex', iset.zindex + 1);
thisselect.show();
});
//若模拟select高度超出限定高度,则自动overflow-y:auto
if (thisselect.height() > iset.height) {
//thisselect.height(iset.height);
}
//模拟列表点击事件-赋值-改变y坐标位置-...
thisselect.find('dd').click(function () {
$(this).addclass(iset.selectedcls).siblings().removeclass(iset.selectedcls);
cindex = thisselect.find('dd').index(this);
thiscurval.text($(this).text());
$(self).find('option').removeattr("selected");
$(self).find('option').eq(cindex).attr('selected', 'selected');
$('.' + iset.selectboxcls).css('zindex', iset.zindex);
thisselect.hide();
thiscurval.removeclass("selectshow");
if($(self).attr("onchange")!=null && $(self).attr("onchange")!=""){
$(self).trigger('change');
}
//new
iset.fun?iset.fun():null;
});
//非模拟列表处点击隐藏模拟列表
//$(document)点击事件不兼容部分移动设备
$('html,body').click(function (e) {
if (e.target.classname.indexof(iset.curscls) == -1) {
thisselect.hide();
thiscurval.removeclass("selectshow");
$('.' + iset.selectboxcls).css('zindex', iset.zindex);
}
});
//取消模块列表处取消默认事件
thisselect.click(function (e) {
e.stoppropagation();
});
});
}
})(jquery);