jQuery进行组件开发完整实例


Posted in Javascript onDecember 15, 2015

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

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

Javascript 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
JavaScript组件开发完整示例
Dec 15 #Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 #Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 #Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 #Javascript
js简单网速测试方法完整实例
Dec 15 #Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 #Javascript
理解javascript闭包
Dec 15 #Javascript
You might like
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python中的tcp示例详解
2018/12/09 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
python中get和post有什么区别
2020/06/19 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
园林技术个人的自我评价
2014/01/08 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Python的property属性详细讲解
2022/04/11 Python