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 相关文章推荐
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
cookie的secure属性详解
Apr 08 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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 xml-rpc远程调用
2008/12/19 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python对象与json相互转换的方法
2019/05/07 Python
python字典一键多值实例代码分享
2019/06/14 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
小学教师事迹材料
2014/01/13 职场文书
师德师风承诺书
2014/05/23 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书