標籤：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="mx/scripts/lib/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>
使用jQuery進行組件開發（完整例子）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
