jQuery进行组件开发完整实例

前端技术 2023/08/10 JavaScript

本文实例讲述了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>

最终效果如图所示：

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/863

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案