zoukankan      html  css  js  c++  java
  • 向上弹出菜单jQuery插件

    插件名:柯乐义
    英文名:Keleyi
    js文件名称:jquery.keleyi.js
    插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单。


    支持浏览器:

    keleyi 0.1.4版本支持IE6以及以上、Chrome、火狐(Firefox)、欧朋(Opera)、Safari等浏览器,也支持IE6

    keleyi 0.1.3版本支持IE8以及以上、Chrome、火狐(Firefox)、欧朋(Opera)、Safari等浏览器,不支持IE6。


    示例查看:http://keleyi.com/keleyi/

    更多示例:0 1 2 3 4 5 6 7 8 9 10 11 12

    从示例可以看出,Keleyi这个菜单插件使用方便,可以灵活自定义多种样式,包括颜色,位置,菜单项宽度等等。

    下面给出一个示例的HTML文件代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Keleyi(jQuery Menu Plugin) - keleyi.com</title><base target="_blank" /> 
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
    <link href="http://keleyi.com/keleyi/inc/jquery.keleyi.css" type="text/css" rel="Stylesheet" />
    <style>
    body
    {
    margin: 0px;
    overflow:scroll;
    }
    </style>
    </head>
    <body>
    <div style="text-align:center"><h1>Keleyi</h1>
    A jQuery Menu Plugin 
    </div>
    <div style="height:360px;"></div>
    <ul id="keleyi-menu">
    <li><a href="http://keleyi.com">Home</a></li>
    <li><a href="http://keleyi.com/menu/webqd/">Web</a>
    <ul>
    <li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>
    <li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>
    <li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>
    </ul>
    </li>
    <li><a href="http://keleyi.com/keleyi/">Keleyi</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/">Demo</a>
    <ul>
    <li><a href="http://keleyi.com/keleyi/demo/1.htm">Demo 1</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/2.htm">Demo 2</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/3.htm">Demo 3</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/4.htm">Demo 4</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/5.htm">Demo 5</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/6.htm">Demo 6</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/7.htm">Demo 7</a></li>
    </ul>
    </li>
    <li><a href="http://keleyi.com/keleyi/demo/8.htm">Demo 8</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/9.htm">Demo 9</a></li>
    </ul>
    <div style="height:900px; visibility: visible;
    </div>
    <script type="text/javascript" src="http://keleyi.com/keleyi/inc/jquery.keleyi.js"></script>
    <script type="text/javascript">
    $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
    , "margin": "0px auto 0px 0px"
    });
    </script>
    </body>
    </html>


    插件的使用一:
    使用这个插件,需要引用这3个文件(一个CSS文件,一个jQuery库,和一个插件js文件):
    <link href="http://keleyi.com/keleyi/inc/jquery.keleyi.css" type="text/css" rel="Stylesheet" />
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://keleyi.com/keleyi/inc/jquery.keleyi.js"></script>

    插件的使用二:
    从上面的代码看出,这个菜单的HTML代码非常简洁,格式如下:
    <ul id="keleyi-menu">

    <li><a href="http://keleyi.com">主菜单项一</a></li>
    <li><a href="http://keleyi.com/keleyi/">主菜单项二</a></li>

    <li><a href="http://keleyi.com/keleyi/demo/">主菜单项三</a>
    <ul>
    <li><a href="http://keleyi.com/keleyi/demo/1.htm">子菜单项1</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/2.htm">子菜单项2</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/3.htm">子菜单项3</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/4.htm">子菜单项4</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/5.htm">子菜单项5</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/6.htm">子菜单项6</a></li>
    <li><a href="http://keleyi.com/keleyi/demo/7.htm">子菜单项7</a></li>
    </ul>
    </li>

    </ul>

    插件的使用三:
    然后就是定义菜单的代码:
    <script type="text/javascript">
    $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
    , "margin": "0px auto 0px 0px"
    });
    </script>

    这样就可以在页面上显示一个特别的向上弹出菜单了。


    菜单大全

    原文:http://keleyi.com/a/bjac/c4oc8tyo.htm

  • 相关阅读:
    CodeForces gym Nasta Rabbara lct
    bzoj 4025 二分图 lct
    CodeForces 785E Anton and Permutation
    bzoj 3669 魔法森林
    模板汇总——快读 fread
    bzoj2049 Cave 洞穴勘测 lct
    bzoj 2002 弹飞绵羊 lct裸题
    HDU 6394 Tree 分块 || lct
    HDU 6364 Ringland
    nyoj221_Tree_subsequent_traversal
  • 原文地址:https://www.cnblogs.com/wangyongx/p/5016375.html
Copyright © 2011-2022 走看看