45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:jQuery菜单的插件使用方法分享

jQuery菜单的插件使用方法分享

2015-08-12 07:26:15 来源:www.45fan.com 【

jQuery菜单的插件使用方法分享

本文实例讲述了jQuery菜单插件用法。分享给大家供大家参考。具体如下:

这里要分享的是一个菜单插件,在http://plugins.jquery.com/keleyi/ 看到的,使用找个插件可以制作页面底部向上弹出的菜单,不一定在页底,还有多种其他方式。

jQuery菜单插件js文件:

/*!
* Keleyi(jQuery Menu)
* version: 0.1.6
* Copyright (c) 2013 KeLeyi
*/
(function ($) {
 $.fn.keleyi = function (options) {
  var settings = $.extend({
   width: '986px',
   margin: '0px auto',
   isAutoAddTriangle: true,
   item_background_color_hover: '#005500',
   item_background_color: 'transparent',
   item_width: 'auto',
   item_margin: '0px 0px 0px 10px',
   bar_height: 'auto',
   bar_position: 'fixed',
   bar_background_color: "#008000",
   bar_bottom: "0px",
   mainItem_color: "white",
   subItem_color:"white"
  }, options);
  $(this).addClass("keleyi-menu");
  $(this).css({ "width": settings.width, "margin": settings.margin });
  $(this).wrap("<div class='keleyi-menubar'></div>");
  var k_bar = $(this).parent();
  k_bar.css({ "background-color": settings.bar_background_color
  , "height": settings.bar_height, "position": settings.bar_position
  , "bottom": settings.bar_bottom, "min-width": settings.width
  });
  if (! -[1, ] && !window.XMLHttpRequest) {
   if (k_bar.css("position") == "fixed") {
    ie6FixedBottom(k_bar, settings.bar_bottom);
   }
  }
  $(this).parent().append("<div style='width:100%;clear:both;height:0px;overflow:hidden'></div>");
  $(this).find(">li").css({ "width": settings.item_width, "background-color": settings.item_background_color, "margin": settings.item_margin
  , "padding": "0px", "white-space": "nowrap", "height": "20px", "float": "left", "text-align": "center"
  , "display": "inline-block", "position": "relative"
  });
  $(this).find(">li a").css({ "color": "white", "line-height": "20px"
  , "display": "block", "font-size": "14px"
  });  
  if (settings.isAutoAddTriangle)
   $(this).find(">li").has('ul').find("a:first").append("<b></b>");
  $(this).find(">li").find("a:first").css({ "width": "100%", "overflow": "hidden", "color": settings.mainItem_color });
  $(this).find(">li").find("b").css({ "border-color": ("transparent transparent " + settings.mainItem_color) })
  $(this).find(">li ul").css({ "padding": "0px", "list-style-type": "none"
  , "background-color": "transparent", "position": "absolute", "display": "none"
  });
  $(this).find(">li").find("li a").css({ "color": settings.subItem_color });
  $(this).find(">li>a").mouseover(function () {
   $(this).parent().css({ "background-color": settings.item_background_color_hover });
   var k_ul = $(this).parent().find("ul");
   if (k_ul.length < 1)
    return;
   k_ul.css({ "background-color": settings.item_background_color_hover, "top": $(this).parent().position().top - (k_ul.height())
    , "left": "0px", "margin": "0px"
   }).show();
   if (k_ul.width() < $(this).parent().width())
    k_ul.width($(this).parent().width());
  });
  $(this).find(">li").mouseleave(function () {
   $(this).find("ul").hide();
   $(this).css("background-color", settings.item_background_color);
  });
  function ie6FixedBottom(fixedobj, bottommargin) {
   fixedobj.css({ "position": "absolute" });
   var k_bm = new Number;
   k_bm = Number(bottommargin.substring(0, bottommargin.length - 2));
   var obj = fixedobj[0];
   function setStyleTop() {
    obj.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight
    - obj.offsetHeight - (parseInt(obj.currentStyle.marginTop, 0) || k_bm) - (parseInt(obj.currentStyle.marginBottom, 0) || k_bm)
   }
   window.onscroll = function () { setStyleTop(); }
   window.onresize = function () { setStyleTop(); }
  }
 }
} (jQuery));

插件css文件:

div.keleyi-menubar{width:100%;visibility:visible;padding:0px;}
ul.keleyi-menu{list-style-type:none;padding:0px;}
ul.keleyi-menu a{text-decoration:none}
ul.keleyi-menu a:hover{text-decoration:underline;}
ul.keleyi-menu>li li{padding:0px;}
ul.keleyi-menu li b{
display:inline-block;
width: 0;
height: 0;
border-width: 4px 4px;
border-style: solid;
border-color: transparent transparent #fff;
font-size: 0;
line-height: 0;
-moz-transition: -moz-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
vertical-align:text-top;
margin-left:5px
}

jQuery菜单插件例子:

<!DOCTYPE html>
<html>
<head>
 <title>Keleyi Menu (jQuery Plugin)0.1.6 Demo- keleyi.com</title>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="jquery.keleyi.js"></script>
 <link href="jquery.keleyi.css" type="text/css" rel="Stylesheet" />
 <style>body{margin: 0px;}</style>
</head>
<body>
 <div style="text-align:center;width:986px;margin:0px auto;">
  <h1>
   Keleyi</h1>
  A jQuery Menu Plugin
  <h2>Browser Support</h2>
  Keleyi 0.1.4-0.1.6:IE6+,Chrome,Firefox,Opera,Safari<br />
  Keleyi 0.1.3:IE8+(not support IE6),Chrome,Firefox,Opera,Safari
 </div>
 <div style="height: 360px;background-color: #66FF66;"></div>
 <ul id="keleyi-menu">
  <li><a href="">Home</a></li>
  <li><a href="http://plugins.jquery.com/keleyi/">jQuery</a>
   <ul>
    <li><a href="https://github.com/keleyi/keleyi">github</a></li>
   </ul>
  </li>
  <li><a href="/keleyi/">Keleyi</a></li>
  <li><a href="/keleyi/demo/11.htm">Demo 11</a></li>
  <li><a href="/keleyi/demo/">Demo</a>
   <ul>
    <li><a href="/keleyi/demo/1.htm">Demo 1</a></li>
    <li><a href="/keleyi/demo/2.htm">Demo 2</a></li>
    <li><a href="/keleyi/demo/3.htm">Demo 3</a></li>
    <li><a href="/keleyi/demo/4.htm">Demo 4</a></li>
    <li><a href="/keleyi/demo/5.htm">Demo 5</a></li>
   </ul>
  </li>
  <li><a href="/keleyi/demo/6.htm">Demo 6</a>
   <ul>
    <li><a href="/keleyi/demo/7.htm">Demo 7</a></li>
    <li><a href="/keleyi/demo/8.htm">Demo 8</a></li>
    <li><a href="/keleyi/demo/9.htm">Demo 9</a></li>
    <li><a href="/keleyi/demo/10.htm">Demo 10</a></li></ul>
  </li>
  <li><a href="/keleyi/demo/12.htm">Demo 12</a></li>
  <li><a href="/keleyi/demo/0x1x5/">Demo 13</a></li>
 </ul>
 <div style="height: 900px; visibility: visible; background-color: Olive"></div>
 <script type="text/javascript">
  $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
 , "margin": "0px auto 0px 0px", "item_margin": "0px", "mainItem_color": "black","subItem_color":"black","bar_background_color":"#ffffff","item_background_color_hover":"#eeeeee"
  });
 </script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/17499.html
Tags: jquery 插件 菜单
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部