澳门威利斯人_威利斯人娱乐「手机版」

来自 办公软件 2019-08-31 12:33 的文章
当前位置: 澳门威利斯人 > 办公软件 > 正文

jQuery插件扩展操作入门示例,jQuery插件kinMaxShow扩

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JQquery扩展插件测试</title>
  <script type = "text/javascript" src="jquery-1.7.2.min.js"> </script>
  <style type = "text/css">
   .a{
    background:#ccc;
   }
   .b{
    background:#555;
   }
  </style>
  <script type = "text/javascript">
  //1.对象级别的扩展 jQuery.fn是jQuery.prototype的别名
  // 注意:在对象方法内,关键字this引用的是一个jQuery对象,但在每次调用的.each()方法中,this引用的是一个dom元素(所以each内部要用jQuery包装this,而在return后面,直接调用jQuery对方法.each())
  (function($){
   $.fn.toggleClass = function(options){
    return this.each(function(){
     var opts = $.extend({},$.fn.toggleClass.defaults,options);
     var $element = $(this);
     if($element.hasClass(opts.class1)){
      $element.removeClass(opts.class1).addClass(opts.class2);
     }else if($element.hasClass(opts.class2)){
      $element.removeClass(opts.class2).addClass(opts.class1);
     }
    })
   }
   $.fn.toggleClass.defaults = {
    class1:"",
    class2:""
   }
   $.fn.setBorder = function(){
    return this.each(function(){
     $(this).css("border","1px solid red");
    })
   }
  })(jQuery);
  $(function(){
   var opts = {
     class1:"a",
     class2:"b"
    }
   $("h1").click(function(){
    $("h1").toggleClass(opts).setBorder();
   })
  })
  //2.类级别的扩展
   //1).直接添加:为jQuery对象添加全局函数
   jQuery.sum = function(array){
    var total = 0;
    jQuery.each(array,function(idx,num){
     total  = num;
    })
    return total;
   }
   //2).用extend添加:
   jQuery.extend({
    fn1:function(){},
    fn2:function(){}
   })
  </script>
 </head>
 <body>
  <h1 id = "h1" class = "a">JQuery扩展测试</h1>
 </body>
</html>

本文实例叙述了jQuery插件扩张操作。分享给大家供我们仿照效法,具体如下:

CSS样式:

正文实例陈诉了jQuery插件扩张测量检验方法。分享给我们供大家参谋,具体如下:

您可能感兴趣的文章:

  • jQuery插件扩大实例【增加回调函数】
  • jQuery插件扩张extend的轻巧达成原理
  • jQuery插件扩大测验实例
  • jQuery插件formValidator自定义函数扩张功用实例详解
  • jQuery插件kin马克斯Show扩充效果用法实例
  • jquery事件机制扩展插件 jquery鼠标右键事件
  • JQuery模板插件 jquery.tmpl 动态ajax扩大
  • boxy基于jquery的弹出层对话框插件扩大应用 弹出层接纳器
  • jQuery下扩充插件和扩充函数的写法(无名函数使用的卓越例证)
  • jquery.boxy插件的iframe扩张代码
  • jQuery autocomplate 自扩大插件、自动完毕示范代码
  • 选拔jQuery插件扩充识别浏览器内核与外壳的种类和版本的兑现代码
<div id="kinMaxShow">
 <div>
 <!--这是焦点图大图图片,下面为动画元素所需图片-->
 <img src="images/demo_extend_images/1.jpg" />
 <!--如果需要附加内容在焦点图内部 需要用一个div包裹起来,
 如下面标红div所示,否则kinMaxShow会解析混乱--> 
 <div>
  <img class="sub_1_1" src="images/demo_extend_images/sub_1_1.png"/>
  <img class="sub_1_2" src="images/demo_extend_images/sub_1_2.png"
  usemap="#Map_1_2" border="0" />
 <!--此处焦点图上面的局部链接 可不用图片热区链接,
 可用普通a链接实现,偷个懒 (: -->  
  <map name="Map_1_2" id="Map_1_2">
  <area shape="rect" coords="2,96,106,123"
  href="//www.jb51.net" target="_blank"/>
  </map>
 </div>
 </div>
 <div>
 <img src="images/demo_extend_images/2.jpg" />
 <div>
  <img class="sub_2_1" src="images/demo_extend_images/sub_2_1.png"/>
  <img class="sub_2_2" src="images/demo_extend_images/sub_2_2.png"
  usemap="#Map_2_2" border="0" />
  <map name="Map_2_2" id="Map_2_2">
  <area shape="rect" coords="3,97,104,124"
  href="//www.jb51.net" target="_blank"/>
  </map>  
 </div>  
 </div>
 <div>
 <img src="images/demo_extend_images/3.jpg" />
 <div>
  <img class="sub_3_1" src="images/demo_extend_images/sub_3_1.png"/>
  <img class="sub_3_2" src="images/demo_extend_images/sub_3_2.png"
  usemap="#Map_3_2" border="0" />
  <map name="Map_3_2" id="Map_3_2">
  <area shape="rect" coords="1,98,106,124"
  href="//www.jb51.net" target="_blank"/>
  </map>   
 </div>
 </div>
</div>

越来越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery扩张工夫总括》、《jQuery常用插件及用法总括》、《jQuery拖拽特效与本领总括》、《jQuery表格(table)操作能力汇总》、《jquery中Ajax用法总计》、《jQuery常见特出特效汇总》、《jQuery动画与特效率法总括》及《jquery接纳器用法总括》

更加多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery增加手艺计算》、《威尼斯人注册官网,jQuery常用插件及用法总计》、《jQuery切换特效与技能计算》、《jQuery遍历算法与技艺总计》、《jQuery常见特出特效汇总》、《jQuery动画与特功用法总括》及《jquery选用器用法总括》

支付宝首页的标准图正是用的kin马克斯Show 扩张效果(近年来支付宝使用的,不领会今后还是或不是这种,其余支付宝的这几个难点图动画效能是分浏览器的,IE8及以下浏览器无动画纯静态,只是在谷歌(Google)、火狐等今世浏览器才会并发动画。) 那只是kin马克斯Show增加的贰个小例子,更多职能你能够团结发挥。 代码如下:

可望本文所述对我们jQuery程序设计具备帮忙。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="jquery.js"></script>
</head>
<body>
<div class="container">
  你好
</div>
<script>
  (function ($) {
    $.fn.myshowHtml = function(){
      alert(this.html());
    }
  })(window.jQuery)
$(function(){
  $(".container").myshowHtml();
})
</script>
</body>
</html>

javascript 代码:

本文由澳门威利斯人发布于办公软件,转载请注明出处:jQuery插件扩展操作入门示例,jQuery插件kinMaxShow扩

关键词: 澳门威利斯人