jQuery组件开发

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

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

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

例子测试通过。

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

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title> Design JS component with jQuery </title>  
  5. <script src="mx/scripts/lib/jquery.js" type="text/javascript"></script>  
  6. <link href="tabs.css" rel="stylesheet" type="text/css" />  
  7.   
  8.  <style>  
  9.         
  10. .tabsDiv{ 500px;height: 350px;margin-top: 0px;margin-left: 0px;}  
  11. .tabsDiv ul{  
  12.      500px;height: 20px;  
  13.     list-style: none;  
  14.       
  15.     margin-bottom: 0px;margin: 0px;  
  16.     padding: 0px;  
  17.     border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-top:solid 1px #ffffff;border-bottom:solid 1px #e0e0e0;  
  18. }  
  19.   
  20. .tabsDiv div{  
  21.      500px;height: 330px;  
  22.     background-color: #ffffff;   
  23.     border:solid 1px #e0e0e0;  
  24. }  
  25.   
  26.   
  27. .tabsSeletedLi{  
  28.      100px;height: 20px;  
  29.     background-color: white;  
  30.     float: left;  
  31.     text-align: center;  
  32.     border-left:solid 1px #e0e0e0;border-right:solid 1px #e0e0e0;border-top:solid 1px #e0e0e0;border-bottom:solid 1px #ffffff;  
  33. }  
  34.   
  35. .tabsSeletedLi a{  
  36.      100px;  
  37.     height: 20px;  
  38.     color:#000000;  
  39.     text-decoration:none;  
  40. }  
  41.   
  42. .tabsUnSeletedLi{  
  43.      100px;height: 20px;  
  44.     background-color: #e0e0e0;   
  45.     float: left;  
  46.     text-align: center;  
  47.     border:solid 1px #e0e0e0;  
  48. }  
  49.   
  50. .tabsUnSeletedLi a{  
  51.      100px;height: 20px;  
  52.     color: #ffffff;  
  53.     text-decoration:none;  
  54. }  
  55.    
  56.  </style>     
  57. </head>  
  58.   
  59. <body>  
  60. <!--  
  61.     <div style="400px;height:100px;border:solid 1px #e0e0e0;">  
  62.       
  63.     </div>  
  64. -->  
  65.   
  66.     <!--tabs示例-->  
  67.     <div id="mytabs">  
  68.         <!--选项卡区域-->  
  69.         <ul>  
  70.             <li><a href="#tabs1">选项1</a></li>  
  71.             <li><a href="#tabs2">选项2</a></li>  
  72.             <li><a href="#tabs3">选项3</a></li>  
  73.         </ul>  
  74.         <!--面板区域-->  
  75.         <div id="tabs1">11111</div>  
  76.         <div id="tabs2">22222</div>  
  77.         <div id="tabs3">33333</div>  
  78.     </div>  
  79.       
  80. <script lang="javascript">  
  81. (function ($) {  
  82.     $.fn.tabs = function (options) {  
  83.         var me = this;  
  84.       
  85.         //使用鼠标移动触发，亦可通过click方式触发页面切换  
  86.         var defualts = { switchingMode: "mousemove" };  
  87.   
  88.         //融合配置项  
  89.         var opts = $.extend({}, defualts, options);  
  90.   
  91.         //DOM容器对象，类似MX框架中的$e  
  92.         var $e = $(this);  
  93.           
  94.         //选中的TAB页索引  
  95.         var selectedIndex = 0;  
  96.           
  97.         //TAB列表  
  98.         var $lis;  
  99.   
  100.         //PAGE容器  
  101.         var aPages = [];  
  102.   
  103.   
  104.         //初始化方法  
  105.         me.init = function(){  
  106.           
  107.             //给容器设置样式类  
  108.             $e.addClass("tabsDiv");    
  109.               
  110.             $lis = $("ul li", $e);  
  111.               
  112.             //设置TAB头的选中和非选中样式  
  113.             $lis.each(function(i, dom){  
  114.                 if(i==0){  
  115.                     $(this).addClass("tabsSeletedLi")  
  116.                 }else{  
  117.                     $(this).addClass("tabsUnSeletedLi");  
  118.                 }  
  119.               
  120.             });  
  121.               
  122.             //$("ul li:first", $e).addClass("tabsSeletedLi");  
  123.             //$("ul li", $e).not(":first").addClass("tabsUnSeletedLi");  
  124.             //$("div", $e).not(":first").hide();  
  125.               
  126.             //TAB pages绑定  
  127.             var $pages = $('div', $e);  
  128.             $pages.each(function(i, dom){  
  129.                 if(i == 0){  
  130.                     $(this).show();  
  131.                 }else{  
  132.                     $(this).hide();  
  133.                 }  
  134.                   
  135.                 aPages.push($(this));         
  136.             });  
  137.               
  138.               
  139.               
  140.             //绑定事件  
  141.             $lis.bind(opts.switchingMode, function() {  
  142.                 var idx = $lis.index($(this))  
  143.                 me.selectPage(idx);  
  144.             });       
  145.           
  146.         }  
  147.           
  148.   
  149.         /**  
  150.          *  选中TAB页  
  151.          *  
  152.          */  
  153.         me.selectPage = function(idx){  
  154.             if (selectedIndex != idx) {                   
  155.                 $lis.eq(selectedIndex).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");  
  156.                 $lis.eq(idx).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");  
  157.                   
  158.                 aPages[selectedIndex].hide();  
  159.                 aPages[idx].show();  
  160.                 selectedIndex = idx;  
  161.             };  
  162.         }  
  163.           
  164.           
  165.         me.showMsg = function(){  
  166.             alert('WAHAHA!');  
  167.         }  
  168.           
  169.         //自动执行初始化函数  
  170.         me.init();  
  171.           
  172.         //返回函数对象  
  173.         return this;  
  174.     };  
  175. })(jQuery);  
  176.   
  177. </script>     
  178.   
  179. <script type="text/javascript">  
  180. /*  
  181.     $(function () {  
  182.         $("#mytabs").tabs;  
  183.     });  
  184. */  
  185.   
  186.   
  187.     var tab1 =  $("#mytabs").tabs();  
  188.     tab1.showMsg();  
  189. </script>   
  190. </body>  
  191. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/taoboy/p/5321501.html