jdmenu-demo.html
来自「通过采用jquery组件和ajax技术实现菜单」· HTML 代码 · 共 220 行
HTML
220 行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jdMenu 1.3.beta2</title>
<script src="jquery-1.1.2.js" type="text/javascript"></script>
<script src="jquery.bgiframe.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.jdMenu.js" type="text/javascript"></script>
<script type="text/javascript">
// Initialization, you can leave this here or move this somewhere else
$(function(){
$('ul.jd_menu').jdMenu({ onShow: loadMenu
//onHideCheck: onHideCheckMenu,
//onHide: onHideMenu,
//onClick: onClickMenu,
//onAnimate: onAnimate
});
$('ul.jd_menu_vertical').jdMenu({onShow: loadMenu, onHide: unloadMenu, offset: 1, onAnimate: onAnimate});
});
function onAnimate(show) {
//$(this).fadeIn('slow').show();
if (show) {
$(this)
.css('visibility', 'hidden').show()
.css('width', $(this).innerWidth())
.hide().css('visibility', 'visible')
.fadeIn('normal');
} else {
$(this).fadeOut('fast');
}
}
var MENU_COUNTER = 1;
function loadMenu() {
if (this.id == 'dynamicMenu') {
$('> ul > li', this).remove();
var ul = $('<ul></ul>');
var t = MENU_COUNTER + 10;
for (; MENU_COUNTER < t; MENU_COUNTER++) {
$('> ul', this).append('<li>Item ' + MENU_COUNTER + '</li>');
}
}
}
function unloadMenu() {
if (MENU_COUNTER >= 30) {
MENU_COUNTER = 1;
}
}
// We're passed a UL
function onHideCheckMenu() {
return !$(this).parent().is('.LOCKED');
}
// We're passed a LI
function onClickMenu() {
$(this).toggleClass('LOCKED');
return true;
}
</script>
<link rel="stylesheet" href="jdMenu.css" type="text/css" />
<link rel="stylesheet" href="jdMenu.slate.css" type="text/css" />
<style type="text/css">
body {
margin: 0px;
padding: 25px;
font-family: sans-serif;
font-size: small;
}
h1 {
font-family: sans-serif;
color: #0068B8;
}
li.LOCKED {
font-weight: bold;
}
body {
margin: 0px;
margin-left: 15px;
}
</style>
</head>
<body>
<h1>jdMenu 1.3.beta2</h1>
A normal positioned menu
<ul class="jd_menu jd_menu_slate">
<li id="dynamicMenu">Dynamic Menu
<ul><li>Loading...</li></ul>
</li>
<li><a href="http://jquery.com" class="accessible">jQuery</a>
<ul>
<li><a href="http://jquery.com" target="_blank">jQuery.com</a></li>
<li><a href="http://docs.jquery.com">jQuery Docs</a></li>
<li><a href="http://jquery.com/plugins/">jQuery Plugins</a></li>
<li><a href="http://www.visualjquery.com">Visual Jquery</a></li>
</ul>
</li>
<li><a href="http://jdsharp.us" class="accessible">jd Sharp</a>
<ul style="width: 400px;">
<li>AutoScroll Plugin for jQuery</li>
<li><a href="#">jdMenu Plugin for jQuery</a></li>
<li><div style="width: 200px;">Sub sub</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul style="width: 600px;">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</li>
</ul>
</li>
<li id="s4">Another List Item</li>
</ul>
</li>
</ul>
<div id="content">
<select style="width: 80%;"><option>A really long select box to test IE's "Feature"</option></select>
<p>
Lorem ipsum dolor sit amet, con sectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in foo.
</p>
<p>
An absolutely positioned menu
</p>
<ul class="jd_menu jd_menu_slate" style="position: absolute; left: 100px; top: 250px; width: 400px;">
<li>Item One »
<ul>
<li>Item One »
<ul>
<li>Item One »
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</li>
<li>Item Two »
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</li>
<li>Item Three »
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</li>
</ul>
<div style="height: 200px;"> </div>
<p>A vertical menu</p>
<ul class="jd_menu_vertical jd_menu_slate">
<li id="dynamicMenu">Dynamic Menu
<ul></ul>
</li>
<li>jQuery
<ul>
<li><a href="http://jquery.com" target="_blank">jQuery.com</a></li>
<li><a href="http://docs.jquery.com">jQuery Docs</a></li>
<li><a href="http://jquery.com/plugins/">jQuery Plugins</a></li>
<li><a href="http://www.visualjquery.com">Visual Jquery</a></li>
</ul>
</li>
<li>jd Sharp
<ul style="width: 400px;">
<li>AutoScroll Plugin for jQuery</li>
<li>jdMenu Plugin for jQuery</li>
<li>Sub sub
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
</li>
</ul>
<div style="width: 2000px; height: 800px; background-color: #EFEFEF; border: 1px solid #404040;">
This div to provide content so you can scroll and test menu positioning
</div>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?