本身编辑jQuery插件,jQuery完结DIV响应鼠标滑过由下向上海展览中心开效果示例

和睦编写jQuery插件 之 菜单折叠,编写jquery插件折叠

  菜单折叠这么些职能很轻便,很五人都有写过,只因它在类型中应用实在是太频繁了。代码就那么几行,没什么讲的,这里只是将其封装成插件而已。

本身编辑jQuery插件,jQuery完结DIV响应鼠标滑过由下向上海展览中心开效果示例。 

  Html代码如下:

  

<div class="box">
        <p>菜单一</p>
        <ul>
            <li><a>1111</a></li>
            <li><a>1111</a></li>
            <li><a>1111</a></li>
        </ul>
        <p>菜单二</p>
        <ul>
            <li><a>2222</a></li>
            <li><a>2222</a></li>
            <li><a>2222</a></li>
        </ul>
        <p>菜单三</p>
        <ul>
            <li><a>3333</a></li>
            <li><a>3333</a></li>
            <li><a>3333</a></li>
        </ul>
</div>

 

  插件完结代码如下:

(function ($) {
            $.fn.Fold = function (options) {
                //默认参数设置
                var settings = {
                    speed: 300 //折叠速度(值越大越慢)
                }

                //不为空则合并参数
                if (options)
                    $.extend(settings, options);

                //为每个p元素绑定点击事件
                $("> p", this).each(function () {
                    $(this).bind("click", function () {
                        $(this).next("ul").slideToggle(settings.speed);
                    });
                });

                //默认第一个展开,其它折叠
                $("> ul", this).hide().first().show();

                //遵循链式原则
                return this.each(function () { });
            }
})(jQuery);

 

这边就不作讲授了,注释都写明了。

 

示例DEMO如下:

<!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></title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul,ul li{ list-style:none;}
        .box{ width:250px; margin:50px auto; border:1px solid gray;}
        .box p{ background-color: Green;color: white;cursor: pointer;font-weight: bold;
        line-height: 40px;padding-left: 15px;}
    </style>
</head>
<body>
    <div class="box">
        <p>菜单一</p>
        <ul>
            <li><a>1111</a></li>
            <li><a>1111</a></li>
            <li><a>1111</a></li>
        </ul>
        <p>菜单二</p>
        <ul>
            <li><a>2222</a></li>
            <li><a>2222</a></li>
            <li><a>2222</a></li>
        </ul>
        <p>菜单三</p>
        <ul>
            <li><a>3333</a></li>
            <li><a>3333</a></li>
            <li><a>3333</a></li>
        </ul>
    </div>

    <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.similar.Fold.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(".box").Fold();
    </script>
</body>
</html>

 

职能图片:

皇家赌场手机版 1

 

手风琴菜单

在写后台管理页面包车型地铁时候,编写折叠菜单是三个相比宽泛的利用场景。那么前天我们就来学学一下怎么选择种种姿势写动手风琴式的折叠菜单。
写从前先看一下职能,插件来源于jQuery之家,演示效果能够点击这里折叠菜单。jquery之家的源码好像有一点难题,下载能够点这里。

正文实例叙述了jQuery实现DIV响应鼠标滑过由下向上张开效果。共享给大家供大家仿照效法,具体如下:

在炮制网址,特别是小组或然论坛这一类的页面的时候,常常会遇见一件事,就是要将“帖子”折叠起来,那时平常会有那般的html

三个后台侧边菜单制作代码,用Jquery做的折叠张开效果其实职业中一般都以用JQUEY?

可以告知您思路,假使有3个菜单,就用3个div,最外层套二个大div来定位,点击张开实际正是改换有个别或许三个div的高就行了,前提是永世格局做好,不要绝对定位,难调整,用jquery响应点击事件,,用jquery的animate函数制作张开动画效果。思路加技巧化解难题,小编Computer刚重装了从未装dreamweaver没有办法给您做了,jquery入门十分的快的
 

折叠作用的原理

实际写出这一个折叠打开的职能并不复杂,用原生的js代码就足以兑现。首先看一下html结商谈体制:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠菜单</title>
    <style>
        .toggle{
            overflow: hidden;
            height: 0;
            transition: height 1s;
        }
    </style>
</head>
<body>
<div>
    <h4 class="unfold">我爱</h4>
    <ul class="toggle">
        <li>哈士奇</li>
        <li>大金毛</li>
        <li>萨摩耶</li>
    </ul>
</div>
</body>
</html>

h4标签便是大家的超级菜单,ul里面包车型客车子项就是大家的二级菜单。我们给子菜单设置了惊人为0和overflow: hidden,这样设置后子菜单是暗中认可遮蔽的,接下去只要大家只要在js中调度ul的中度就能够了。

鼠标浮动时div由下向上缓慢进行效果

1 <div id=”post1″>
2     <div id=”title1″>标题</div>
3     <div id=”content1″>内容</div>
4 </div>

jquery 折叠菜单怎做的

差很少给你贰个思路:
在点子中,
step1:全部隐形使用hide()方法
step2:然后鼠标事件触发当前当选的,使用show方法
给你三个参照网址:www.hz-hospital.com/
此网址右边有8个主导,鼠标上移的不行会议及展览开。本身编辑jQuery插件,jQuery完结DIV响应鼠标滑过由下向上海展览中心开效果示例。
 


菜单折叠,编写jquery插件折叠
菜单折叠这几个职能很轻松,很三个人都有写过,只因它在项目中应用实在是太频仍了。代…

原生js实现折叠功用

对于地方的这种html结构,其实代码很简短。

var btn=document.getElementsByClassName("unfold")[0];
var items=document.getElementsByClassName("toggle")[0];
btn.onclick=function () {
items.style.height="70px";
};

鉴于这里只是不难的执教原理,所以未有设想各样繁复的图景。

1.
演示效果
(鼠标浮动时div由下向上海展览中心开,浮动后div由上向下折叠苏醒原样)

渴求点击“标题”的时候,“内容”能够减少或实行
职业的做法中,平日会给title1这一个div加上click事件,调整content1的收缩和进行

jq完结折叠功用

jq已经帮大家封装好了slideToggle()办法,那一个情势能够兑现点击张开,再一次点击收回的遵守,所以大家向来运用那些法子就足以了,下边是代码:

      var domMenus=$(".menu");
      domMenus.on("click",function () {
        $(this).next().slideToggle();
      })

此间大致的说下jquery的slideToggle方法,在点击在此之前,它将二级菜单设置为display:none,在点击后立刻将二级菜单设置为display:block;overflow:hidden;height:0,接着再不停的充实中度,个中度等于二级菜单,也正是ul的骨子里中度时,结束扩充中度,然后移除这一个属性,只保留display:block其一本性。

皇家赌场手机版 2

由此有了叁个主张,将如此的源委大约地卷入一下,产生贰个可接纳的主意,小编称之为collapsible
有了jquery,做那一个实际是太轻巧了,缩放的动画效果等皆有了对应的不二诀要成功

组件化的兑现

直接像大家地点这么写的确能够兑现效果与利益,不过对于代码的复用以及成效的可定制性都比较不好,而且揭露了太多的自定义变量,所以我们要对代码进行重构。上边这段代码来自于地点提到的插件源码,源码中变量的命名语义化比较不好,所以本人对变量重新命名,方便我们收看。
对于html和css中比较根本的一部分本人差相当的少的介绍一下,上边包车型大巴这个内容也请结合地点提到的插件源码观望。
html部分请在浏览器中自行阅览,不再解说,css部分有多少个十二分主要的体裁:

.submenu {
    display: none;
 }
.accordion li.open .link {
    color: #b63b4d;
}

.accordion li.open i {
    color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
    transform: rotate(180deg);
} 

第三个是让二级子菜单暗许掩饰,第贰个的意趣是,在liopen其一样式类时,.linkcolor属性改为color: #b63b4d;,剩下的2个同上。
随之大家再来看js部分:

 var Accorrdian=function (menusWrap,multiple) {
    this.menusWrap=menusWrap;
    this.multiple=multiple|| false;
    var links=menusWrap.find('.link');
    links.on("click",{menusWrap:menusWrap,multiple:this.multiple},this.dropdown);
  };
  Accorrdian.prototype.dropdown=function (event) {
    var menusWrap=event.data.menusWrap;
    var domLink=$(this);
    var menuItems=domLink.next();
    menuItems.slideToggle();
    domLink.parent().toggleClass('open');
    if(!event.data.multiple){
      menusWrap.find('.submenu').not(menuItems).slideUp().parent().removeClass('open');
    }
  };
  var accordion=new Accorrdian($('#accordion'),false);

先是我们从总体上来看这段代码,这段代码首先定义了三个Accorrdian的构造函数,然后在那些构造函数的原型上定义了叁个dropdown的不二法门。最终新建了三个Accorrdian的目的,参数有2个。第八个参数是一个jquery的dom对象,它包裹着全体超级菜单,第贰个参数是用来安装每一回点击的时候能张开的二级菜单的多少,要是为false,则每一遍只可以有二个二级菜单实行,为true则不做限定。
现行反革命看一下那些构造函数:

this.multiple=multiple|| false;

那条语句很风趣,利用了||运算符的特征,当前者值为真时,不再对前边的值(代码)作推断(实践)。所以这段代码的意思是当multiple那个值不为空时,this.multiple=multiple,当multiple为空时,this.multiple=false。简单来说就是给multiple设置了叁个默许值false
随后找到menusWrap下的持有.link,也正是兼备的超级菜单,然后给那一个超级菜单注册了叁个点击事件,每一趟点击就实行一次dropdown方法。但是这段注册事件的代码有一点点新鲜:

 links.on("click",{menusWrap:menusWrap,multiple:this.multiple},this.dropdown);

它的参数有三个,第三个参数是叁个指标,它会传给第多个参数,也等于dropdown办法中,大家可以在第五个参数,dropdown艺术中抽取那几个参数,那一个数据是挂靠在event对象的data皇家赌场手机版,属性上,上面包车型大巴这段代码正是抽出那第4个参数:

var menusWrap=event.data.menusWrap;

下一场大家再看dropdown这一个艺术,首先它找到当前被点击的那么些一流菜单的下四个dom节点,也正是以此一流菜单对应的二级菜单,然后对这么些二级菜单施行
slideToggle()方法,接着再给这几个一流菜单加多opne样式类,改换超级菜单的体裁。然后我们再看一下末尾这一个if语句:

if(!event.data.multiple){
      menusWrap.find('.submenu').not(menuItems).slideUp().parent().removeClass('open');
    }

此间首先判别大家新建对象的时候第4个参数是true还是false,如果是true不再执行,假设是false则开头奉行代码。首先它找到全部的二级菜单,当前被点击的一流菜单对应的二级菜单除此之外,然后对那些具有的二级菜单试行slideUp方式,也正是将享有的二级菜单收起。

由来,一个可定制可复用的折叠菜单插件已经到位了。

2. 代码

实质上,有个叫toggleElement的插件能够成功相应的法力,不过看了刹那间百般插件,依旧差了一些东西,比如说通过措施钦赐标题,比如说他是运用title属性来自动生成题指标……

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net jQuery响应鼠标实现div由下向上展开</title>
<style type="text/css">
  .big{position:relative; width:234px; height:300px; background:#ccc}
  .show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
 {
  $(".big").hover(function () {
    $(".show").stop(true,true).animate({height:"70px"});
  }, function () {
    $(".show").stop(true,true).animate({height:"0px"});
  });
});
</script>
</head>
<body>
  <!--灰色的div-->
  <div class="big">
    <!--红色的div-->
    <div class="show"></div>
  </div>
</body>
</html>

基本思路:
对content1(选取content1作为艺术的功力对象是因为collapsible的是内容并非标题)使用,钦赐title1,随后给title1加上click事件
不采取jquery的toggle方法,因为这样不可能自定义动画
进而通过display==”none”判定内容是不是为接到状态,并举行相应的操作

原理:

关键成效:
自定义动画情势,animationType: ‘fade’/’slide’/’show’
自定义速度,speed: ‘normal’/’fast’/’slow’/null,当中null就从未动画了
透过自定义方法选用title,那是为着能够对多个content同期拓展操作,titleEl:
function() { return $(this).attr(‘id’) + ‘_title’; }
设若content和title之间有别的成分的话,要运动content,当然也能够选拔不挪窝,move:
true即为运动
事件:点击,收缩和进展,分别为onClick,onHide,onShow
css:当内容收缩和举行时,标题能够有例外的css,比方前边加上”+”或”-“,分别为hideClass,showClass
起先显示状态:start: ‘hide’/’show’/null,当中null就不变近年来景观了


首先浅灰div是通过position:absolute相对定位的,且通过相对与尾巴部分定位,如bottom:0px
② 后面部分定位定点,高度变高的时候就发展扩充了。
③ 使用jQuery的$().animate()动画片方法,调控古金色div低度变化。

示范在此:

包裹下载:
/Files/GrayZhang/collapsible.zip
注:
认为做示例比写代码难多了……哪位有空帮本人做个赏心悦目点的示例么,笔者想放到jquery官方网站去

越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery切换特效与本事计算》、《jQuery动画与特成效法总计》、《jQuery增添手艺计算》、《jQuery常用插件及用法总括》、《jQuery常见杰出特效汇总》及《jquery选择器用法总计》

可望本文所述对我们jQuery程序设计具有协助。

您也许感兴趣的小说:

  • jquery调控页面包车型大巴展开和隐身落成格局(推荐)
  • 据书上说jQuery完成下拉减少(张开与折叠)特效
  • jQuery完结DIV层裁减打开的艺术
  • jquery实现可点击伸缩与实行的菜谱成效代码
  • jquery达成点击查看越多内容调节段落文字实行折叠功能
  • jQuery完结文件进行收缩特效
  • jQuery完结表格打开与折叠的措施
  • jquery完毕先淡出再折叠收起的卡通片效果
  • jQuery使用slideUp方法完成调节成分缓慢收起
  • jQuery完结的页面详细情况张开收起作用示例

Leave a Comment.