jquery插件制作 -- 6.手风琴Panel-阿里云开发者社区

开发者社区> bill.kang> 正文

jquery插件制作 -- 6.手风琴Panel

简介:   我们今天要做的是手风琴panel,jquery.ui里面有个叫做accordtion的插件,我们要实现的效果和他一样。   首先我们还是创建一个html文件,里面包含如下的html结构。        first pane     this script should allow only one pane to be visible at a time.
+关注继续查看

  我们今天要做的是手风琴panel,jquery.ui里面有个叫做accordtion的插件,我们要实现的效果和他一样。

  首先我们还是创建一个html文件,里面包含如下的html结构。

<div id="pane-container">
  <div class="pane">
    <h1>first pane</h1>
    <p>this script should allow only one pane to be visible at a time.</p>
  </div>
  <div class="pane">
    <h1>second pane</h1>
    <p>this script should allow only one pane to be visible at a time.</p>
  </div>
  <div class="pane">
    <h1>third pane</h1>
    <p>this script should allow only one pane to be visible at a time.</p>
  </div>
</div>

  然后为页面定义如下css:

<style type="text/css">
        #pane-container
        {
            margin: 0;
            padding: 0;
            width: 200px;
        }
        .pane h1
        {
            padding: 5px;
            cursor: pointer;
            position: relative;
            background-color: #4c4c4c;
            color: #fff;
            font-weight: normal;
            font-size: 20px;
            margin: 0px;
        }
        .pane p
        {
            padding: 10px;
            margin: 0;
            background-color: #e4e4e4;
        }
    </style>

  下面我们来介绍jquery.accordtion.js插件的实现。首先我们需要考虑的是如何隐藏pane里面的内容部分,也就是p标签。h1作为标题是不需要隐藏的。

(function ($) {
    $.fn.accordtion = function () {
        return this.each(function () {
            $(this).find('p').hide();
        });
    }
})(jQuery);

  页面调用的代码:

$(document).ready(function () {
  $('#pane-container').accordtion();
});

 

  插件代码很简单,就是找到class为pane的div下面的p,对其隐藏。接下来我们要实现的是,当用户点到h1的时候,对应的p标签的内容显示出来,同时其他h1对应的p标签的内容隐藏。代码如下:

//对h1标签设置click事件
self.delegate('h1', 'click', function () {
  //为对应的p标签设置slideToggle效果
  $(this).next('p').slideToggle(600)
      //获取其他pane对象,找到他们下面的p标签,收起
      .parent().siblings().children('p').slideUp(600);
});

 

  现在我们的插件已经很有型了,最后要做的就是添加用户自定义属性options,这次我们只添加一个‘默认显示第几个pane’的属性。

//设置第几个元素显示
self.children(':eq(' + options.visibleByDefault + ')')//找到和options.visibleByDefault一致的pane对象
  .children('p')
  .show();

 

  完整的代码大家还是下demo自己看吧。jQuery.plugin.accordtion.zip

  谢谢大家的支持,希望本篇文章对你有帮助。如果对代码哪里有不清楚的地方,可以联系我。

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android项目实战(十九):Android Studio 优秀插件: Parcelable Code Generator
原文:Android项目实战(十九):Android Studio 优秀插件: Parcelable Code Generator Android Studio 优秀插件系列:                       Android Studio 优秀插件(一):GsonFormat    ...
780 0
jquery插件制作 -- 6.手风琴Panel
  我们今天要做的是手风琴panel,jquery.ui里面有个叫做accordtion的插件,我们要实现的效果和他一样。   首先我们还是创建一个html文件,里面包含如下的html结构。        first pane     this script should allow only one pane to be visible at a time.
885 0
基于 jQuery 实现垂直滑动的手风琴效果
  今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果。其主要思想是扩大手风琴片上的点击和显示更多的信息。其他内容片段将变得不那么透明。当使用一个导航箭头导航下一个片段,新的片会从顶部或底部滑动。
835 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
10202 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11716 0
Android项目实战(十九):Android Studio 优秀插件: Parcelable Code Generator
Android Studio 优秀插件系列:                       Android Studio 优秀插件(一):GsonFormat                       Android Studio 优秀插件(二): Parcelable Code Generat...
995 0
使用 jQuery & CSS3 实现优雅的手风琴效果
  手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果。今天,我们将创造一个优雅的手风琴内容效果。这个想法是有悬停时滑出一些垂直手风琴标签。我们将添加一些 CSS3 属性来提升外观。
805 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6419 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载