当前位置:主页 > jquery教程 > jQuery进行组件开发完整实例

jQuery进行组件开发代码实例

发布:2020-05-25 14:18:36 67


给网友们整理相关的编程文章,网友温阳炎根据主题投稿了本篇教程内容,涉及到jQuery、组件开发、jQuery组件、jQuery进行组件开发完整实例相关内容,已被553网友关注,涉猎到的知识点内容可以在下方电子书获得。

jQuery进行组件开发完整实例

本文实例讲述了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 >
  </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进行组件开发完整实例

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


参考资料

相关文章

  • jquery html动态生成select标签出问题该如何解决

    发布:2020-02-05

    用jquery,json从后台获取一个列表,然后用一个动态生成的select标签显示出来,结果出现错误,下面为大家分享个不错的解决方法,喜欢的朋友可以参考下


  • jquery获取id值的实例方法

    发布:2019-12-10

    ID是html页面中一些元素都可以有个本页面唯一的id包括如,div,input,iframe等等都是可以的,下面我来给大家介绍利用jquery 获取id值方法,有需要了解的朋友可参考


  • jQuery根据类型自动显示和隐藏表单效果示例

    发布:2020-01-14

    这篇文章主要给大家分享了jQuery实现根据类型自动显示和隐藏表单的代码,非常的简单实用,仅仅10行代码,推荐给大家,希望能给大家一些提示。


  • jQuery选择同类元素的第N个子元素的实现方法

    发布:2020-02-25

    下面小编就为大家带来一篇JQ选择器_选择同类元素的第N个子元素的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 总结JQuery中extend的使用方法

    发布:2020-03-22

    这篇文章主要介绍了JQuery中extend的用法,实例分析了extend的功能、定义及相关使用技巧,需要的朋友可以参考下


  • 解析jquery中使用$(#form).submit()重写提交表单无效原因

    发布:2020-01-26

    jqeury的validationEngine做ajax校验,当表单中的最后一个字段需要做ajax验证,在字段输入完毕后点击回车提交表单时不起作用,接下来为大家介绍下解决方法感兴趣的各位可以参考下哈


网友讨论