调用方式:$("select[data-class]").selectModel();
;
(function ($, window, document, undefined) {
"use strict";
var pluginName = "selectModel",
defaults = {
effect: {
"type": "standard",
"speed": "fast"
},
emptyMessage: 'Empty',
activeLi:'liActive'
};
function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this.instance;
this.init();
}
Plugin.prototype = {
/*
* 初始化
*/
init: function () {
this.instance = this._createInstance();
this._createElements();
this._hideSelect();
this._setEvents();
},
/*
* 产生ID,及是否展开的状态
*/
_createInstance: function () {
return {
selectId: +new Date(),
state: false
};
},
/*
* 隐藏原有select
*/
_hideSelect: function () {
$(this.element).hide();
},
/*
* 设置点击事件
*/
_setEvents: function () {
var self = this;
$(document).on("click", "html", function (e) {
e.stopPropagation();
self._closeSelectBox(true);
});
},
/*
* 模拟select的html结构
*/
_createElements: function () {
var self = this;
var selectModelEl = $('<div/>', {
id: 'selectbox_' + self.instance.selectId,
'class': 'selectbox '+ $(self.element).attr('data-class'),
data: {'sourceElement': self.element}
});
var selectValueWrap = $('<p/>', {
'class': 'select-info like-input'
});
var selectBoxEl = self._createSelectOptionWrap();
var isSelectBoxEmpty = selectBoxEl == null ? true : false;
var selectValueEl = self._createSelectValueWrap(isSelectBoxEmpty);
var selectModelArrowWrap = $('<span/>', {
'class': 'select-arrow'
});
var selectModelArrow = $('<i/>', {
'class': 'ui-arrow-bottom dark-ui-arrow-bottom'
});
selectModelArrowWrap.append(selectModelArrow);
selectValueWrap.append(selectModelArrowWrap).append(selectValueEl);
selectModelEl.append(selectValueWrap).append(selectBoxEl);
self.selectModelEl = selectModelEl;
$(self.element).before(self.selectModelEl);
self._setSelectBoxEvents(isSelectBoxEmpty);
},
/*
* 点击select头部的事件
*/
_setSelectBoxEvents: function (isSelectBoxEmpty) {
var self = this;
var selectModelEl = $("div#selectbox_" + this.instance.selectId);
if (!isSelectBoxEmpty) {
selectModelEl.find(".select-info").click(function (e) {
e.stopPropagation();
self._clickSelectOption();
});
}
},
/*
* 模拟select的option内容
*/
_createSelectOptionWrap: function () {
var self = this;
var selectBoxEl = $('<div/>', {
'class': 'selectbox-drop'
});
var selectBoxOptionsEl = $('<ul/>', {
'class': 'select-results'
});
$(self.element).children().each(function (index) {
var liClass = index==0 ? self.options.activeLi : '';
var selectModelLiEl = $('<li/>', {
rel: $(this).val(),
text: $(this).text(),
'class': liClass,
click: function (e) {
e.stopPropagation();
self._changeSelectValue(self, this);
}
});
selectBoxOptionsEl.append(selectModelLiEl);
});
selectBoxEl.append(selectBoxOptionsEl);
return $(this.element).children().length == 0 ? null : selectBoxEl;
},
_createSelectValueWrap: function (isSelectBoxEmpty) {
var selectValueEl = $('<span/>', {
'class': 'select-value',
text: isSelectBoxEmpty ? this.options.emptyMessage : $(this.element).children().first().text()
});
return selectValueEl;
},
/*
* 模拟select内容的展开与否
*/
_clickSelectOption: function (stageReady) {
if (this.instance.state) {
this._closeSelectBox();
}else {
if (!stageReady) {
this._closeOthers();
}else{
this._openSelectBox();
}
}
},
/*
* 点击模拟select中的option内容
*/
_changeSelectValue: function (self, clickedEl) {
var selectValueEl = $("#selectbox_" + this.instance.selectId).find(".select-value");
selectValueEl.text($(clickedEl).text());
this._closeSelectBox(true);
$(clickedEl).addClass(this.options.activeLi).siblings().removeClass(this.options.activeLi);
$(this.element).val($(clickedEl).attr('rel'));
},
/*
* 关闭模拟select
*/
_closeSelectBox: function (internal) {
$("#selectbox_" + this.instance.selectId).removeClass('selectbox-active active');
var selectBoxEl = $("#selectbox_" + this.instance.selectId).find(".selectbox-drop");
if (selectBoxEl.is(":animated") && !internal) {
return false;
}
this.instance.state = false;
switch (this.options.effect.type) {
case "fade":
selectBoxEl.fadeOut(this.options.effect.speed);
break;
case "slide":
selectBoxEl.slideUp(this.options.effect.speed);
break;
case "standard":
selectBoxEl.hide();
break;
default:
selectBoxEl.slideUp(this.options.effect.speed);
break;
}
},
/*
* 展开模拟select
*/
_openSelectBox: function () {
$("#selectbox_" + this.instance.selectId).addClass('selectbox-active active');
var selectBoxEl = $("#selectbox_" + this.instance.selectId).find(".selectbox-drop");
if (selectBoxEl.is(":animated")) {
return false;
}
this.instance.state = true;
switch (this.options.effect.type) {
case "fade":
selectBoxEl.fadeIn(this.options.effect.speed);
break;
case "slide":
selectBoxEl.slideDown(this.options.effect.speed);
break;
case "standard":
selectBoxEl.show();
break;
default:
selectBoxEl.slideDown(this.options.effect.speed);
break;
}
},
/*
* 关闭其他select
*/
_closeOthers: function () {
var self = this;
$('div[id^=selectbox_]').each(function (index) {
var el = $("div#" + $(this).attr("id"));
if (el.data("sourceElement")) {
var sourceEl = $.data(this, "sourceElement");
var selectModelInst = $.data(sourceEl, "plugin_" + pluginName);
if (self.instance.selectId != selectModelInst.instance.selectId) {
if (selectModelInst.instance.state) {
selectModelInst._closeSelectBox(true);
}
}
}
});
self._clickSelectOption(true);
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);
相关推荐
自己这些天写的一点小东西 用JQuery JS 创建一个模拟下拉框。有单选和多选的。自我感觉还是做的过得去,支持IE和FF其他浏览器没试过
模拟下拉框select,之前穿过一个,是纯div和li写的,现在这个的本质还是select,虽然没有经过实验,不过应该不用怕开发的时候取不到值这个问题,修改起来也很简单,只要有点css基础的都应该没有问题~
主要介绍了jQuery模拟下拉框选择对应菜单的内容,非常不错,具有参考借鉴价值,需要的朋友可以参考下
问题1:为什么要模拟下拉框? 1,浏览器自带的 下拉框样式不好看。 2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面。 OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框。 第一步:先搭建好...
NULL 博文链接:https://xiaoyi3317.iteye.com/blog/732072
js模拟下拉框 使用 只需在jquery后引入jquery.validation文件 [removed][removed] [removed][removed] 初始化 选择元素调用combobox方法传入配置项 $('select').combobox(options); 方法 调用方式 //选择元素调用...
自定义-js模仿下拉框效果 测过IE6/7/8 ff5.0 chremo 12.0. 是用li来模仿的,隐藏存在一个select方便form提交,其实既然只是获取选定后的数据,也可以用隐藏的input:text 代替 (如果出现什么异常可以给本人留言)
selectBox下拉框模拟,有多种样式,可以自己定义修改样式
NULL 博文链接:https://xiaoa7.iteye.com/blog/415438
js css 模拟html下拉框,很不容易找到的资源,效果很不错。
使用ul li 模拟下拉框, 省市区三级联动.带全国省市区数据,自定义修改样式,解决option的美观问题
div+css打造select下拉菜单,可自己修改相应样式!!!
ul li 模拟下拉选择,纯css+js 可以兼容ie浏览器适合搜索检索..有需要的自取!
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
自动模拟框,并且可以手动输入,可以模糊性查找
模拟QQ下拉框 模拟QQ下拉框 模拟QQ下拉框
类似百度下拉提示 模拟select下拉框 jquery插件 自动提示框 下拉框 本插件依赖于jquery的插件,类似于百度下拉提示框
NULL 博文链接:https://xinyao.iteye.com/blog/611919
增强型的FlexComboBox控件,一款VB下拉框控件,带图标,支持模糊查找,模拟下拉框提示等功能,英文版,附上了源代码,便于二次开发和学习研究。