精华内容
下载资源
问答
  • 1)Lava Lamp基于JQuery 的水平滑动导航条  ... ... 2)jQuery.dropmenu这个插件能够将标准的UL元素转换成一个包含子菜单的下拉菜单。易于使用,风格样式采用CSS控制。  h...

       1)Lava Lamp基于JQuery 的水平滑动导航条

    Lava Lamp

     

          2)jQuery.dropmenu这个插件能够将标准的UL元素转换成一个包含子菜单的 下拉菜单。易于使用,风格样式采用 CSS控制
    jQuery.dropmenu

     

           3)JQuery Context Menu Plugin是一个非常轻便的 jQuery右键菜单插件。支持动态让 菜单项失效。

     

    JQuery Context Menu Plugin

     

          4)jQuery Mega Menu是一个jQuery超级下拉菜单下拉菜单项目可以非常多。

     

    jQuery Mega Menu

     

           5)jQuery Menu Drop Down采用jQuery开发的 下拉菜单,易于安装,提供多种颜色的界面模板。拥有奇特的菜单切换动画效果。整个插件未压缩只有5kb左右。

     

    jQuery Menu Drop Down

     

          6)jGD DropDown是一个简单的 jQuery插件,它利用一个下拉菜单来代替标准 select box控件。可以自定义样式。

    jGD DropDown

     

     

     

     

           7)jALDropdown是一个可以设置风格的 下拉选择控件。下拉选项也可以通过CSS内容风格。

    jALDropdown

     

     

          8)Mega Drop Down Menus w/ CSS & jQuery支持在 弹出菜单中包含上 百个项目的jQuery下拉菜单

    Mega Drop Down Menus w/ CSS & jQuery

     

           9)FormBox是一个采用 jQueryCSS3实现的一个 下拉菜单,并支持在 下拉菜单中集成一个 表单

     

     

    FormBox
    展开全文
  • ss-Menu.js插件介绍 ssMenu是一款jQuery固定侧边栏插件。ssMenu侧边栏插件使用简单,内置多种颜色主题,也可以自定义侧边栏菜单的颜色,非常实用。 ss-Menu.js插件使用 首先是在页面中引入ss-menu.css、jquery和ss...

    ss-Menu.js插件介绍

    ssMenu是一款jQuery固定侧边栏插件。ssMenu侧边栏插件使用简单,内置多种颜色主题,也可以自定义侧边栏菜单的颜色,非常实用。

    ss-Menu.js插件使用

    • 首先是在页面中引入ss-menu.css、jqueryss-menu.js文件。
    <link rel="stylesheet" href="css/ss-menu.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/ss-menu.js"></script>
    
    • HTML结构:菜单有基本的html结构,代码如下:
    <!--Start Side Sticky Menu-->
    <nav class="ss-menu ">
      <ul>
        <li><a href="#1"><i class="fa fa-android"></i>  Apps Development</a></li>
        <li><a href="#1"> <span class="ss-badge">6</span> <i class="fa fa-bar-chart"></i> Business & Marketing </a></li>
        <li><a href="#1"><i class="fa fa-heartbeat"></i> Life Insurance</a></li>
        <li><a href="#1"><i class="fa fa-bank"></i> Bank Loans</a></li>
        <li><a href="#1"><i class="fa fa-cc-paypal"></i> Bank Marketing</a></li>
        <li><a href="#1"><i class="fa fa-bookmark-o"></i> Insurance Policies </a></li>
        <li><a href="#1"><i class="fa fa-car"></i> Vehicle Insurance </a></li>
        <li><a href="#1"><i class="fa fa-briefcase"></i> Online Insurance</a></li>
        <li><a href="#1"><i class="fa fa-location-arrow"></i> Nearest Bank</a></li>
      </ul>
    </nav>
    <!--End Side Sticky Menu-->
    
    • 初始化插件:在页面DOM元素加载完毕之后,通过下面的方法来初始化插件。
    $(document).ready(function(){
      $(".ss-menu").ssMenu();
    });
    

    要使用不同的主题效果,可以在配置参数中设置。

    $(document).ready(function(){
      $(".ss-menu").ssMenu({
        theme: "theme-name",
      });
    });
    

    可用的主题名称有:

    • red
    • yellow
    • blue
    • green
    • orange
    • brown
    • teal
    • purple

    ss-Menu.js插件使用案例

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>jQuery固定侧边栏插件ssMenu|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
    	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式,使用时可以不引用-->
    	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    	<!--ssMenu CSS-->
        <link rel="stylesheet" href="css/ss-menu.css">
        <link rel="stylesheet" href="css/demo.css">
    </head>
    <body>
    	<!--Start Side Sticky Menu-->
    	<nav class="ss-menu ">
    	 <ul>
    	    <li><a href="#1"><i class="fa fa-android"></i>  Apps Development</a></li>
    	    <li><a href="#1"> <span class="ss-badge">6</span> <i class="fa fa-bar-chart"></i> Business & Marketing </a></li>
    	    <li><a href="#1"><i class="fa fa-heartbeat"></i> Life Insurance</a></li>
    	    <li><a href="#1"><i class="fa fa-bank"></i> Bank Loans</a></li>
    	    <li><a href="#1"><i class="fa fa-cc-paypal"></i> Bank Marketing</a></li>
    	    <li><a href="#1"><i class="fa fa-bookmark-o"></i> Insurance Policies </a></li>
    	    <li><a href="#1"><i class="fa fa-car"></i> Vehicle Insurance </a></li>
    	    <li><a href="#1"><i class="fa fa-briefcase"></i> Online Insurance</a></li>
    	    <li><a href="#1"><i class="fa fa-location-arrow"></i> Nearest Bank</a></li>
    	 </ul>
    	</nav>
    	<!--End Side Sticky Menu-->
    	<div class="htmleaf-container">
    		<header class="htmleaf-header">
    			<h1>jQuery固定侧边栏插件ssMenu <span>sticky Side Navigation jQuery ssMenu</span></h1>
    			<div class="htmleaf-links">
    				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
    				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201903045548.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
    			</div>
    		</header>
    		<main class="ss-main">
             <article>
                <section class="theme-picker">
                   <h2> Choose theme </h2>
                   <p> The following are built in and suitable color scheme for side sticky menu. </p>
                   <button class="set-default"> Set Default  </button>
                   <span class="red"> </span>
                   <span class="yellow"> </span>
                   <span class="blue"> </span>
                   <span class="green"> </span>
                   <span class="orange"> </span>
                   <span class="brown"> </span>
                   <span class="teal"> </span>
                   <span class="purple"> </span>
                   <div class="ad-unit">
                   </div>
                </section>
                <h2> Dependency  </h2>
                <p>  jQuery 3.3.1 and FontAwesome 4.7.0</p>
                <h2> How to Use  </h2>
                <p> 1. Load the jQuery and Font Awesome into HTML document. </p>
                <pre class="prettyprint lang-html">
    &lt;!--Font Awesome--&gt;
    &lt;link href=&quot;https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;!--jQuery--&gt;
     &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'&gt;&lt;/script&gt;
    </pre>
                <p> 2. Include the ssMenu CSS and JavaScript file into your project. </p>
                <pre class="prettyprint lang-html">
    &lt;!--ssMenu CSS--&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/ss-menu.css&quot;&gt;
    
    &lt;!--ssMenu JS--&gt;
    &lt;script src=&quot;js/jquery.ss.menu.js&quot;&gt;&lt;/script&gt;  
      </pre>
                <p> 3. Create HTML structure for ssMenu with the <code> nav </code> element that contains unordered list with your menu links. </p>
                <pre class="prettyprint lang-html">
    &lt;!--Start Side Sticky Menu--&gt;
    &lt;nav class=&quot;ss-menu &quot;&gt;
       &lt;ul&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt;&lt;i class=&quot;fa fa-android&quot;&gt;&lt;/i&gt;  Apps Development&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt; &lt;span class=&quot;ss-badge&quot;&gt;6&lt;/span&gt; &lt;i class=&quot;fa fa-bar-chart&quot;&gt;&lt;/i&gt; Business &amp; Marketing &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt;&lt;i class=&quot;fa fa-heartbeat&quot;&gt;&lt;/i&gt; Life Insurance&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt;&lt;i class=&quot;fa fa-bank&quot;&gt;&lt;/i&gt; Bank Loans&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt;&lt;i class=&quot;fa fa-cc-paypal&quot;&gt;&lt;/i&gt; Bank Marketing&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt;&lt;i class=&quot;fa fa-bookmark-o&quot;&gt;&lt;/i&gt; Insurance Policies &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt;&lt;i class=&quot;fa fa-car&quot;&gt;&lt;/i&gt; Vehicle Insurance &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt;&lt;i class=&quot;fa fa-briefcase&quot;&gt;&lt;/i&gt; Online Insurance&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#1&quot;&gt;&lt;i class=&quot;fa fa-location-arrow&quot;&gt;&lt;/i&gt; Nearest Bank&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;!--End Side Sticky Menu--&gt;
    </pre>
                <p> 4. Initialize ssMenu Plugin in jQuery document ready function.</p>
                <pre class="prettyprint lang-js">
    $(document).ready(function(){
    
    $(".ss-menu").ssMenu();
    
    });    
    
    </pre>
                <p> 5. To change the theme, just put the name of theme in the following option. </p>
                <pre class="prettyprint lang-js">
    $(document).ready(function(){
    
    $(".ss-menu").ssMenu({
      theme: "theme-name",
    
    });
    
    });    
    
    </pre>
                <p> All available themes are as follows:</p>
                <ol>
                   <li> red</li>
                   <li>yellow  </li>
                   <li> blue </li>
                   <li>green </li>
                   <li> orange </li>
                   <li>brown </li>
                   <li> teal</li>
                   <li> purple</li>
                </ol>
                <p> 6. To hide navigation on scroll down. default: false  </p>
                <pre class="prettyprint lang-js">
    $(".ss-menu").ssMenu({
      hideOnScroll: true,
    
    });
    </pre>
                <p> 7. To add additional CSS properties into ssMenu, put the CSS values in the following object.  </p>
                <pre class="prettyprint lang-js">
    $(".ss-menu").ssMenu({
     additionalCSS: ({ 
     'background' : '', //custom background color
    	'color' : '', //custom text color 
    	'boxShadow' : '', //to add box shadow 
    	'textShadow' : '', //to add text shadow 
    	}), 
    
    });
    </pre>
             </article>
          </main>
    		<div class="related">
    		    <h3>如果你喜欢这个插件,那么你可能也喜欢:</h3>
    		    <a href="http://www.htmleaf.com/jQuery/Menu-Navigation/201812075446.html">
    			  <img src="related/1.jpg" width="300" alt="移动优先的jquery多级导航菜单插件"/>
    			  <h3>移动优先的jquery多级导航菜单插件</h3>
    			</a>
    			<a href="http://www.htmleaf.com/jQuery/Menu-Navigation/201811125408.html">
    			  <img src="related/2.jpg" width="300" alt="Bootstrap4导航菜单sina-nav"/>
    			  <h3>Bootstrap4导航菜单sina-nav</h3>
    			</a>
    		</div>
    	</div>
    	
    	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    	<script src="js/jquery.ss.menu.js"></script>
    	<script>
    	 $(document).ready(function(){
    	 
    	   $(".ss-menu").ssMenu();
    	 	
    	 }); 
    	 
    	</script>
    	<script>
             $(function(){
               var ssMenu = $(".ss-menu");
               var theme = $(".theme-picker").find("span");
             
                $(theme).click(function(y){
                
                  y = $(this).attr("class");
                  
                  $(ssMenu).removeClass().addClass("ss-menu " +y); //Aaah what a nice 
                  
                     
                });
             
                $(".set-default").click(function(){
                       $(ssMenu).removeClass().addClass("ss-menu default");
                
                });
             
             });
             
          </script>
    </body>
    </html>
    

    效果如下图:
    在这里插入图片描述

    标题jQuery固定侧边栏插件ss-Menu.js相关资源离线下载

    地址为:固定侧边栏插件ss-Menu.js相关资源离线下载,提货码:ltgz

    展开全文
  • jQuery响应式下拉导航菜单插件megamenu
  • 插件描述:megamenu.js是一款非常实用的响应式jQuery大型菜单插件。该大型菜单兼容IE8+浏览器,它使用jQuery动画作为过渡效果,并且具有响应式效果,可以无缝和wdpress集成。参考示例:...
  • SelectMenu.js是一款简洁、易用、多样的jquery下拉菜单插件。SelectMenu下拉菜单插件功能强大,支持下拉,分页,键盘操作等功能。
  • 滚动菜单插件Section Menu是一款带有索引按钮,滑动切换效果的jQuery滚动插件
  • jquery插件menu效果(二)

    2010-01-19 17:48:38
    jquery插件menu效果(二) 插件首页 http://www.ndesign-studio.com/blog/mac/css-dock-menu 下载地址 http://www.ndesign-studio.com/file/css-dock-menu.zip 得到文件 css-dock-menu.zip 根据里面的...
    jquery插件menu效果(二)
    

    插件首页
    http://www.ndesign-studio.com/blog/mac/css-dock-menu

    下载地址
    http://www.ndesign-studio.com/file/css-dock-menu.zip

    得到文件
    css-dock-menu.zip

    根据里面的源代码,撰写测试页面menus-demo2.html如下:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Dock menu demo</title>
    <script src="../components/jquery/jquery-1.3.2.min.js"
    type="text/javascript"></script>
    <script src="../components/jquery/jquery.dock.menu.min.js"
    type="text/javascript"></script>
    <!--[if lt IE 7]>
    <style type="text/css">
    div, img { behavior: url(iepngfix.htc) }
    </style>
    <![endif]-->
    <style type="text/css">
    body {
    font: 11px Arial, Helvetica, sans-serif;
    background: #ffffff url(images/main-bg.gif);
    padding: 0;
    margin: 0;
    }
    img {
    border: none;
    }

    /* dock - top */
    .dock {
    position: relative;
    height: 50px;
    text-align: center;
    }
    .dock-container {
    position: absolute;
    height: 50px;
    background: url(images/dock-bg2.gif);
    padding-left: 20px;
    }
    a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
    }
    .dock-item img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
    }
    .dock-item span {
    display: none;
    padding-left: 20px;
    }

    /* dock2 - bottom */
    #dock2 {
    width: 100%;
    bottom: 0px;
    position: absolute;
    left: 0px;
    }
    .dock-container2 {
    position: absolute;
    height: 50px;
    background: url(images/dock-bg.gif);
    padding-left: 20px;
    }
    a.dock-item2 {
    display: block;
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px;
    color: #000;
    bottom: 0px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    }
    .dock-item2 span {
    display: none;
    padding-left: 20px;
    }
    .dock-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
    }
    </style>
    </head>
    <body>
    <div class="dock" id="dock">
    <div class="dock-container">
    <a class="dock-item" href="#"><img src="../images/home.png" alt="home" /><span>Home</span></a>
    <a class="dock-item" href="#"><img src="../images/email.png" alt="contact" /><span>Contact</span></a>
    <a class="dock-item" href="#"><img src="../images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
    <a class="dock-item" href="#"><img src="../images/music.png" alt="music" /><span>Music</span></a>
    <a class="dock-item" href="#"><img src="../images/video.png" alt="video" /><span>Video</span></a>
    <a class="dock-item" href="#"><img src="../images/history.png" alt="history" /><span>History</span></a>
    <a class="dock-item" href="#"><img src="../images/calendar.png" alt="calendar" /><span>Calendar</span></a>
    <a class="dock-item" href="#"><img src="../images/rss.png" alt="rss" /><span>RSS</span></a>
    </div>
    <script type="text/javascript">
    $(document).ready(
    function()
    {
    $('#dock').Fisheye(
    {
    maxWidth: 50,
    items: 'a',
    itemsText: 'span',
    container: '.dock-container',
    itemWidth: 40,
    proximity: 90,
    halign : 'center'
    }
    )
    }
    );
    </script>
    </body>
    </html>
    展开全文
  • 香草JS响应式菜单插件。 移动优先,可访问,可定制 演示版 依存关系 Apollo JS | 首先加载apollo 特征 无障碍友善 压缩的4kb 较旧的浏览器或禁用/损坏JS时的常规菜单 致谢 在IE6 / 7上,您仅获得菜单的第一层,因为...
  • jQuery EasyUI 插件-macmenu源码js

    千次阅读 2014-12-03 13:54:01
    //在纯js模式下itemOpts.onClick或itemOpts.onClick.fn是经过$.parser.splitOptions处理过的string if (typeof itemOpts.onClick === 'string') itemOpts.onClick = eval('(' + itemOpts.onClick + ')'); ...


    /**
     * jQuery EasyUI 1.4
     *
     * Copyright (c) 2009-2014 www.jeasyui.com. All rights reserved.
     *
     * Licensed under the GPL license: http://www.gnu.org/licenses/gpl.txt
     * To use it on other terms please contact us at info@jeasyui.com
     *
     */
    /**
     * macmenu - jQuery EasyUI
     *
     */
    (function($, window, document){
    	//dom原生属性,例如id, disabled和onclick事件等与data-options属性冲突时以data-options属性
    	var xtype = baseMenuCls = 'macmenu', baseItemCls = 'menuitem';
    	function onItemEvent(item){
    		var itemOpts = item.data(baseItemCls).options;
    		if (itemOpts.disabled || item.hasClass('menudisabled')) return item;
    		return item.data(baseItemCls).subMenu ? onItemHover(item) : onItemClick(item);
    
    		function onItemHover(item){
    			return item.hover(function() {
    				if (itemOpts.disabled || item.hasClass('menudisabled')) return;
    				// item.data(baseItemCls) = {options:{...}, subMenu: jquery对象包含一个ul}
    				//返回subMenu
    				var subMenu = item.data(baseItemCls).subMenu;
    				// 如果没有baseMenuCls的class,说明subMenu没render
    				if (!subMenu.hasClass(baseMenuCls)) {
    					subMenu = renderMenu(subMenu.appendTo(item));
    				}
    				//不是最顶级菜单, topmacmenu没有任何样式
    				if (!subMenu.hasClass('topmenu')) {
    					var parentItem = subMenu.parent('li.' + baseItemCls),//subMenu对应的父节点:li.menuitem
    						left = parentItem.offset().left + parentItem.outerWidth(),//父节点:li.menuitem的相对文档的X坐标和父节点:li.menuitem的宽度之和
    						top = parentItem.offset().top + parentItem.outerHeight(),
    						pos = {};
    					if (left + subMenu.outerWidth() > $(window)._outerWidth() + $(document)._scrollLeft()) {
    						pos.right = '100%';
    						pos.left = 'auto'
    					} else {
    						pos.left = '100%';
    						pos.right = 'auto'
    					}
    					if (top + subMenu.outerHeight() > $(window)._outerHeight() + $(document).scrollTop()) {
    						pos.bottom = '5px';
    						pos.top = 'auto'
    					} else {
    						pos.top = '-5px';
    						pos.bottom = 'auto'
    					}
    					subMenu.css(pos).show();
    				}
    			}, function() {
    				if (itemOpts.disabled || item.hasClass('menudisabled')) return;
    				item.data(baseItemCls).subMenu.hide()
    			})
    		}
    		function onItemClick(item){
    			//触发onclick事件,dom的onclick被覆盖
    			// <li οnclick="fn1" data-options="iconCls:'icon-save', onclick: fn2">New</li>只执行fn2
    			if (itemOpts.onClick){
    				item[0].onclick = null;
    				//在纯js模式下itemOpts.onClick或itemOpts.onClick.fn是经过$.parser.splitOptions处理过的string
    				if (typeof itemOpts.onClick === 'string') itemOpts.onClick = eval('(' + itemOpts.onClick + ')');
    				if (itemOpts.onClick.fn && typeof itemOpts.onClick.fn === 'string') itemOpts.onClick.fn = eval('(' + itemOpts.onClick.fn + ')');
    			}
    			return item.off('click').on('click', function(e) {
    				if (itemOpts.disabled || item.hasClass('menudisabled')) return item;
    				//触发onclick事件,dom的onclick被覆盖
    				// <li οnclick="fn1" data-options="iconCls:'icon-save', onclick: fn2">New</li>只执行fn2
    				if (itemOpts.onClick){
    					if (typeof itemOpts.onClick === 'function'){
    						itemOpts.onClick.apply($(this));
    					}else if (typeof itemOpts.onClick === 'object' && typeof itemOpts.onClick.fn === 'function'){
    						var scope = $($.trim(itemOpts.onClick.scope).indexOf('#') === 0 ? $.trim(itemOpts.onClick.scope) : '#' + $.trim(itemOpts.onClick.scope)) || $(this),
    							fn = itemOpts.onClick.fn,
    							args = itemOpts.onClick.args || [],
    							single = !!itemOpts.onClick.single || false;
    						fn.apply(scope, args);
    						if (single){
    							delete itemOpts.onClick;
    						}
    					}
    				}
    				// 隐藏topmenu
    				$(this).parents('ul.topmenu').hide();
    				//若果item有href属性,再跳转页面
    				var href = itemOpts.href;
    				if (href && typeof href === 'string'){
    					//href是否以http:开头
    					if (/^http\:/i.test(href)){
    						location.href = href;
    					}else{
    						location.href = location.href.substring(0, location.href.indexOf('\/')) + href;
    					}
    				}
    			});
    		}
    	};
    	function setDisabled(item, disabled){
    		if (!item.hasClass(baseItemCls)){return}
    		var itemEl = item[0], itemOpts = item.data(baseItemCls).options;
    		if (disabled){
    			item.addClass('menudisabled');
    			itemOpts.disabled = disabled;
    			if (itemEl.onclick){
    				itemEl.onclick1 = itemEl.onclick;
    				itemEl.onclick = null;
    			}
    		}else{
    			item.removeClass('menudisabled');
    			delete itemOpts.disabled;
    			if (itemEl.onclick1){
    				itemEl.onclick = itemEl.onclick1;
    				itemEl.onclick1 = null;
    			}
    		}
    		return item;
    	};
    	function setHidden(item, hidden){
    		if (!item.hasClass(baseItemCls)){return}
    		var itemOpts = item.data(baseItemCls).options;
    		if (hidden){
    			item.hide();
    			itemOpts.hidden = hidden;
    		}else{
    			item.show();
    			delete itemOpts.hidden;
    		}
    		return item;
    	};
    	function getItems(theMenu, subMenu){
    		return subMenu ? theMenu.find('li.' + baseItemCls) : theMenu.children('li.' + baseItemCls);
    	};
    	function len(theMenu, subMenu){
    		return getItems(theMenu, subMenu).length;
    	};
    	function getItemByIndex(theMenu, index){
    		var itemCount = len(theMenu);
    		return $(theMenu.children('li.' + baseItemCls).eq((Math.abs(index || 0) < itemCount) ? index : itemCount - 1));
    	};
    	function onMenuEvent(theMenu){
    		if (!theMenu.hasClass('topmenu')) return theMenu;
    		var state = theMenu.data(baseMenuCls), options = state.options;
    		return theMenu.off('mouseenter').on('mouseenter', function(){
    			if (state.timer){
    				clearTimeout(state.timer);
    				state.timer = null;
    			}
    		}).off('mouseleave').on('mouseleave', function(){
    			if (options.hideOnUnhover){
    				theMenu.data('timer', setTimeout(function(){
    					theMenu.hide();
    				}, options.duration));
    			}
    		});
    	};
    	function setIcon(item, iconCls){
    		if (!iconCls || typeof iconCls !== 'string') return item;
    		item.children('span.itemicon').remove();
    		return item.prepend($('<span class="itemicon"></span>').addClass(iconCls));
    	};
    	function setHtml(item, html){
    		if (!html || typeof html !== 'string') return item;
    		var itemText = item.children('span.itemtext').eq(0);
    		if (itemText.length){
    			itemText.html(html);
    		}else{
    			$('<span class="itemtext"></span>').html(html).appendTo(item);
    		}
    		return item;
    	};
    	function renderItem(item){
    		var subMenu = null,
    			state = item.data(baseItemCls) || {},
    			itemOpts = $.extend({}, $.parser.parseOptions(item[0], ['name', 'iconCls', 'href',
    			{
    				separator: 'boolean'
    			}]), {
    				disabled: (item.attr('disabled') ? true : undefined)
    			});
    		//用于动态添加item
    		//renderItem($('<li></li>').data(baseItemCls, {options: args}))
    		if (state && state.options){
    			itemOpts = $.extend(state.options, itemOpts);
    		}else{
    			$.extend(state, {options: itemOpts});
    			item.data(baseItemCls, state);
    		}
    		if (itemOpts.separator) {
    			item.addClass('divider');
    		}
    		if (!item.hasClass('divider')){
    			if (itemOpts.id && typeof itemOpts.id === 'string'){
    				item.attr('id', itemOpts.id);
    			}else{
    				if (item.attr('id')) itemOpts.id = item.attr('id');
    			}
    			if (itemOpts.name && typeof itemOpts.name === 'string'){
    				item.attr('name', itemOpts.name);
    			}else{
    				if (item.attr('name')) itemOpts.name = item.attr('name');
    			}
    			if (itemOpts.href && typeof itemOpts.href === 'string'){
    				item.attr('href', itemOpts.href);
    			}else{
    				if (item.attr('href')) itemOpts.href = item.attr('href');
    			}
    			item.children('ul').each(function(index) {
    				if (index === 0){
    					subMenu = $(this);
    					$.extend(state, {subMenu: subMenu});
    				}
    				$(this).remove();
    			});
    			itemOpts.html = $.trim(itemOpts.html || itemOpts.text || item.html());
    			item.empty().addClass(baseItemCls).append(setHtml(item, itemOpts.html));
    			setIcon(item, itemOpts.iconCls);
    			if (itemOpts.disabled) {
    				setDisabled(item, true);
    			}
    			if (subMenu) {
    				$('<span class="itemarrow"></span>').appendTo(item);
    				renderMenu(subMenu.appendTo(item));
    			}
    			onItemEvent(item);
    		}
    		return item;
    	};
    	function renderMenu(theMenu) {
    		if (!theMenu.hasClass('topmenu')) {
    			theMenu.data(baseMenuCls, {
    				options: $.extend({}, $.fn[xtype].defaults, $.fn[xtype].parseOptions(theMenu[0]))
    			});
    		}
    		var options = theMenu.data(baseMenuCls).options;
    		if (options.content){
    			theMenu.addClass('contentmenu');
    		}
    		if (!theMenu.hasClass('contentmenu')){
    			theMenu.addClass(baseMenuCls).children('li').each(function(index) {
    				renderItem($(this));
    			});
    		}
    		if (options.width){
    			theMenu.css({'width': typeof options.width == 'string' ? options.width : options.width + 'px'});
    		}
    		if (options.minWidth){
    			theMenu.css({'min-width': typeof options.minWidth == 'string' ? options.minWidth : options.minWidth + 'px'});
    		}
    		if (options.maxWidth){
    			theMenu.css({'max-width': typeof options.maxWidth == 'string' ? options.maxWidth : options.maxWidth + 'px'});
    		}
    		return onMenuEvent(theMenu).css({'z-index': $.fn[xtype].defaults.zIndex++});
    	};
    	function init(target){
    		if (!$(target).parents('ul.topmenu').length) $(target).addClass('topmenu');
    		var options = $(target).data(baseMenuCls).options;
    		$(document).off('.topmenu').on('mousedown.topmenu', function(e){
    			var m = $(e.target).closest('ul.topmenu,div.combo-p');
    			if (m.length){return}
    			if ($('ul.topmenu:visible').length) hide($('ul.topmenu:visible')[0]);
    		});
    		setPosition(renderMenu($(target)),{
    			left: options.left,
    			top: options.top
    		});
    		if (options.autoShow) show($(target));
    	};
    	function setPosition(theMenu, pos){
    		var options = theMenu.data(baseMenuCls).options;
    		if (pos) $.extend(options, pos);
    		var left = options.left,
    			top = options.top,
    			at = options.alignTo && options.alignTo.indexOf('#') === 0 ? $(options.alignTo).eq(0) : $('#' + options.alignTo).eq(0),
    			align = options.align.toLowerCase();
    		if (at.length){
    			left = at.offset().left;
    			top = at.offset().top + at._outerHeight();
    			if (align === 'right'){
    				left += at.outerWidth() - theMenu.outerWidth();
    			}
    			theMenu.addClass('align');
    		}else{
    			theMenu.removeClass('align');
    		}
    		if (left + theMenu.outerWidth() > $(window)._outerWidth() + $(document)._scrollLeft()){
    			left = $(window)._outerWidth() + $(document).scrollLeft() - theMenu.outerWidth() - 15;
    		}
    		if (top + theMenu.outerHeight() > $(window)._outerHeight() + $(document).scrollTop()){
    			if (at.length){
    				top = $(at).offset().top - theMenu._outerHeight();
    			}else{
    				top = $(window)._outerHeight() + $(document).scrollTop() - theMenu.outerHeight() - 10;
    			}
    		}
    		var position = {
    			left: left < 0 ? 0 : left,
    			top: top < 0 ? 0 : top
    		};
    		$.extend(options, position);
    		return theMenu.css(position);
    	};
    	function cb(menu, eventName){
    		var options = menu.data(baseMenuCls).options,
    			cb = options[$.trim(eventName)];
    		if (!cb && ['onBeforeShow', 'onBeforeHide'].indexOf($.trim(eventName)) > -1) return true;
    		if (typeof cb === 'function'){
    			return cb.apply(menu, menu);
    		}else if (typeof cb === 'object'){
    			var scope = cb.scope && cb.scope.indexOf('#') === 0 ? $(cb.scope).eq(0) : $('#' + cb.scope).eq(0) || menu,
    				single = cb.single || false,
    				args = cb.args || [],
    				fn = cb.fn || function(){},
    				val = fn.apply(scope, args);
    			if (single) delete options[$.trim(eventName)];
    			return val;
    		}
    	}
    	function show(menuEl, pos){
    		var menu = $(menuEl);
    		if(pos && typeof pos === 'object') setPosition(menu, pos);
    		if (cb(menu, 'onBeforeShow')){
    			menu.show();
    			cb(menu, 'onShow');
    		}
    		return menu;
    	};
    	function hide(menuEl){
    		var menu = $(menuEl);
    		if (cb(menu, 'onBeforeHide')){
    			menu.hide();
    			cb(menu, 'onHide');
    		}
    		return menu;
    	};
    	function setAlignTo(theMenu, alignTo, align){
    		if (!theMenu || !alignTo || typeof alignTo !== 'string') return theMenu;
    		var options = theMenu.data(baseMenuCls).options;
    		$.extend(options, {
    			alignTo: alignTo,
    			align: align
    		});
    		setPosition(theMenu);
    	}
    	$(window).off('.' + baseMenuCls).on('resize.' + baseMenuCls, function() {
    		$('ul.topmenu.' + baseMenuCls).each(function(){
    			setPosition($(this));
    		});
    	});
    	function createDom(){
    		return $('<ul></ul>');
    	};
    	$[xtype] = function(options, autoRender){
    		if (!options || !typeof options === 'object' || $.isEmptyObject(options)) return;
    		var appendTo = typeof options.appendTo === 'string' ? (options.appendTo.indexOf('#') === 0 ? $(options.appendTo) : $('#' + options.appendTo)) : $('body');
    			target = createDom().attr('id', options.id || '').appendTo(appendTo);
    		$.parser.splitOptions(target, options);
    		function appendItems(items, parent){
    			if (!items || !Array.isArray(items)) return parent;
    			for(var i = 0; i < items.length; i++){
    				if (items[i] == '-') items[i] = {separator: true};
    				var item = $('<li></li>').attr('id', items[i].id || '').appendTo(parent);
    				item = $.parser.splitOptions(item, items[i]);
    				if (items[i].menu){
    					var subMenuOpts = items[i].menu,
    						subMenuItems = subMenuOpts.items,
    						subMenu = $.parser.splitOptions(createDom().appendTo(item), subMenuOpts);
    					appendItems(subMenuItems, subMenu);
    				}
    			}
    			return parent;
    		}
    		var t = appendItems(options.items || null, target);
    		return !autoRender ? t : t[xtype](options);
    	};
    	$.fn[xtype] = function(options){
    		if (typeof options == 'string'){
    			var args = Array.prototype.slice.call(arguments, 1);
    			return $.fn[xtype].methods[options].apply(this, args);
    		}
    
    		options = options || {};
    		return this.each(function(){
    			var state = $.data(this, baseMenuCls);
    			if (state){
    				$.extend(state.options, options);
    			} else {
    				state = $.data(this, baseMenuCls, {
    					options: $.extend({}, $.fn[xtype].defaults, $.fn[xtype].parseOptions(this), options)
    				});
    				init(this);
    			}
    		});
    	};
    	$.fn[xtype].methods = {
    		options: function(){
    			return $.data(this[0], baseMenuCls).options;
    		},
    		show: function(pos){
    			return this.each(function(){
    				show(this, pos);
    			});
    		},
    		hide: function(){
    			return this.each(function(){
    				hide(this);
    			});
    		},
    		destroy: function(){
    			return this.each(function(){
    				$(this).remove();
    			});
    		},
    		alignTo: function(alignTo, align){
    			return this.each(function(){
    				setAlignTo($(this), alignTo, align || 'left');
    			});
    		},
    		//subMenu默认为false直接菜单项
    		//subMenu为true所有菜单项
    		getItems: function(subMenu){
    			return getItems(this, subMenu);
    		},
    		//subMenu默认为false直接菜单项的数量
    		//subMenu为true所有菜单项的数量
    		//$('#mm').macmenu('itemCount')
    		len: function(subMenu){
    			return len(this, subMenu);
    		},
    		//根据索引值返回菜单项,从0开始计数,不包括子菜单
    		//$('#mm').macmenu('getItemByIndex', 3)--返回第4个菜单项
    		//$('#mm').macmenu('getItemByIndex', -3)--返回倒数第4个菜单项
    		//如果index超出范围,返回最后1个菜单项
    		$('#mm').macmenu('getItemByIndex', -99999)--返回最后1个菜单项
    		getItemByIndex: function(index){
    			return getItemByIndex(this, index);
    		},
    		getItemOption: function(item){
    			return !item[0] ? null : $.extend({}, item.data(baseItemCls).options);
    		},
    		getSubMenu: function(item){
    			return !item[0] ? null : item.children('ul.' + baseMenuCls);
    		},
    		//返回菜单项的索引值,从0开始计数
    		indexOf: function(item){
    			return !item[0] ? -1 : this.children('li.' + baseItemCls).index(item);
    		},
    		//返回包含所有菜单项的DOM元素数组
    		toArray: function(subMenu){
    			return subMenu ? this.find('li.' + baseItemCls).toArray() : this.children('li.' + baseItemCls).toArray();
    		},
    		findItem: function(text, subMenu){
    			var items = [];
    			if (!text || !$.trim(text).length) return items;
    			getItems(this, subMenu).each(function(){
    				var itemText = $.trim($(this).children('span.itemtext').eq(0).text()).toLowerCase();
    				if (itemText.indexOf($.trim(text).toLowerCase()) >= 0){
    					items.push($(this));
    				}
    			});
    			return items;
    		},
    		setHtml: function(item, html){
    			return setHtml(item, html);
    		},
    		setIcon: function(item, iconCls){
    			return setIcon(item, iconCls);
    		},
    		insertItem: function(args, index){
    			if (index < 0) return this[xtype].methods.prependItem.call(this, args);
    			if (index >= len(this)) return this[xtype].methods.appendItem.call(this, args);
    			var theItem = renderItem($('<li></li>').data(baseItemCls, {options: args}));
    			var prevItem = getItemByIndex(this, index);
    			prevItem.length ? theItem.insertBefore(prevItem) : theItem.appendTo(this);
    			return theItem;
    		},
    		prependItem: function(args){
    			var theItem = renderItem($('<li></li>').data(baseItemCls, {options: args}));
    			theItem.prependTo(this);
    			return theItem;
    		},
    		appendItem: function(args){
    			var theItem = renderItem($('<li></li>').data(baseItemCls, {options: args}));
    			theItem.appendTo(this);
    			return theItem;
    		},
    		removeItem: function(item){
    			return item.remove();
    		},
    		enableItem: function(item){
    			return setDisabled(item, false);
    		},
    		disableItem: function(item){
    			return setDisabled(item, true);
    		},
    		showItem: function(item){
    			return setHidden(item, false);
    		},
    		hideItem: function(item){
    			return setHidden(item, true);
    		}
    	};
    	$.fn[xtype].parseOptions = function(target){
    		return $.extend({}, $.parser.parseOptions(target, [{minWidth:'number',duration:'number',hideOnUnhover:'boolean'}]));
    	};
    	$.fn[xtype].defaults = {
    		zIndex:110000,
    		left: 0,
    		top: 0,
    		alignTo: null,
    		align: 'left',
    		autoShow: false,
    		content: false,
    		minWidth: 100,
    		maxWidth: 400,
    		duration: 100,	// Defines duration time in milliseconds to hide when the mouse leaves the macmenu.
    		hideOnUnhover: false,	// Automatically hides the macmenu when mouse exits it
    		// 事件定义有两种方法
    		// 一是简单的定义函数:onBeforeShow: function(){},
    		// 二是定义一个对象,包含4个属性:
    		// scope指定事件执行的上下文语境
    		// fn事件的函数体
    		// args数组包含传递给fn的所有参数
    		// single布尔值,如为true只执行一次
    		onBeforeShow: function(){return true;},//只有返回值为true,才会show
    		onShow: function(){},
    		onBeforeHide: function(){return true;},//只有返回值为true,才会hide
    		onHide: function(){}
    	};
    })($ || jQuery || window.jQuery, window, document);




    展开全文
  • megamenu.js是一款非常实用的响应式jQuery大型菜单插件。该大型菜单兼容IE8+浏览器,它使用jQuery动画作为过渡效果,并且具有响应式效果,可以无缝和wordpress集成。
  • jquery插件menu效果(一)

    2010-01-19 17:46:35
    jquery插件menu效果(一) 参考页面 http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ 下载demo和代码 http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp_0.1.0.zip 得到文件 ...
  • tuxedo-menu.js是一款实用的jQuery侧边栏菜单插件。它通过animate.css来制作隐藏侧边栏的滑动效果,并且还可以和metisMenu一起结合使用。
  • 是一个通用且简单的插件引擎,用于为浏览器和nodejs创建可扩展且可维护JavaScript应用程序。 动机 如今,Web应用程序变得越来越复杂。 为了分开关注点,使业务逻辑脱钩,应该精心设计大型应用程序。 最佳实践之一是...
  • 这是 d3.js插件,允许您在可视化中轻松使用上下文菜单。 它 100% 基于 d3 并以“d3 方式”完成,因此您无需担心包含其他框架。 它被编写为非常轻巧且可定制。 你可以在这里看到它的实际效果: 使用 Bower 安装 ...
  • 管理着 JavaScript 库,并提供读取和打包它们的工具。 npm:npm 是 JavaScript 的包管理器。官网 Bower:一个 web 应用的包管理器。官网 component:能构建更好 web 应用的客户端包管理器。官网 spm:全新的静态包...
  • 内容索引:脚本资源,jQuery,上下文菜单,jQuery插件 jQuery Context Menu是jQuery上下文菜单插件,用它可以来做带图标的上下文菜单,简单方便。
  • Jquery menu 插件

    千次阅读 2013-10-09 09:29:45
    1.加入script          2.加入css      @import "ui.theme.css...添加顶级按钮,可以是任何元素,menu会在该元素的点击事件触发。  ui-state-default如果你没修改该class-css的话,必须加入该cs
  • mass Framework menu插件

    2012-03-03 18:25:00
    menu插件的结构是基于tabs插件上改进过来的,以后就连tabs插件都会改成这种新的形式。或许过不久,我会将这种结构抽象成一个新的模块,里面提供一个类,让所有UI插件都继承自它。 新插件系统的简述: 插件名即...
  • Pushbar.js是一个很小的javascript插件,用于在Web应用程序中创建滑动抽屉。它是完全可自定义的,并且没有依赖项。您可以将其用作侧边栏菜单或选项抽屉。 新的! [重要提示:用法有较大变化,请参阅下面] 现在变得...
  • Reveal.js的幻灯片菜单插件,标题快速跳转到任何幻灯片。 也可以选择更改主题并设置默认过渡。 安装 凉亭 在您的项目中下载并安装该软件包: bower install reveal.js-menu 如下所示,将插件添加到您的演示文稿中...
  • 菜单管理器 带有 jsTree 的菜单管理器
  • jQuery Context Menu - jQuery上下文菜单插件
  • 一文中使用jQuery插件accordion实现折叠菜单效果,这里介绍另外一个jQuery插件SmoothNavigationalMenu平滑导航菜单实现javascript下拉菜单特效,你不需要编写JS代码,只需要将库文件包含进网页,就可实现javascript...
  • 这是您的祷告的答案,jQuery Slider Menu。 如果您正在查看此内容,那么您正在阅读master分支的文档。 安装 直接下载 在下载脚本并包含它(除非您以其他方式打包脚本): < link href =" /path/to/slider-...
  • jQuery EasyUI 插件-macmenu文档

    千次阅读 2014-12-02 19:20:38
    Menu 通过 $.fn.menu.defaults 重写默认的 defaults。 菜单(Menu)通常用于上下文菜单。它是创建其他菜单组件(比如:menubutton、splitbutton)的基础组件。它也能用于导航和执行命令. 用法 创建菜单(Menu) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,963
精华内容 9,985
关键字:

js插件menu