jquery动态菜单,jquery 列表控件
jquery中怎么实现多级菜单动态效果
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
创新互联-专业网站定制、快速模板网站建设、高性价比田东网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式田东网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖田东地区。费用合理售后完善，十年实体公司更值得信赖。
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title我的菜单/title
style
div {
margin:5px;
padding: 5px;
float:right;
width:80%;
background-color:#fff;
}
.menu_container {
float:left;
width:20%;
margin:0 auto;
text-align:left;
}
.level_one_menu {
background-color:#ccc;
}
.level_two_menu {
background-color:#cdd;
display:none;
}
.level_three_menu {
background-color:#dcc;
display:none;
}
/style
script src="js/jquery-1.9.0.js" type="text/javascript"/script
script
$(document).ready(function() {
$('.level_two_menu').bind("click",function(){
$(".level_three_menu",this).toggle();
return false;
})
$('.level_one_menu').bind("click",function(event){
$(".level_two_menu",this).toggle();
event.stopPropagation();
})
$('.level_three_menu').bind("click",function(event){
alert($(this).text());
event.stopPropagation();
})
$('.level_one_menu:eq(0) .level_two_menu').show();
$('.level_two_menu:eq(0) .level_three_menu').show();
});
/script
/head
body
div class="menu_container"
div class="level_one_menu"计算机分类
div class="level_two_menu"编程语言
div class="level_three_menu"Java/div
div class="level_three_menu".net/div
div class="level_three_menu"C/C++/div
div class="level_three_menu"PHP/div
div class="level_three_menu"Python/div
div class="level_three_menu"Javascript/div
div class="level_three_menu"Object-C/div
div class="level_three_menu"Perl/div
div class="level_three_menu"Shell/div
/div
div class="level_two_menu"操作系统
div class="level_three_menu"Linux/div
div class="level_three_menu"Windows/div
div class="level_three_menu"Mac/div
div class="level_three_menu"Unix/div
/div
div class="level_two_menu"数据库
div class="level_three_menu"Mysql/div
div class="level_three_menu"Oracle/div
div class="level_three_menu"DB2/div
div class="level_three_menu"PostgreSQL/div
div class="level_three_menu"MS SQL Server/div
div class="level_three_menu"Sybase/div
/div
/div
div class="level_one_menu"出版社分类
div class="level_two_menu"Addison-Wesley/div
div class="level_two_menu"Apress/div
div class="level_two_menu"Dummies/div
div class="level_two_menu"friendsofED/div
div class="level_two_menu"JohnWiley/div
div class="level_two_menu"Manning/div
div class="level_two_menu"McGraw/div
div class="level_two_menu"NewRiders/div
div class="level_two_menu"NoStarch/div
div class="level_two_menu"OReilly/div
div class="level_two_menu"Packt/div
div class="level_two_menu"Pearson/div
div class="level_two_menu"Pragmatic/div
div class="level_two_menu"Prentice/div
div class="level_two_menu"Que/div
div class="level_two_menu"Sams/div
div class="level_two_menu"SitePoint/div
div class="level_two_menu"SYBEX/div
div class="level_two_menu"Syngress/div
div class="level_two_menu"Wrox/div
/div
div class="level_one_menu"出版日期分类
div class="level_two_menu"2015/div
div class="level_two_menu"2014/div
div class="level_two_menu"2013/div
div class="level_two_menu"2012/div
div class="level_two_menu"2011/div
div class="level_two_menu"2010/div
div class="level_two_menu"2009/div
div class="level_two_menu"2008/div
div class="level_two_menu"2007/div
div class="level_two_menu"2006/div
div class="level_two_menu"2005/div
div class="level_two_menu"2004/div
div class="level_two_menu"2003/div
div class="level_two_menu"2002/div
div class="level_two_menu"2001/div
div class="level_two_menu"2000/div
div class="level_two_menu"2000年之前/div
/div
/div
/body
/html
jquery怎么获取动态生成的树形菜单的属性
首页简单创建一个动态的树
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titleSimpleTree/title
link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/
script type="text/javascript" src="js/jquery-1.6.min.js"/script
script type="text/javascript" src="js/SimpleTree.js"/script
script type="text/javascript"
$(function(){
$(".st_tree").SimpleTree({
click:function(a){
if(!$(a).attr("hasChild"))
alert($(a).attr("ref"));
}
});
});
/script
/head
body
div class="st_tree"
ul
lia href="#" ref="hyjm"欢迎界面/a/li
lia href="#" ref="xtgl"系统管理/a/li
ul show="true"
lia href="#" ref="yhgl"用户管理/a/li
lia href="#" ref="rzck"日志查看/a/li
/ul
lia href="#" ref="ckgl"仓库管理/a/li
ul
lia href="#" ref="kcgl"库存管理/a/li
lia href="#" ref="shgl"收货管理/a/li
lia href="#" ref="fhgl"发货管理/a/li
ul
lia href="#" ref="yhgl"用户管理/a/li
lia href="#" ref="rzck"日志查看/a/li
/ul
/ul
/ul
/div
/body
/html
效果图：
提取如何 获取属性。
用户事件获取
$(function(){
$(".st_tree").SimpleTree({
click:function(a){
if(!$(a).attr("hasChild"))
alert($(a).attr("ref"));
}
});
});
2. 动态维护修改属性 这个时候需要用到each 遍列 + val值判断 设置新属性和读取
jQuery.each($(".st_tree"), function(i, val) { // i 指向键, val指定值
if(val == "xxx"){
// 你可以做读了或重新设置
}
});
jQuery实现两款有动画功能的导航菜单代码
本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下：
这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title两个有动画功能的导航菜单/title
script
src="jquery-1.6.2.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function()
{
$("#test1
a").mouseover(function()
{
var
index
=
$("#test1
a").index(this);
var
width
=
$("#test1
a").width();
$("#test1
.showhover").stop().animate({left:width*index},1000);
})
$("#test2
a").mouseover(function()
{
var
index
=
$("#test2
a").index(this);
var
width
=
$("#test2
a").width();
$("#test2
.showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
})
})
/script
style
type="text/css"
.body
{margin:10px;}
img
{border:0;}
a
{text-decoration:none;}
ul{list-style:none;
margin:0;
padding:0;}
.menu
{background:#003399;
height:25px;
width:600px;
position:relative;
overflow:hidden;}
.menu
.showmenu,
.menu
.showhover{
position:absolute;}
.menu
.showmenu
a
{float:left;
display:block;}
.menu
.showmenu
a
{font:700
12px/25px
Microsoft
YaHei;
color:#fff;
width:100px;
height:25px;
text-align:center;}
.menu
.showhover
{background:#990033;
width:100px;
height:25px;}
/style
/head
body
div
class="menu"
id="test1"
div
class="showhover"/div
div
class="showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
div
style="clear:both;height:50px;"/div
div
class="menu"
id="test2"
div
class="showhover"/div
div
class="showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
/body
/html
希望本文所述对大家的jQuery程序设计有所帮助。
jquery 动态显示左侧菜单栏，用AJAX后台交互，但运行后数据库的类别没有显示出来。求解
$.getJSON("Ajax/JQproc.ashx", function (json) {
$.each(json, function (i) {
$("ul_proc").append("li" + json[i].Name + "/li");
// ####### 这一句错了，$("ul_proc")少了一个# = $("#ul_proc")
})
})
怎么使用ajax或jquery动态刷新下拉菜单里的值
只要检测document和window对象的高度，在一个滚动事件中利用他们的关系约束，触发一个自定义的函数即可实现这是基于
options
，在
options
获取失去焦点事件
或者
下拉项选中事件
重新刷新数据这样做便于控制下拉列表何时显示隐藏，无法取消（我尝试过阻止默认事件，这方面成熟的jquery插件也不少，结果没有反应），所以最好的方法我觉得就是模拟select，自己写一组html替换select，就是说不用select标签，不用担心click的问题首先说下解决方案：function(data){/script.html(data)：{参数名;info"/如果你需要传参数的话;div上边的代码也是对的，我给你写个简洁的.;，但是不够简洁;，可以写在这里,参数名，可能你看不太懂.：$('/);div
id="script，格式为;第一步，使用jquery的ajax技术，将数据读入。相关的函数有$.ajax(),
$.get(),
$.post()$.load()
等函数。使用方法请百度一下，教程非常多。第二步，将读入的数据使用jquer的选择器比如$("#divid").html("这里放入数据")，也可以用$.text()，具体区别请参考$.html()和$.text()的使用方法。另外，jquer还支持读取json数据和script数据，可以将读取的数据直接使用或者执行。具体根据你的需要改变。
jquery怎么样动画显示下拉菜单有哪些方法
animate()
对被选元素应用“自定义”的动画
clearQueue()
对被选元素移除所有排队的函数（仍未运行的）
delay()
对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()
运行被选元素的下一个排队函数
fadeIn()
逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()
逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()
把被选元素逐渐改变至给定的不透明度
hide()
隐藏被选的元素
queue()
显示被选元素的排队函数
show()
显示被选的元素
slideDown()
通过调整高度来滑动显示被选元素
slideToggle()
对被选元素进行滑动隐藏和滑动显示的切换
slideUp()
通过调整高度来滑动隐藏被选元素
stop()
停止在被选元素上运行动画
toggle()
对被选元素进行隐藏和显示的切换
分享文章：jquery动态菜单,jquery 列表控件
转载来源：http://scjbc.cn/article/dsdgcgp.html
