用Jquery 仿VS 样式的 导航栏插件
在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个。
由于前台用JQuery开发, 想到网上很多人用JQuery做插件,开发起来很方便。于是呼,我也照猫画虎地瞎做一个,限本人文采水平一般,只能贴代码共享。
效果图:
代码:
/*
* toolsTags 0.1
* Copyright (c) 2014 www.xacf.com YeHui 叶辉
* Date: 2014-8-4
* JQuery 插件 支持JQuery 1.3.2 和1.10.2
* 仿VS 左侧工具导航栏样式的菜单工具栏插件。
*/
var toolsTag = {
toolsTags: [
{ title: "导航1", cative: 1 },
{ title: "导航2", cative: 0 },
{ title: "导航3", cative: 0 }
]
};
(function ($) {
var ver = $.fn.jquery;
$.fn.toolsTags = function (options) {
var defaults = {
data: toolsTag
}, options = $.extend(defaults, options),
tags = [],
contents = [],
tagName = "#tag",
contentName = "#toolsContent",
activeToolsIndex = 0; var uld = $('<ul />', {
id: "toolsTags"
}).appendTo("#tools_layout").addClass("t_toolsTags");
if (ver === "1.3.2")
uld.attr("id", "toolsTags"); if (options.data.toolsTags && $.isArray(options.data.toolsTags)) {
$.each(options.data.toolsTags, function (i, val) {
var lid = $('<li />', {
id: "tag" + i,
html: val.title,
tabIndex: i
}).appendTo("#toolsTags"); var divD = $('<div />', {
id: "toolsContent" + i
}).appendTo("#tools_layout").addClass("t_toolsContent"); tags.push(tagName + i);
contents.push(contentName + i); if (ver === "1.3.2") {
lid.attr("id", "tag" + i).html(val.title);
lid.attr("tabIndex", i);
divD.attr("id", "toolsContent" + i);
} if (val.cative === 1) {
$("#tag" + i).addClass("i_active");
$("#toolsContent" + i).addClass("t_contentActive");
}
});
};
$.each(tags, function (i, val) { $(val).click(function (e) {
tags_SetActive();
var index = e.target.tabIndex; $(tags[index]).addClass("i_active");
$(contents[index]).addClass("t_contentActive");
activeToolsIndex = index;
}); $(val).mouseover(function (e) {
$.each(tags, function (i, val) {
$(tags[i]).removeClass("i_active");
});
var index = e.target.tabIndex;
$(tags[index]).addClass("i_active");
});
$(val).mouseout(function (e) {
$.each(tags, function (i, val) {
$(tags[i]).removeClass("i_active");
});
$(tags[activeToolsIndex]).addClass("i_active");
});
}); function tags_SetActive() {
$.each(tags, function (i, val) {
$(tags[i]).removeClass("i_active");
});
$.each(contents, function (i, val) {
$(contents[i]).removeClass("t_contentActive");
});
}
};
})(jQuery);
HTML
<div id="tools_layout">
</div> <script type="text/javascript"> $().toolsTags();
$("#toolsContent1").html("导航栏二中的菜单项");
</script>
CSS 样式表
html, body, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, caption, th, td, img, form, fieldset, legend, input, label, button, textarea {
margin: 0;
padding: 0;
} html, body {
font-family: Arial,SimSun;
font-size: 14px;
font: normal 12px/14px SimSun,arial;
} ul {
list-style: none;
} #tools_layout {
width: 260px;
margin: 0 auto;
} .t_toolsTags {
position: absolute;
left: 0;
z-index: 9;
border-right: 2px solid #3BB1A3;
background-color: #3BB1A9;
width: 25px;
height: 100%;
} .t_toolsTags li {
width: 100%;
_min-height: 100px;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
line-height: 120%;
text-align: center;
cursor: pointer;
margin-bottom: 2px;
font-family: SimSun;
font-size: 14px;
} .t_toolsTags li,
.t_toolsTags li.i_active {
margin-left: 0px;
padding-left: 2px;
} .t_toolsTags li {
background-color: #218175;
} .t_toolsTags li.i_active {
background-color: #dcf8fa;
} .t_toolsContent {
left: 0;
margin-left: 27px;
height: 100%;
border-right: 2px solid #00ff21;
width: 180px;
background-color: #dcf8fa;
position: absolute;
display: none;
padding-left: 5px;
} .t_contentActive {
display: block;
} .hrtest {
height: 5px;
width: 100%;
border-top: 1px solid red;
border-left: none;
border-right: none;
border-bottom: none;
}
用Jquery 仿VS 样式的 导航栏插件的更多相关文章
- 利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)
利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录) 作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...
- jquery自定义插件-参数化配置多级菜单导航栏插件
1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...
- jQuery仿Android锁屏图案应用插件
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- (转)jquery仿天猫商城左侧导航菜单
原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
- 一款基于的jQuery仿苹果样式焦点图插件
这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- jQuery实现鼠标滑过导航栏呈现不同的样式
素材图片 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
随机推荐
- StopWatch的用法
在学习spring的时候,看到关于统计时间的类,比较好奇,就记录下来,以便以后用到可以直接使用 org.springframework.util.StopWatch StopWatch该类在统计时间的 ...
- 转载:JAVA 正则表达式 (超详细)
在Sun的JavaJDK 1.40版本中,Java自带了支持正则表达式的包,本文就抛砖引玉地介绍了如何使用Java.util.regex包. 可粗略估计一下,除了偶尔用Linux的外,其他Linu x ...
- Android Studio学习随笔-UI线程阻塞以及优化
我们在使用手机的时候,经常会遇到一个问题:先是卡死,然后跳出该程序无响应,是否关闭的提示(当然有可能是我们手机性能太差=.=)这是因为线程的阻塞引起的,在这里我讲述一下UI线程,一般处理程序会在UI线 ...
- sizeToFit的用法和用途
最近有遇到过sizeToFit的方法,比较好奇,所以查了点资料 在官方文档中 - (void)sizeToFit; // calls sizeThatFits: with current view b ...
- 在Weex中定制自定义组件
1.配置自定义组件 public class MyViewComponent extends WXComponent{ public MyViewComponent(WXSDKInstance ins ...
- 彻底删除mysql的方法(有隐藏文件)
1.建议使用360进行卸载,可以彻底卸载软件 2.360会提醒删除注册表 3.这个隐藏文件要删除掉 在 C:\Documents and Settings\ 路径下搜索 MySQL 文件夹(默认隐藏的 ...
- Java中View游戏开发框架
java中游戏开发引擎View比较适合被动触发的游戏,不能使用于那种对战的游戏 Game01Activity.java 这里是调用的activity package cn.sun.syspro; i ...
- mvc4+jquerymobile页面加载时无法绑定事件
问题:在view里写js,在页面第一次加载完成后,无法触发事件, 如:按钮click事件,已经在$(function(){ 添加了click });但就是无法触发,必须刷新下才可以. 原因分析: 主 ...
- Deep Learning 学习随记(五)Deep network 深度网络
这一个多周忙别的事去了,忙完了,接着看讲义~ 这章讲的是深度网络(Deep Network).前面讲了自学习网络,通过稀疏自编码和一个logistic回归或者softmax回归连接,显然是3层的.而这 ...
- 设置css三种方法的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...