• Slide + $.extend + $.fn.extend


    Jquery提供了向上向下显示匹配元素的方法slideDown([speed],[切换效果默认swing],[fn]),slideUp([speed],[切换效果默认swing],[fn]),slideToggle([speed],[切换效果默认swing],[fn])。

    要实现横向显示和隐藏可以扩展jquery的ui方法:

    View Code
    jQuery.fn.extend({
      slideRightShow: function() {
        return this.each(function() {
            $(this).show('slide', {direction: 'right'}, 1000);
        });
      },
      slideLeftHide: function() {
        return this.each(function() {
          $(this).hide('slide', {direction: 'left'}, 1000);
        });
      },
      slideRightHide: function() {
        return this.each(function() {
          $(this).hide('slide', {direction: 'right'}, 1000);
        });
      },
      slideLeftShow: function() {
        return this.each(function() {
          $(this).show('slide', {direction: 'left'}, 1000);
        });
      }
    });

    这里扩展的是UI/Effects/Slide中的方法和jquery中show与hide参数不一样,该方法同样可以让选定容器上下移动。见:http://docs.jquery.com/UI/Effects/Slide#options

    jqueryUI中show和hide方法可加入的特效见:http://jqueryui.com 

    要使这四个方法生效必须引入jquery的ui包,经测试,在show方法里面可以加一个回调函数,改函数会在slideXX方法调用完之后执行,例:

        

    View Code
     slideRightShow: function() {
        return this.each(function() {
            $(this).show('slide', {direction: 'right'}, 500,function(){
                alert("oooooo");
            });
        });
      }
    <scriptsrc="http://code.jquery.com/jquery-latest.js"></script>
    <scriptsrc="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
    <scriptsrc="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

    $.extend和$.fn.extend的区别:

      $.extend是给jquery类添加新方法,例如:

    View Code
    $.extend({
        addfunction:function(a,b){
              return a+b;       
        }
    })

      直接用$.addfunction(2,3);//return 5;

      $.fn.extend是给jquery的对象添加方法,例如:

    $.fn.extend({
        addfunction:function(a,b){
               return a+b;
        }
    });
    

      要调用addfunction就必须用$("选择器").addfunction(x,y);

    //jqueryUI和jquery有什么联系 怎么区分的 还不太明白

  • 相关阅读:
    原型
    构造函数
    异常处理
    逻辑中断
    1. 两数之和
    面向对象(进阶篇)
    面向对象(初级篇)
    面向对象
    迭代器/生成器
    模块&字符格式化
  • 原文地址:https://www.cnblogs.com/yongde/p/2768440.html
Copyright © 2020-2023  润新知