zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    anaconda3 notebook for python数据分析-环境搭建
    MySQL之day4
    MySQL之day3
    MySQL之day2
    综合大实验（按需求完成）
    策略路由实验ACL配置
    双点双向重分布实验
    OSPF实验isis协议的设置命令
    OSPFS实验流量优化
    OSPF实验大串连
  • 原文地址：https://www.cnblogs.com/taoboy/p/5321501.html
Copyright © 2011-2022 走看看