jQuery进行组件开发完整实例

2019-11-20 11:00:42

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery进行组件开发的方法，分享给大家供大家参考，具体如下：

前面的《JavaScript组件开发》分析了JavaScript进行组件开发的技巧，这里分析使用jQuery进行组件开发的方法。

使用jQuery进行组件开发和使用纯JavaScript脚本（不使用框架）原理基本类似，特别是公共方法的组织是一样的。

不同点是，jQuery使用了插件机制，通过$()直接进行操作对象（DOM元素）绑定，然后对DOM元素或HTML代码进行绑定事件等的操作。

另一个不同点则是把jQuery当做工具来使用，用来创建DOM对象，快速查找指定DOM对象等。

例子测试通过。

初级简单示例，只实现了增加页和选择页功能。

<!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><title> Design JS component with jQuery </title><script src="jquery.js" type="text/javascript"></script><link href="tabs.css" rel="stylesheet" type="text/css" /> <style>.tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;}.tabsDiv ul{  width: 500px;height: 20px;  list-style: none;  margin-bottom: 0px;margin: 0px;  padding: 0px;  border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-top:solid 1px #ffffff;border-bottom:solid 1px #e0e0e0;}.tabsDiv div{  width: 500px;height: 330px;  background-color: #ffffff;   border:solid 1px #e0e0e0;}.tabsSeletedLi{  width: 100px;height: 20px;  background-color: white;  float: left;  text-align: center;  border-left:solid 1px #e0e0e0;border-right:solid 1px #e0e0e0;border-top:solid 1px #e0e0e0;border-bottom:solid 1px #ffffff;}.tabsSeletedLi a{  width: 100px;  height: 20px;  color:#000000;  text-decoration:none;}.tabsUnSeletedLi{  width: 100px;height: 20px;  background-color: #e0e0e0;   float: left;  text-align: center;  border:solid 1px #e0e0e0;}.tabsUnSeletedLi a{  width: 100px;height: 20px;  color: #ffffff;  text-decoration:none;} </style> </head><body><!--  <div style="width:400px;height:100px;border:solid 1px #e0e0e0;">  </div>--> <!--tabs示例--> <div id="mytabs">  <!--选项卡区域-->  <ul>   <li><a href="#tabs1">选项1</a></li>   <li><a href="#tabs2">选项2</a></li>   <li><a href="#tabs3">选项3</a></li>  </ul>  <!--面板区域-->  <div id="tabs1">11111</div>  <div id="tabs2">22222</div>  <div id="tabs3">33333</div> </div><script lang="javascript">(function ($) { $.fn.tabs = function (options) {   var me = this;    //使用鼠标移动触发，亦可通过click方式触发页面切换  var defualts = { switchingMode: "mousemove" };    //融合配置项  var opts = $.extend({}, defualts, options);    //DOM容器对象，类似MX框架中的$e  var $e = $(this);  //选中的TAB页索引  var selectedIndex = 0;  //TAB列表  var $lis;    //PAGE容器    var aPages = [];    //初始化方法    me.init = function(){      //给容器设置样式类    $e.addClass("tabsDiv");       $lis = $("ul li", $e);    //设置TAB头的选中和非选中样式    $lis.each(function(i, dom){      if(i==0){        $(this).addClass("tabsSeletedLi")      }else{        $(this).addClass("tabsUnSeletedLi");      }    });      //$("ul li:first", $e).addClass("tabsSeletedLi");    //$("ul li", $e).not(":first").addClass("tabsUnSeletedLi");      //$("div", $e).not(":first").hide();      //TAB pages绑定      var $pages = $('div', $e);      $pages.each(function(i, dom){        if(i == 0){          $(this).show();        }else{          $(this).hide();        }        aPages.push($(this));          });      //绑定事件    $lis.bind(opts.switchingMode, function() {      var idx = $lis.index($(this))     me.selectPage(idx);    });        }    /**     * 选中TAB页     *     */    me.selectPage = function(idx){      if (selectedIndex != idx) {          $lis.eq(selectedIndex).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");    $lis.eq(idx).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");    aPages[selectedIndex].hide();     aPages[idx].show();    selectedIndex = idx;   };    }  me.showMsg = function(){    alert('WAHAHA!');  }    //自动执行初始化函数    me.init();    //返回函数对象    return this; };})(jQuery);</script> <script type="text/javascript">/* $(function () {  $("#mytabs").tabs; });*/  var tab1 = $("#mytabs").tabs();  tab1.showMsg();</script> </body></html>

最终效果如图所示：