jQuery進(jìn)行組件開(kāi)發(fā)完整實(shí)例

更新時(shí)間：2015年12月15日 15:10:29 作者：hongweigg

這篇文章主要介紹了jQuery進(jìn)行組件開(kāi)發(fā)的方法,以完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)自定義組件的相關(guān)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下

本文實(shí)例講述了jQuery進(jìn)行組件開(kāi)發(fā)的方法，分享給大家供大家參考，具體如下：

前面的《JavaScript組件開(kāi)發(fā)》分析了JavaScript進(jìn)行組件開(kāi)發(fā)的技巧，這里分析使用jQuery進(jìn)行組件開(kāi)發(fā)的方法。

使用jQuery進(jìn)行組件開(kāi)發(fā)和使用純JavaScript腳本（不使用框架）原理基本類似，特別是公共方法的組織是一樣的。

不同點(diǎn)是，jQuery使用了插件機(jī)制，通過(guò)$()直接進(jìn)行操作對(duì)象（DOM元素）綁定，然后對(duì)DOM元素或HTML代碼進(jìn)行綁定事件等的操作。

另一個(gè)不同點(diǎn)則是把jQuery當(dāng)做工具來(lái)使用，用來(lái)創(chuàng)建DOM對(duì)象，快速查找指定DOM對(duì)象等。

例子測(cè)試通過(guò)。

初級(jí)簡(jiǎn)單示例，只實(shí)現(xiàn)了增加頁(yè)和選擇頁(yè)功能。

<!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">
  <!--選項(xiàng)卡區(qū)域-->
  <ul>
   <li><a href="#tabs1">選項(xiàng)1</a></li>
   <li><a href="#tabs2">選項(xiàng)2</a></li>
   <li><a href="#tabs3">選項(xiàng)3</a></li>
  </ul>
  <!--面板區(qū)域-->
  <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;
    //使用鼠標(biāo)移動(dòng)觸發(fā)，亦可通過(guò)click方式觸發(fā)頁(yè)面切換
  var defualts = { switchingMode: "mousemove" };
    //融合配置項(xiàng)
  var opts = $.extend({}, defualts, options);
    //DOM容器對(duì)象，類似MX框架中的$e
  var $e = $(this);
  //選中的TAB頁(yè)索引
  var selectedIndex = 0;
  //TAB列表
  var $lis;
    //PAGE容器
    var aPages = [];
    //初始化方法
    me.init = function(){
      //給容器設(shè)置樣式類
    $e.addClass("tabsDiv");   
    $lis = $("ul li", $e);
    //設(shè)置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頁(yè)
     *
     */
    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!');
  }
    //自動(dòng)執(zhí)行初始化函數(shù)
    me.init();
    //返回函數(shù)對(duì)象
    return this;
 };
})(jQuery);
</script> 
<script type="text/javascript">
/*
 $(function () {
  $("#mytabs").tabs;
 });
*/
  var tab1 = $("#mytabs").tabs();
  tab1.showMsg();
</script> 
</body>
</html>

最終效果如圖所示：