jquery navi
/// <reference path="../global.js" />
/******************************************************
我的活动左则菜单
edit by yezhi
******************************************************/ YDW.SideNavi = (function () { var instance; function constructor() {
return {
accordion: function () {
var $sb = $('#sidebar');
var $sideNavBlock = $('#sidebar > .sideNav_block');
var $content = $('#content');
//隐藏子菜单
function hideSubmenu() {
$('#sidebar > #sideNav_block > div#ye_accordion > div > ul').hide();
}
function removeTitleClass() {
$('#sidebar > #sideNav_block > div#ye_accordion > div > h3 > a').removeClass('current');
}
function removeSubTitleClass() {
$('#sidebar > #sideNav_block > div#ye_accordion > div > ul > li').removeClass('current');
}
//添加标题右则小三角
function addDownArrow() {
$('#sidebar > #sideNav_block > div#ye_accordion > div > h3').each(function () {
var $ul = $(this).next('ul');
if ($ul.length > 0) {
$(this).append('<span class="dropdownArrow"></span>');
}
});
}
//设置菜单的最小高度
function setSitebarHeight() {
$sideNavBlock.css({ 'min-height': $(document).height() });
}
//为不够权限的菜单添加提示
function addTitleForUnauthorized() {
$('#sidebar > #sideNav_block > div#ye_accordion > div.unauthorized_block > ul > li').attr({ 'title': '此功能要升级为API版本方可使用' });
}
//给主体页添加背景,因左则无素切换不同的同容,只有左则内容为活动的菜单才须要添加该类,其它将移除该类
function addContainerBg() {
//$('.admin_master #content').css({ 'background': 'url(../content/images/admin/menu_bg.jpg) left top ' });
$('.admin_master #content').addClass('contentBg');
}
//初始化
function init() {
addContainerBg();
hideSubmenu();
addDownArrow();
addTitleForUnauthorized();
setSitebarHeight();
} init(); //父标题点击
$('#sidebar > #sideNav_block > div#ye_accordion > div > h3 > a').click(function () {
hideSubmenu();
removeTitleClass();
$(this).addClass('current').parent().next('ul').slideToggle();
return false;
});
//子标题点击
$('#sidebar > #sideNav_block > div#ye_accordion > div:not(".unauthorized_block") > ul > li').click(function () {
removeSubTitleClass();
$(this).addClass('current');
setSitebarHeight();
});
}
};
} return {
getInstance: function () {
if (!instance) {
instance = constructor();
}
return instance;
}
}
})(); (function ($) {
$(function () {
YDW.SideNavi.getInstance().accordion();
});
})(jQuery);
jquery navi的更多相关文章
- JQuery Sizzle引擎源代码分析
最近在拜读艾伦在慕课网上写的JQuery课程,感觉在国内对JQuery代码分析透彻的人没几个能比得过艾伦.有没有吹牛?是不是我说大话了? 什么是Sizzle引擎? 我们经常使用JQuery的选择器查询 ...
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- Web 在线文件管理器学习笔记与总结(6)jQuery UI 预览图片
① 查看文件内容,如果文件是图片类型,点击直接查看图片: ② 如果不是图片类型,显示文件中的内容: ③ 使用 jQuery UI 中的 Dialog 显示图片 a.引入: <script src ...
- 2013年优秀jQuery插件
今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...
- [转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
- 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件
https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件,三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
随机推荐
- jQuery工作原理解析以及源代码示例
jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的.从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.jQuery改变ja ...
- [python]百度语音rest api
百度语音识别提供的api范例只有java, c, php. 如果使用Python, 需要注意: 语音文件长度是指bytes大小 可以通过len(file.read())获得 使用requests.po ...
- Objective-C Http常用API 同步请求与异步请求
开发iOS应用要调用Http接口.获取Http资源,有一套比较成熟的框架ASIHTTPRequest.而我还是比较喜欢使用原始一点的 API,而它跟其他的面向对象语言有许多共通之处.本文分同步请求和异 ...
- java实现双端链表
PS:双端链表(持有对最后一个节点的引用,允许表尾操作与表头操作等效的功能) public class DoubleLinkedList { //节点类 static class Node { pub ...
- STL string常用操作指令
s.insert(pos,args); 在pos之前插入args指定的字符.pos可以是一个下标或一个迭代器.接受下标的版本返回一个指向s的引用;接受迭代器的版本返回指向第一个插入字符的迭代器. s. ...
- cf E. Valera and Queries
http://codeforces.com/contest/369/problem/E 题意:输入n,m; n 代表有多少个线段,m代表有多少个询问点集.每一个询问输出这些点的集合所占的线段的个数. ...
- 装饰者模式 - OK
装饰模式(Decorator),动态地给一个对象添加一些额外的职责,就增加功能来说,装饰模式比生成子类更为灵活. 装饰者模式隐含的是通过一条条装饰链去实现具体对象,每一条装饰链都始于一个Compon ...
- 轻量级开源嵌入式关系数据库sqlite基本使用及接口初识
preface,先闲来扯下蛋: 嵌入式数据库,NoSQL的是BerkeleyDB和InnoDB,leveDb.TC(个人较不熟悉),关系型嵌入式是SQLite; 服务器性质的NoSQL服务器,如Red ...
- android面试题之六
三十一.AIDL的全称是什么?如何工作?能处理哪些类型的数据? 英文全称:Android Interface Define Language(Android接口定义语言). 当A进程要去调用B进程中的 ...
- <php>过时方法连接数据库代码
<?php //1.生成链接 $db_connect = mysql_connect("localhost","root","20982239& ...