jquery 插件开发------简单选择插件模版-优快云博客

效果图：

直接上代码

/* 
 * simpleSelect v 1.0 
 * Copyright (c) 2015 魏东
 * Date: 2015-07-24 
 * 一个选择菜单插件
 */ 
//参数:快速加载绑定到window对象上(;作用是防止其他地方漏写;异常)
;(function($, window, document, undefined) {
	//定义选择盒子
	var methods = {
		//初始化方法
		init : function(options) {
			$(this).css({
				width:options.width
			});
			var selectMenu = $("<ul class='selectItems'></ul>").appendTo($(this));
			for(var i=0;i<options.menu.length;i++){
				$("<li class='selectItem'>"+options.menu[i]+"</li>").appendTo(selectMenu);
			}
			return this.each(function(){
				methods.addClickEvent(this);
			});
		},
		//添加点击事件
		addClickEvent:function(ele){
			var selectText = $(ele).find(".selectText");
			var selectItems = $(ele).find(".selectItems");
			$(ele).find("span").bind("click",function(){
				if(selectItems.is(":hidden")) 
				{ 
					selectItems.show();
				}else{
					selectItems.hide();
				}
			});
			$(ele).find(".selectItem").bind("click",function(){
				selectText.find("a").text($(this).text());
				selectItems.hide();
			});
			//点击窗体外时隐藏下拉框
			$(document).bind("click",function(e){ 
				var target = $(e.target); 
				if(target.closest(".selectItem").length == 0&&target.closest(".selectText").length == 0){ 
					selectItems.hide();
				}
			} )
		},
		getSelectVal:function(){
			var v = $(this).find(".selectText a").text();
			return $.trim(v);
		}
	};
	//定义插件(参数:调用插件方法,详细参数)
	$.fn.simpleSelect = function(method,options) {
		//判断dom元素是否存在
		if(this.size()!=1){
			alert(this.selector.substring(1)+"  不存在");
			return;
		}
		//设置默认参数
		var defaults={
                width:'50px',
                menu:[]
		};
		//合并参数(后面的会覆盖前面的);{}的作用是避免defaults被覆盖
		var settings = $.extend( {}, defaults, options );
		// 方法调用逻辑
		//判断是否传入要执行的方法
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(
					arguments, 1));
		} else if (typeof methods === 'object' || !methods) {//如果没定义方法默认执行init方法
			return methods.init.apply(this, arguments);
		} else {//异常信息
			$.error('Method ' + methods + ' does not exist on jQuery.simpleSelect');
		}
	}
})(jQuery, window, document);

css

@CHARSET "UTF-8";
.selectBox{
	color:#ffffff;
	font-family:'Microsoft Yahei' !important;
	font-size: 13px;
}
.selectItems{
	margin:0;
	padding:0;	
	background:#2B7DBA;
	overflow: hidden;
	display:none;
	border: 1px solid #2B7DBA;
}
.selectText{
	display:inline-block;
	text-align:center;
	background:#2B7DBA;
	width:100%;
}
.selectText:hover{
	cursor:pointer;
	background:#549FDA;
}
.selectItem{
	list-style: none;
	border-bottom:1px solid #2072AE;
	margin:0;
	width:100%;
	text-align: center;
}
.selectItem:hover{
	cursor:pointer;
	background:#549FDA;
}

html

<div id="findBoxLogo" class="selectBox">
	<span class="selectText"><a>搜楼名</a>  <i class="fa fa-caret-down"></i></span>
</div>

调用js

simpleSelect =$("#findBoxLogo").simpleSelect("init",{
	width:70,
        menu:["搜楼名","搜房间"]
});
console.log(simpleSelect.simpleSelect("getSelectVal"));