一，开篇分析

Hi，大家好！大熊君又和大家见面了，还记得前两篇文章吗。主要讲述了以“jQuery的方式如何开发插件”，以及过程化设计与面向对象思想设计相结合的方式是

如何设计一个插件的，两种方式各有利弊取长补短，本系列文章是以学习为导向的，具体场景大家自己定夺使用方式。那么今天从这篇文章开始，我们就以实例

的方式带着大家由浅入深的开发属于自己的插件库。嘿嘿嘿，废话少说，进入正题。直接上实际效果图：

　　

　　大家看到了吧，这是一个下拉菜单插件，在我们日常开发中，系统提供的可能有时让我们觉得不是很美观并且功能有限，造成用户

　　的体验形式以及用户的可交互性不是很好，所以今天模拟一个嘿嘿嘿。下面就具体分析一下吧。

　　（二），实例分析

　　（1），首先确定这个插件做什么事。下面看一下插件的调用方式，以及配置参数说明。如下代码：

　　　　

 $(function(){

     var itemSelector = new ItemSelector($("#item-selector"),{

         currentText : "Please Choose Item" ,

         items : [

             {

                 text : "JavaScript" ,

                 value : "js" ,

                 disabled : "1"

             } ,

             {

                 text : "Css" ,

                 value : "css" ,

                 disabled : "0"

             } ,

             {

                 text : "Html" ,

                 value : "html" ,

                 disabled : "0"

             }

         ] ,

         mode : "0" , // 为"1"时支持checkbox多选模式

         change : function(value){

             // put your code here

         }

     }) ;

     itemSelector.init() ;

     setTimeout(function(){

         console.log(itemSelector.getCurrentValue()) ; // 测试 获取当先选中项

     },2000) ;

 }) ;

　　

“var itemSelector = new ItemSelector()”里面包含两个参数，第一个是dom节点对象，第二个是插件参数选项，"currentText"代表“ItemSelector“插件中，选中文本显示区域的文字描述。

”items“是一个数组，里面包含的是“ItemSelector”项目的属性，包括文字描述，选项值，”disabled“代表列表条目的可显度，0代表显示，1代表不可显示。

”change“代表选中时的操作回调函数，选项数据会以参数的形式进行回传。

　　（2），所涉的功能有哪些

　　　　可显的效果图如下：

　　　　

　　　　不可显的效果图如下：

　　　

　　二者的区别是：不可现状态数据不会回传，悬浮上去不会有任何效果。

　三），完整代码以供学习，本代码已经过测试，包括目录结构以及相关的文件。

　　（1），html

　　　　

 <body>

     <div class="dxj-ui-hd">

         大熊君{{bb}} - DXJ UI ------ ItemSelector

     </div>

     <div class="dxj-ui-bd">

         <div id="item-selector">

             <div class="title">

                 <div></div><span>↓</span>

             </div>

             <div class="content">

                 <div class="items">

                 </div>

             </div>

         </div>

     </div>

 </body>

（2），css

　　

 /* item-selector */

 #item-selector {

     margin : 0 auto;

     width : 220px ;

     overflow:hidden;

     border:2px solid #ccc;

 }

 #item-selector .title {

     border-bottom:1px solid #ccc;

     overflow:hidden;

 }

 #item-selector .title div {

     width:190px;

     border:0px ;

     color:#999;

     font-family: arial ;

     font-size: 14px;

     height:28px;

     line-height:28px;

     float:left;

     cursor:pointer;

 }

 #item-selector .title span {

     display:block;

     height:30px;

     line-height:30px;

     width:29px;

     float:left;

     text-align:center;

     border-left:1px solid #ccc;

     cursor:pointer;

 }

 #item-selector .content {

     width : 220px ;

     overflow:hidden;

 }

 #item-selector .content .items {

     overflow:hidden;

 }

 #item-selector .content .items div {

     padding-left:20px;

     width : 200px ;

     height:32px;

     line-height:32px;

     font-family: "微软雅黑" ;

     font-size: 14px;

     font-weight:bold;

     cursor:pointer;

 }

 .item-hover {

     background:#3385ff;

     color:#fff;

 }

　（3），"ItemSelector.js"

　　

function ItemSelector(elem,opts){

	this.elem = elem ;

	this.opts = opts ;

} ;

var ISProto = ItemSelector.prototype ;

ISProto.getElem = function(){

	return this.elem ;

} ;

ISProto.getOpts = function(){

	return this.opts ;

} ;

/* data manip*/

ISProto._setCurrent = function(current){

	this.getOpts()["current"] = current ;

} ;

ISProto.getCurrentValue = function(current){

	return this.getOpts()["current"] ;

} ;

/* data manip*/

ISProto.init = function(){

	var that = this ;

	this.getOpts()["current"] = null ; // 数据游标

	this._setItemValue(this.getOpts()["currentText"]) ;

	var itemsElem = that.getElem().find(".content .items") ;

	this.getElem().find(".title div").on("click",function(){

		itemsElem.toggle() ;

	}) ;

	this.getElem().find(".title span").on("click",function(){

		itemsElem.toggle() ;

	}) ;

	$.each(this.getOpts()["items"],function(i,item){

		item["id"] = (new Date().getTime()).toString() ;

		that._render(item) ;

	}) ;

} ;

ISProto._setItemValue = function(value){

	this.getElem().find(".title div").text(value)

} ;

ISProto._render = function(item){

	var that = this ;

	var itemElem = $("<div></div>")

	.text(item["text"])

	.attr("id",item["id"]) ;

	if("0" == item["disabled"]){

		itemElem.on("click",function(){

			var onChange = that.getOpts()["change"] ;

			that.getElem().find(".content .items").hide() ;

			that._setItemValue(item["text"]) ;

			that._setCurrent(item) ;

			onChange && onChange(item) ;

		})

		.mouseover(function(){

			$(this).addClass("item-hover") ;

		})

		.mouseout(function(){

			$(this).removeClass("item-hover") ;

		}) ;

	}

	else{

		itemElem.css("color","#ccc").on("click",function(){

			that.getElem().find(".content .items").hide() ;

			that._setItemValue(item["text"]) ;

		}) ;

	}

	itemElem.appendTo(this.getElem().find(".content .items")) ;

} ;

　　

（四），最后总结

　　（1），面向对象的思考方式合理分析功能需求。

　　（2），以类的方式来组织我们的插件逻辑。

　　（3），不断重构上面的实例，如何进行合理的重构那？不要设计过度，要游刃有余，推荐的方式是过程化设计与面向对象思想设计相结合。

　  （4），下篇文章中会扩展相关功能，比如“mode”这个属性，为"1"时支持checkbox多选模式，现在只是默认下拉模式。

　　     　　　　　　　　　　　　哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)　　　　　　　　　　　　　　         

大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector）的更多相关文章

  1. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  2. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ProcessBar）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  3. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  4. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了一个“Tab”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方 ...

  5. 大熊君JavaScript插件化开发------（第二季）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得昨天的那篇文章吗------这个系列的开篇(第一季).主要讲述了以“jQuery的方式如何开发插件”, 那么今天我们带着昨天的疑问来继续我们的插 ...

  6. 大熊君JavaScript插件化开发------（第一季）

    一,开篇分析 Hi,大家!大熊君又来了,今天这系列文章主要是说说如何开发基于“JavaScript”的插件式开发,我想很多人对”插件“这个词并不陌生, 有的人可能叫“组件”或“部件”,这不重要,关键是 ...

  7. JavaScript插件化开发

    大熊君JavaScript插件化开发 一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得昨天的那篇文章吗------这个系列的开篇(第一季).主要讲述了以“jQuery的方式如何开发插件”, 那 ...

  8. 又一开源项目爆火于GitHub，Android高级插件化强化实战

    一.插件化起源 插件化技术最初源于免安装运行 Apk的想法,这个免安装的 Apk 就可以理解为插件,而支持插件的 app 我们一般叫 宿主. 想必大家都知道,在 Android 系统中,应用是以 Ap ...

  9. TinyFrame升级之八：实现简易插件化开发

    本章主要讲解如何为框架新增插件化开发功能. 在.net 4.0中,我们可以在Application开始之前,通过PreApplicationStartMethod方法加载所需要的任何东西.那么今天我们 ...

随机推荐

  1. 乌版图 read-only file system

    今天在启动虚拟机的时候,运行命令svn up的时候,提示lock,并且read-only file system,这个....我是小白啊,怎么办?前辈在专心写代码,不好打扰,果断找度娘啊 于是乎,折腾 ...

  2. 基于Zabbix IPMI监控服务器硬件状况

    基于Zabbix IPMI监控服务器硬件状况 zabbix ipmi 公司有多个分部,且机房没有专业值班,机房等级不够.在这种情况下,又想实时监控机房环境,于是使用IPMI方式来达到目的.由于之前已经 ...

  3. JS入门学习，写一个简单的图片库

    <!-- 新手刚开始学JS,每天坚持写点东西 坚持下去,希望能有所进步 .  加油~~ --> <!DOCTYPE html>                         ...

  4. 【2016-11-11】【坚持学习】【Day24】【WPF 自定义控件 附加属性 自定义事件】

    UserControl ,自定义控件. 这里刚刚想到一个问题.什么时候应该用usercontrol 定义一个控件.什么时候应该重写控件的template和样式,实现新效果. 引用一下人家的话:http ...

  5. AR For Unity3D之HiAR分析

     前言 关于AR和Unity的基础知识,请自行前往各自的文档中心进行科普. 本文以国产的HiAR SDK为例,日后将尝试高通的vuforia SDK  我的环境 基于Hi AR1.2.0 ( hiar ...

  6. 【腾讯GAD暑期训练营游戏程序班】游戏场景管理作业说明文档

    场景管理作业说明文档                              用了八叉树的算法,测出三层时最快,区域范围内物体数量为21块,控制台打印出的结果如图所示: 场景物体:游戏中,所有具有空 ...

  7. 利用百度API Store接口进行火车票查询

    火车票查询 项目源码下载链接: Github:https://github.com/VincentWYJ/TrainTicketQuery 博客文件:http://files.cnblogs.com/ ...

  8. 【JavaScript】javascript 方法 test()

    个人理解:var b = x.test(y); y是否存在模式x中,返回true或false:x可以是正则,字符串,

  9. 谈谈duilib

    据我所知,duilib已经不再维护了,q群也不再对外开放了. 尽管不再更新,但duilib的学习价值还是很好的.当有一定基础后再扩展duilib的功能,或根据duilib学习到的知识去着手写自己的界面 ...

  10. 软件工程（FZU2015）赛季得分榜，第七回合

    目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...