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 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
根德YB400的电路分析
2021/03/02 无线电
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
javascript一点特殊用法
2008/05/28 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
vue实现放大镜效果
2020/09/17 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Numpy中的mask的使用
2018/07/21 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
为什么使用接口?
2014/08/13 面试题
幼儿园毕业典礼主持词
2014/03/21 职场文书
员工考核评语大全
2014/04/26 职场文书
调查研究项目计划书
2014/04/29 职场文书
求职信格式要求
2014/05/23 职场文书
创建文明城市倡议书
2015/04/28 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript