|
 |
| |
Noob : สอบถามเรื่อง jQuery หน่อยคราบ เรื่องการทำเมนูด้วย JSON |
| |
 |
|
|
 |
 |
|
Index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="scripts/ex3.js" type="text/javascript"></script>
<style type="text/css">
#mains
{
float:left;
width:130px;
height:24px;
background:#00ccff;
text-align:center;
}
#sub
{
top:5px;
background:#99ccff;
position:relative;
width:90px;
text-align:center;
}
</style>
<script type="text/javascript">
$(function () {
var tags;
for (j in menus.head) {
tags = '<div id="mains"><a href="#" class="mains">' + menus.head[j].cap + '</a><div id="sub" style="display:none;">';
for (i in menus.head[j].items) {
tags += '<div id="submenu"><a href="' + menus.head[j].items[i].actions + '">' + menus.head[j].items[i].name + '</a></div>';
}
tags += '</div></div>';
$('#mnuMains').append(tags);
}
$('div:#mains').hover(function () {
$(this).children('div#sub').slideDown();
}, function () {
$(this).children('div#sub').slideUp();
});
});
</script>
</head>
<body>
<!--<ul id="mnuMains">
</ul>-->
<div id="mnuMains" />
</body>
</html>
ex3.js
// JavaScript Document
var menus={head:[{cap:"Head1",items:[
{"name":"sub1:item1","actions":"#"},
{"name":"sub1:item2","actions":"#"},
{"name":"sub1:item3","actions":"#"},
{"name":"sub1:item4","actions":"#"},
{"name":"sub1:item5","actions":"#"}
]},
{cap:"Head2",items:[
{"name":"sub2:item1","actions":"#"},
{"name":"sub2:item2","actions":"#"},
{"name":"sub2:item3","actions":"#"},
{"name":"sub2:item4","actions":"#"},
{"name":"sub2:item5","actions":"#"}
]},
{cap:"Head3",items:[
{"name":"sub3:item1","actions":"#"},
{"name":"sub3:item2","actions":"#"},
{"name":"sub3:item3","actions":"#"},
{"name":"sub3:item4","actions":"#"},
{"name":"sub3:item5","actions":"#"}
]}]
};
คือตอนนี้เมนูมันออกแล้วละครับ แต่ว่าเวลาเอาเม้าส์ไปวางแล้วตัว $('#sub') ของเมนูหลักตัวแรกเท่านั้นที่แสดงครับ พอเอาไปวางที่เมนูตัวอื่นมันไม่แสดงเลยครับ รบกวนช่วยดูให้ผมหน่อยครับ ขอบคุณครับ
Tag : jQuery
|
|
|
 |
 |
 |
 |
| Date :
2011-07-20 12:25:07 |
By :
Alice |
View :
695 |
Reply :
0 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
|
| |
|
 Load balance : Server 05
|
