jquery鼠标点击自定义下拉框插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标点击自定义下拉框插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标点击自定义下拉框插件</title>
<link href="dropdownlist.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/dropdownlist.js"></script>
<script>
$(function(){
    // 通过JSON数据创建自定义下拉框
    var ddl_album = DropDownList.create({
        container :$('#demo1'),
        attrs : {
            id : 'ddl_album',   // 给dropdownlist一个id
            column :5,         // 展示4行
            width:200,         // 宽度为150px
            height: 30          // 每个option选项的高度
        },	
        options : [
            ['默认相册','001'],
            ['我的收藏','002'],
            ['大学同学','003',true],
            ['亲朋好友','004'],
            ['明星们','005'],
            ['狗仔队','006'],
        ]
		
    });
	ddl_album.change(function(){
		alert(ddl_album.val());
	});
	

    // 通过原生select控件创建自定义下拉框
    var ddl_picture = DropDownList.create({
        select:$('#demo2'),
        attrs:{
            column :5,
            width :200,
			
        }
    });
	ddl_picture.change(function(){
		alert(ddl_picture.val());
	});
});    
</script>
</head>
<body>
<div class="sucaijiayuan">
<p>通过JSON数据创建自定义下拉框<span id="demo1"></span></p>
<p>通过select标签创建自定义下拉框<span><select id="demo2"><option value="1">义下拉框</option><option value="2">JS代码</option><option value="3">PSD素材</option><option value="4">矢量素材</option><option value="5">图片素材</option></select></span></p>
</div>
</body>
</html>

JS代码(dropdownlist.js):

/** * 自定义下拉框 * @homepage http://www.sucaijiayuan.com*/
var DropDownList = (function($,undefined){
	var staticVar ={
	themeIdPrefix:'dropdownThemeFor',themeId:'dropdownThemeFor#{
	id}
',listId:'dropdownOptionsFor#{
	id}
',classDropdownlsit:'mod-dropdownlist',classFormitem:'dropdown-select',classInput:'dropdown-input',classIcon:'dropdown-icon',classOptions:'dropdown-options',classFocusLi:'dropdown-options-focus',classList:'dropdown-list',classCustomScrollbar:'custom-scroll-bar',classCustomBox:'dropdown-custombox',attrOptionValue:'data-value',attrStylesCols:'data-cols',attrStylesWidth:'data-width'}
;
	var ids = [];
	/** * 创建随即字符串，作为Dom节点的ID * @return{
	String}
*/
 var randomID = function(){
	while (true){
	var id = ((new Date()).getTime() + 'Select' + Math.floor(Math.random() * 100000)).toString();
	if (!ids[id]){
	ids[id] = true;
	return id;
}
}
}
;
	/** * 仿tangram 中的 T.string.format 方法 * @param str 目标字符串 * @param opts * @return{
	*}
*/
 var format = function (str,opts){
	source = str;
	var data = Array.prototype.slice.call(arguments,1),toString = Object.prototype.toString;
	if(data.length){
	data = data.length == 1 ? (opts !== null && (/\[object Array\]|\[object Object\]/.test(toString.call(opts))) ? opts:data):data;
	return source.replace(/#\{
	(.+?)\}
/g,function (match,key){
	var replacer = data[key];
	// chrome 下 typeof /a/ == 'function' if('[object Function]' == toString.call(replacer)){
	replacer = replacer(key);
}
return ('undefined' == typeof replacer ? '':replacer);
}
);
}
return source;
}
;
	/** * DropDownList Class * @param options * @constructor */
 var DDLClass = function(){
}
;
	DDLClass.prototype ={
	constructor:DDLClass,_addListItem:function(opt){
	var self = this;
	var new_option = $('<a></a>');
	new_option.attr(staticVar.attrOptionValue,opt.value);
	new_option.html(opt.text);
	new_option.attr('href','javascript:;
	');
	var li = $('<li></li>');
	new_option.click(function(event){
	var value = $(this).attr(staticVar.attrOptionValue);
	self.select.val(value);
	self.select.trigger('change');
	self.hide().listEle.trigger('hide-list');
}
);
	li.append(new_option);
	self.listUL.append(li);
	return self;
}
,/** * 创建list * @private */
 _list:function(){
	var self = this;
	this.listId = format(staticVar.listId,{
	id:this.select.attr('id') || randomID()}
);
	this.listEle = $('<div></div>').attr('id',this.listId).addClass(staticVar.classList).addClass(staticVar.classCustomScrollbar).hide();
	this.listUL = $('<ul></ul>').appendTo(this.listEle);
	this.listBox = $('<div></div>').appendTo(this.listEle).addClass(staticVar.classCustomBox);
	// 在列表底部增加一个额外的节点 if(this.configs.box){
	this.listBox.append(this.configs.box);
}
var clickFunc = function(evt){
	if(!$.contains(self.listEle[0],evt.target)){
	self.hide();
}
}
;
	this.listEle.bind('show-list',function(){
	$(document).bind('click',clickFunc);
}
);
	this.listEle.bind('hide-list',function(){
	$(document).unbind('click',clickFunc);
}
);
	var theOptions = this.select[0].options;
	$.each(theOptions,function(i,opt){
	self._addListItem(opt);
}
);
	this.listUL.addClass(staticVar.classOptions);
	var resize = function(){
	$(window).unbind('resize',resize);
	setTimeout(function(){
	var position = self.element.position();
	self.listEle.css({
	'left':position.left - 1,'top':position.top + self.element[0].offsetHeight}
);
	$(window).resize(resize);
}
,10);
}
$(window).resize(resize);
	self.listEle.appendTo(self.dropdownEle);
}
,/** * 通过原生的select控件，创建自定义的下拉列表 * @return{
	*|jQuery}
*/
 _createFromSelect:function(){
	this.select = $(this.configs.select);
	var themeId = format(staticVar.themeId,{
	id:this.select.attr('id')}
),ddl = $('<a></a>').attr({
	id:themeId,'href':'javascript:;
	','class':staticVar.classFormitem}
),input = $('<span></span>').attr({
	'class':staticVar.classInput}
),icon = $('<span></span>').attr({
	'class':staticVar.classIcon}
),elementClass = this.select.attr('class');
	if (this.select[0].selectedIndex>=0){
	input.html('<nobr>' + this.select[0].options[this.select[0].selectedIndex].text + '</nobr>');
}
icon.html('&#160');
	ddl.append(input).append(icon);
	if (elementClass){
	$.each(elementClass.split(/\s+/),function(i,cls){
	ddl.addClass(cls);
}
)}
// 把原来的控件隐藏，插入新控件 this.select.hide();
	this.dropdownEle = $('<div></div>').append(ddl).insertAfter(this.select) .addClass(staticVar.classDropdownlsit).addClass(this.configs.className || '');
	// 自定义宽度 var customizedWidth = this.select.attr(staticVar.attrStylesWidth) || '';
	if (customizedWidth){
	var pdl = parseInt(input.css('padding-left'),10) || 0,pdr = parseInt(input.css('padding-right'),10) || 0;
	input.css('width',parseInt(customizedWidth,10) - pdl - pdr - icon[0].offsetWidth - 3);
}
// 绑定事件 input.parent().click(function(event){
	if($(this).attr('data-showwing') == 1){
	self.hide();
}
else{
	self.show();
}
event.preventDefault();
	event.stopPropagation();
}
);
	var self = this;
	this.select.change(function(event){
	if (self.select[0].selectedIndex>=0){
	input.html('<nobr>' + self.select[0].options[self.select[0].selectedIndex].text + '</nobr>');
}
}
);
	this.input = input;
	this.icon = icon;
	this.element = input.parent();
	this._list();
	return ddl;
}
,_init:function(configs){
	this.configs = $.extend({
	container:'body'}
,configs ||{
}
);
	var sel,attrs ={
}
;
	attrs.id = this.configs.attrs.id || randomID();
	attrs['data-cols'] = this.configs.attrs.column || 8;
	if(this.configs.attrs.width){
	attrs['data-width'] = this.configs.attrs.width;
}
// select控件通过js创建 if(this.configs.options){
	if(this.configs.attrs.id){
	attrs.id = this.configs.attrs.id;
}
attrs['data-cols'] = this.configs.attrs.column || 8;
	if(this.configs.attrs.width){
	attrs['data-width'] = this.configs.attrs.width;
}
sel = $('<select></select>').attr(attrs).hide().appendTo($(this.configs.container));
	var selectedIndex,option;
	$.each(this.configs.options,function(i,opt){
	option = new Option(opt[0] || opt,opt[1] || opt[0] || opt);
	if (opt[2]){
	option.selected = true;
	option.setAttribute('selected','selected');
	selectedIndex = i;
}
sel[0].options.add(option);
}
);
	this.configs.select = sel;
}
else{
	sel = this.configs.select.attr(attrs).hide();
	if (!sel.is('select')) return;
}
$('#'+format(staticVar.themeId,{
	id:sel[0].id}
)).remove();
	if (sel[0].options.length) this._createFromSelect(sel).show();
	return this;
}
,/** * 获取或设置 下拉框的值 * @param{
	String}
value 需要给下拉框设定的内容 * @return{
	String/Object}
value有值时返回DropDownList实例本身，否则返回下拉框的真实值 */
 val:function(value){
	if((value || '').length){
	this.select.val(value).trigger('change');
	return this;
}
else{
	return this.select.val();
}
}
,change:function(){
	if(arguments.length){
	return this.select.change.apply(this.select,arguments);
}
else{
	this.select.trigger('change');
	return this;
}
}
,show:function(){
	var self = this;
	self.element.attr('data-showwing',1);
	var optionHeight = parseInt(self.configs.attrs.height,10) || 30;
	$('li a',self.listUL).css({
	'height':optionHeight + 'px','line-height':optionHeight + 'px'}
);
	// 自定义高度 var customizedCols = self.select.attr(staticVar.attrStylesCols) || '10';
	var lis = $('li',self.listUL);
	var listHeight = optionHeight * Math.min((parseInt(customizedCols,10)),lis.length);
	var parent = $('#' + format(staticVar.themeId,{
	id:self.select.attr('id')}
));
	var position = parent.position();
	var tmpStyles ={
	'position':'absolute','left':position.left,'top':position.top + parent[0].offsetHeight,'width':parent[0].offsetWidth - (parseInt(parent.css('border-left-width'),10) || 0) - (parseInt(parent.css('border-right-width'),10) || 0),'z-index':(parseInt(self.select.parent().css('z-index'),10) || 0) + 10}
;
	self.listUL.css({
	'height':listHeight}
);
	self.listEle.css(tmpStyles).show().trigger('show-list');
	var focusOption;
	$.each(lis,function(i,li){
	if (self.select.val()==$('a',li).attr(staticVar.attrOptionValue)){
	focusOption = li;
	return false;
}
}
);
	if (focusOption){
	setTimeout(function(){
	$(focusOption).siblings('li').removeClass(staticVar.classFocusLi).end().addClass(staticVar.classFocusLi);
	focusOption.parentNode.scrollTop = focusOption.offsetTop;
}
,10);
}
return self;
}
,hide:function(){
	this.element.attr('data-showwing',0);
	this.listEle.hide().trigger('hide-list');
	return this;
}
,add:function(option){
	var opt = new Option(option.text,option.value);
	this.select[0].options.add(opt);
	this._addListItem(opt);
	return this;
}
}
;
	/** * 根据配置创建自定义下拉框 * * @param{
	Object}
configs 创建下拉框所需要的配置项 * * @p-config{
	jQ-Elm}
select 原生select控件的jQuery对象，通过原生select创建时候必选 * * @p-config{
	jQ-Elm}
container 自定义下拉框的父容器，通过JSON数据创建时候必选 * * @p-config{
	String}
className 自定义下拉框组件的class，所有和下拉框相关的节点，都受这个className控制 * * @p-config{
	Object}
attrs 自定义下拉框的相关属性，参数可选 * @p-c-config{
	String}
id 给自定义下拉框指定一个id，之后可以通过id进行DOM操作 * @p-c-config{
	String}
column 自定义下拉框中的option显示行数，默认显示10行 * @p-c-config{
	Integer}
width 自定义下拉框的宽度，字数超过会自动截断处理，默认：自适应 * @p-c-config{
	Integer}
height 自定义下拉框的高度，默认：30px * * @p-config{
	Array}
options 自定义下拉框需要显示的选项数据，对应select中的option * @p-c-item{
	Array}
格式：[text,value,selected] * * @return{
	DropDownList}
返回一个DropDownList实例 */
 var _create = function(configs){
	return (new DDLClass())._init(configs);
}
;
	return{
	version:'1.3',create:_create}
;
}
)(jQuery);

CSS代码(dropdownlist.css):

/*reset css*/
*{margin:0;padding:0;list-style:none;border:none;}
a{text-decoration:none;}
.sucaijiayuan{width:500px;margin:100px auto;font:normal 14px/32px 'microsoft yahei';height:32px;}
.sucaijiayuan p{margin-bottom:50px;}
.sucaijiayuan p span{float:left;padding-right:10px;}
/*通用组开始 */
.mod-dropdownlist{display:inline-block;}
.mod-dropdownlist .dropdown-select{background:transparent url(img/bg_dropdown.png) left top repeat-x;border:1px solid #d9d9d9;color:#666;cursor:default;display:inline-block;*display:inline;height:30px;line-height:30px;overflow:hidden;*zoom:1;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;}
.mod-dropdownlist .dropdown-select:visited,.mod-dropdownlist .dropdown-select:hover,.mod-dropdownlist .dropdown-select:active{border:1px solid #c7c7c7;color:#666;background:transparent;}
.mod-dropdownlist .dropdown-select .dropdown-input{border-right:1px solid #ededed;padding:0 10px;zoom:1;overflow:hidden;font-size:14px;line-height:30px;float:left;height:30px;}
.mod-dropdownlist .dropdown-select .dropdown-icon{background:transparent url(img/icon_dropdown.gif) center center no-repeat;border-left:1px solid #fff;width:40px;padding:0 0;zoom:1;font-size:14px;line-height:30px;float:left;height:30px;}
.mod-dropdownlist .dropdown-select:hover .dropdown-icon{background:transparent url(img/icon_dropdown_hover.gif) center center no-repeat;}
.mod-dropdownlist .dropdown-list{background:#fff;border-left:1px solid #d9d9d9;border-right:1px solid #d9d9d9;display:block;overflow:hidden;padding:0;}
.mod-dropdownlist .dropdown-options{background:#fff;display:block;overflow:hidden;overflow-y:auto;padding:0;margin:0;}
.mod-dropdownlist .dropdown-options li{margin:0;padding:0;}
.mod-dropdownlist .dropdown-options li a{color:#666;cursor:default;display:block;padding:0 10px;white-space:nowrap;width:120%;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;}
.mod-dropdownlist .dropdown-options li a:hover{background-color:#eee;color:#666;}
.mod-dropdownlist .dropdown-options li.dropdown-options-focus a,.mod-dropdownlist .dropdown-options li.dropdown-options-focus a:hover{background-color:#E64E3F;color:#fff;}
.mod-dropdownlist .dropdown-list .dropdown-custombox{border-top:1px solid #ccc;}
/*本代码由素材家园收集并编辑整理;尊重他人劳动成果;转载请保留素材家园链接 - www.sucaijiayuan.com*/

附件:下载该文件资源,减少时间成本(增值服务)