日期 2009年3月13日 换公司后的第二天
公司要求用到 JQuery , 以前最它只有一些简单的了解...看来必须好好的学习下才行啊..
今天初步的做了2个菜单效果..实现比较简单..现记录如下:
首先需要对 JQuery 一些基本的选择器用法有一定的了解..
(
注意哦.:都是静态效果的,)
第一个: 树型菜单
1:要准备的包: jquery.js(jquery核心包)
jquery.treeview.js(下载这个树型的plugin)
2:html代码如下,每一个<ul>表示一个父节点,父节点下面每一个平级子节点用<li>标签
<div id="titleDiv" class="titleDiv">
树菜单
</div>
<div id="workDiv" class="workDiv">
<div>
<ul id="tree" class="treeview">
<li>
<a href="?1" >item 1</a>
<ul>
<li>
<a href="?1.0"> item 1.0</a>
<ul>
<li>
<a href="?1.0.0">item 1.0.0</a>
</li>
<li>
<a href="?1.0.1">item 1.0.1</a>
</li>
<li>
<a href="?1.0.2">item 1.0.2</a>
</li>
</ul>
</li>
<li>
<a href="?1.1"> item 1.1</a>
</li>
<li>
<a href="?1.2"> item 1.2</a>
<ul>
<li>
<a href="?1.2.0">item 1.2.0</a>
</li>
<li>
<a href="?1.2.1">item 1.2.1</a>
</li>
<li>
<a href="?1.2.2">item 1.2.2</a>
</li>
<li>
<a href="?1.2.3">item 1.2.3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="?2">item 2</a>
<ul>
<li>
<a href="?2.0">item 2.0</a>
<ul>
<li>
<a href="?2.0.0">item 2.0.0</a>
<ul>
<li>
<a href="?2.0.0.0">item 2.0.0.0</a>
</li>
<li>
<a href="?2.0.0.1">item 2.0.0.1</a>
<ul>
<li>
<a href="?2.0.0.1.0">item 2.0.0.1.0</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="?2.0.1">item 2.0.1</a>
</li>
<li>
<a href="?2.0.2">item 2.0.2</a>
</li>
</ul>
</li>
<li>
<a href="?2.1">item 2.1</a>
</li>
</ul>
</li>
<li>
<a href="?3">item 3</a>
<ul>
<li></li>
</ul>
</li>
</ul>
</div>
<br>
3:JS代码如下:
jQuery(document).ready(function(){
jQuery("#tree").treeview({
collapsed: true,//设置相关参数
animated: "medium",
persist: "location"
});
});
第二个菜单
所需要的包: jquery.js ui.core.js ui.accordion.js
(ui.core 好象是必须在 ui.accordion 前面导入)
jQuery(document).ready(function(){
jQuery("#accodin").accordion({event:"click",alwaysOpen:false,active:""});
});
<div>
<ul id="accodin" class="">
<li>
<a href="#">Test 1</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</li>
<li>
<a href="#">Test 2</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</li>
<li>
<a href="#">Test 3</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur.</div>
</li>
<li>
<a href="#">Test 4</a>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</li>
</ul>
</div>
分享到:
相关推荐
jQuery+css静态下拉导航菜单 jQuery+css静态下拉导航菜单 jQuery+css静态下拉导航菜单 jQuery+css静态下拉导航菜单 jQuery+css静态下拉导航菜单
jquery实现树形菜单deml静态页,简单调用
Jquery实现省市级联,以便实现静态的关联 不过可能有点麻烦
脚本简介:jQuery响应式导航菜单代码是一款基于SuperSlide插件制作的美观大方的商城、网站、官网首页菜单布局、网页网站分类导航菜单,带图片切换展示效果,代码为简单易懂的静态html+css+jquery。
解压有后静态页面可以直接展示效果。右键菜单有2级。里面有个jquerymin.js
【html+css+jquery】仿原神静态官网,使用了HTML+css+js+jQuery:轮播图效果 回到顶部 下拉菜单 tab切换 登录 等等.....
书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 书号:978-7-111-32543-7 定价:59.00元 出版社:机械工业出版社华章公司 出版时间:2011年1月 编辑推荐:...
各种(多个)web导航树菜单 静态 动态 javascript jquery == 多个样式
谁有兴趣的话可以改成动态加载数据,或者用jquery,代码肯定会少很多!...菜单2 2.1 你好 超链接 菜单3 3.1 百度新闻 搜狐新闻 3.2 百度新闻 搜狐新闻 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
基于jQuery的控件源码 1、简简单单右键菜单 一级菜单(每一组菜单)即是一个独立的div容器 每一项又是div,嵌套一个nobr(可用div代替不过要额外写个class)的标签,里面是图标和span包裹的位置内容 2、日期...
用JQuery简单实现的一个静态web表格管理器
基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 Autocomplete输入自动查找功能 结果列表分页展示 允许使用静态json数据源或ajax动态请求的数据源 使用键盘快速操作基本功能及分页功能 多项...
cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。 提供国内省市县数据(数据来源...
Tree(D+Z+X)+JQuery动态生成+右键菜单+参数说明+静态生成 内有文档详解,PPT演示讲解,全部代码加代码注释
很好的jquery菜单,适合初学者来学的,如果你是高手就没必要看了!
在静态页面的基础上添加各种javascript、jquery代码及部分css样式,通过javascript和css的交互功能,实现1号店网页上的各种特效 1、首页特效 网站导航部分的树形菜单 购物车的增减 焦点轮播图 信息列表自动滚动 商品...
本篇文章主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择),具有一定的实用价值,需要的朋友可以参考下
将介绍如何用AngularJS构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。...要实现多级菜单,我们要分两步走,第一步就是把静态菜单的功能实现,通过纯静态的HTML代码
模仿英雄联盟2019年某一段时期的首页效果 实现页面的上半区的页面以及动作效果,结合css3新效果和JQuery的动作,实现菜单的隐藏 显示,菜单的鼠标点击效果,移动效果等