zoukankan      html  css  js  c++  java
  • 基于jQuery开发的手风琴插件 jquery.accordion.js

     1、插件代码
    少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码: 
    /*
     * 手风琴插件说明:
     * 1、treeTrunk对应树干
     * 2、treeLeaf对应树叶,html代码结构一般为treeTrunk.next()元素
     * 3、treeTrunkActiveClass是树干展开后添加的样式
     * 4、treeType是触发手风琴效果的事件形式
     * 5、treeIs 加载后是否将第一个树干展开
     * 6、speed 展开、闭合动画执行时间
     * 7、插件命名为jquery.accordion.js
     */
    ;
    (function($) {
        $.fn.accordion = function(options) {
            //插件默认值
            var defaultVal = {
                treeTrunk: 'a', //树干--点击需要展开的元素            
                treeLeaf: 'ul', //树叶--点击展开元素后显示的内容
                treeTrunkActiveClass: 'active', //当前树干--当前展开树干元素的添加的样式
                treeType: 'click', //触发展开/关闭的事件类型:click,mouseenter,mouseleave,mouseout,mouseover  
                treeIs: true, //页面加载后是否显示第一个树干的树叶内容
                speed:500//动画执行时间
            };
            var obj = $.extend(defaultVal, options); //合并参数
    
            return this.each(function() {
                var selObject = $(this); //获取触发手风琴事件对象
                var selTreeTrunk = selObject.find(obj.treeTrunk); //获取当前对象下的树干元素
                var selTreeLeaf = selTreeTrunk.next(obj.treeLeaf); //获取当前对象下的树干元素下的树叶
    
                //绑定事件
                selTreeTrunk.bind(obj.treeType, function() {
                    //判断树叶是否显示
                    if($(this).next(selTreeLeaf).is(':visible')) {
                        //关闭树叶
                        $(this).next(selTreeLeaf).slideUp(obj.speed);
                        //移除active样式
                        $(this).removeClass(obj.treeTrunkActiveClass);
                    } else {
                        //所有树干移除移除active样式
                        selTreeTrunk.removeClass(obj.treeTrunkActiveClass);
                        //当前树干添加active样式
                        $(this).addClass(obj.treeTrunkActiveClass);
                        //所有树叶闭合
                        selTreeTrunk.next(selTreeLeaf).slideUp(obj.speed);
                        //当前树干下的树叶展开
                        $(this).next(selTreeLeaf).slideDown(obj.speed);
                    }
                });
                //页面加载后触发第一个树干显示树叶内容
                if(obj.treeIs) {
                    selTreeTrunk.eq(0).trigger(obj.treeType);
                }
            });
        }
    })(jQuery);

     2、插件使用

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>基于jQuery的手风琴插件</title>
            <style type="text/css">
                * {
                    padding: 0;
                    margin: 0;
                    list-style: none;
                }
                
                ul.sidebar-menu {
                    width: 200px;
                    padding: 10px;
                }
                
                ul.sidebar-menu>li>a {
                    font-size: 16px;
                    line-height: 20px;
                    color: #000;
                    text-decoration: none;
                }
                
                ul.sidebar-menu>li>a:hover,
                ul.sidebar-menu>li>a.active {
                    background-color: #675C7C;
                    color: white;
                }
                
                ul.sidebar-menu>li>ul {
                    display: none;
                }
                
                ul.sidebar-menu>li>ul>li>a {
                    display: inline-block;
                    font-size: 14px;
                    line-height: 18px;
                    color: #000;
                    text-decoration: none;
                }
            </style>
        </head>
    
        <body>
            <ul class="sidebar-menu">
                <li class="treeview">
                    <a href="#">
                        标题1
                    </a>
                    <ul>
                        <li class="">
                            <a href="index.html">标题1-1</a>
                        </li>
                        <li>
                            <a href="index2.html">标题1-2</a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        标题2
                    </a>
                    <ul>
                        <li class="">
                            <a href="index.html">标题2-1</a>
                        </li>
                        <li>
                            <a href="index2.html">标题2-2</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
            <script src="js/jquery.accordion.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $(function() {
                    $('.sidebar-menu').accordion({
                        //获取树干元素
                        treeTrunk: '.treeview a'
                    })
                })
            </script>
    
        </body>
    
    </html>

    说明:

    (1)、jquery.accordion.js插件的路径要配置对。

    (2)、可以自己编辑页面的展示样式,如active样式。

    3、展示效果:

    请直接运行上述代码查看插件效果。

     
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 排队打水问题
    Java实现 蓝桥杯VIP 算法提高 排队打水问题
    Java实现 蓝桥杯VIP 算法提高 排队打水问题
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    现在使用控件, 更喜欢继承(覆盖控件已有的函数,很奇怪的一种使用方式)
    Controls 属性与继承 TShape 类的小练习(使用TShape可以解决很多图形问题)
    QT创建窗口程序、消息循环和WinMain函数(为主线程建立了一个QEventLoop,并执行exec函数)
  • 原文地址:https://www.cnblogs.com/mengfangui/p/7284385.html
Copyright © 2011-2022 走看看