极客教程jQuery UI菜单
jQuery UI中的菜单部件创建了一个菜单，其中包含了与菜单上特定项目相关的子菜单中的项目和子项目。菜单项使用标记元素创建，使用类似父子的关系，可以使用列表和嵌套列表来创建。每个菜单项一般对应于一个特定的页面，因此这些元素中的每一个都在一个锚定标签之间。
语法:
$(selector, context).menu(options)
你可以使用一个JavaScript对象一次提供一个或多个选项。
如果要提供一个以上的选择，那么你可以用逗号来分隔它们，如下所示
$(selector, context).menu ("action", params)
对于导航，我们可以通过使用jQuery UI创建一个菜单。我们可以通过使用菜单来创建一个主菜单和子菜单。我们将在HTML中创建一个列表和子列表，这将被用来使用jQuery UI创建菜单。
- 菜单的宽度。根据你的布局和风格，菜单可能采取不同的宽度，我们可能需要调整宽度，所以我们可以在头部标签内保持这个风格属性。
示例1:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body>
<br><br>
<ul id='my_cs_menu'>
<li>
<div>Networking</div>
</li>
<li>
<div>Office Mgmt</div>
<ul>
<li>
<div>Word</div>
</li>
<li>
<div>Excel</div>
</li>
<li>
<div>Power Point</div>
</li>
<li>
<div>Access</div>
</li>
</ul>
</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>PHP</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>JSP</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Games</div>
</li>
</ul>
<script>
(document).ready(function() {
("#my_cs_menu").menu();
})
</script>
</body>
</html>
- 禁用菜单。我们可以通过使用disable选项来禁用一个菜单，并将其值设置为true。默认情况下，该值被设置为false。
示例2:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body>
<br><br>
<ul id='my_cs_menu'>
<li>
<div>Networking</div>
</li>
<li>
<div>Office Mgmt</div>
<ul>
<li>
<div>Word</div>
</li>
<li>
<div>Excel</div>
</li>
<li>
<div>Power Point</div>
</li>
<li>
<div>Access</div>
</li>
</ul>
</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>PHP</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>JSP</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Games</div>
</li>
</ul>
<script>
(document).ready(function() {
("#my_cs_menu").menu({
disabled: true
});
})
</script>
</body>
</html>
- icon。为了从主菜单指向子菜单，我们可以使用图标。我们可以根据自己的选择来改变图标。我们可以指定其他的值，比如。
ui-icon-circle-triangle-e, ui-icon-arrow-1-e, ui-icon-arrowthick-1-e, ui-icon-triangle-1-e。
示例3:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body>
<ul id='my_cs_menu'>
<li>
<div>Networking</div>
</li>
<li>
<div>Office Mgmt</div>
<ul>
<li>
<div>Word</div>
</li>
<li>
<div>Excel</div>
</li>
<li>
<div>Power Point</div>
</li>
<li>
<div>Access</div>
</li>
</ul>
</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>PHP</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>JSP</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Games</div>
</li>
</ul>
<script>
(document).ready(function() {
("#my_cs_menu").menu({
menus: 'ul'
});
})
</script>
</body>
</html>
- menu。我们可以为菜单元素设置选择器。默认情况下，它是
ul，我们可以把这个值改为其他元素，如div。
注意：输出将保持与例2相同。
示例4:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body>
<ul id='my_cs_menu'>
<li>
<div>Networking</div>
</li>
<li>
<div>Office Mgmt</div>
<ul>
<li>
<div>Word</div>
</li>
<li>
<div>Excel</div>
</li>
<li>
<div>Power Point</div>
</li>
<li>
<div>Access</div>
</li>
</ul>
</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>PHP</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>JSP</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Games</div>
</li>
</ul>
<script>
(document).ready(function() {
("#my_cs_menu").menu({
menus: 'ul'
});
})
</script>
</body>
</html>
- 菜单中的位置。我们可以通过设置位置值来设置子菜单相对于主菜单的位置。
这里我们用这个位置值来设置子菜单列表的位置。
position: { my: "left bottom", at: "right top" }
- my: 这是工具提示框。
- at: 显示工具提示的元素。
- 所有的水平对齐可以采取三个位置。左边，右边或中间。
- 所有的垂直对齐可以采取三个位置。上方或下方或中央。
示例5:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body>
<br><br><br><br><br><br>
<ul id='my_cs_menu'>
<li>
<div>Networking</div>
</li>
<li>
<div>Office Mgmt</div>
<ul>
<li>
<div>Word</div>
</li>
<li>
<div>Excel</div>
</li>
<li>
<div>Power Point</div>
</li>
<li>
<div>Access</div>
</li>
</ul>
</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>PHP</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>JSP</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Games</div>
</li>
</ul>
<script>
(document).ready(function() {
("#my_cs_menu").menu({
position: {
my: "left bottom",
at: "right top"
}
});
})
</script>
</body>
</html>
- Blur：我们可以通过将任何脚本与菜单的模糊方法相关联来触发它。在下面的例子中，我们将通过使用模糊方法收集我们刚刚移出的元素的名称。
示例6:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body>
<br><br><br><br>
<div id=display></div>
<br><br>
<ul id='my_cs_menu'>
<li>
<div>Networking</div>
</li>
<li>
<div>Office Mgmt</div>
<ul>
<li>
<div>Word</div>
</li>
<li>
<div>Excel</div>
</li>
<li>
<div>Power Point</div>
</li>
<li>
<div>Access</div>
</li>
</ul>
</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>PHP</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>JSP</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Games</div>
</li>
</ul>
<script>
(document).ready(function() {
("#my_cs_menu").menu({
blur: function(event, ui) {
$('#display').html(" <b>Moved From: </b>"
+ ui.item.text());
}
});
})
</script>
</body>
</html>
- Destroy。我们可以应用destroy事件，删除菜单的功能，并通过使用单选按钮的点击事件再次启动菜单。
示例7:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body>
<br><br><br><br>
<div id=display>Display here</div>
<br><br>
<input type='radio'
name='r_select'
id='r2'
value='destroy'>destroy
<input type='radio'
name='r_select'
id='r2'
value='initialize'>initialize
<br>
<div id=display></div>
<br><br>
<ul id='my_cs_menu'>
<li>
<div>Networking</div>
</li>
<li>
<div>Office Mgmt</div>
<ul>
<li>
<div>Word</div>
</li>
<li>
<div>Excel</div>
</li>
<li>
<div>Power Point</div>
</li>
<li>
<div>Access</div>
</li>
</ul>
</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>PHP</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>JSP</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Games</div>
</li>
</ul>
<script>
(document).ready(function() {
("#my_cs_menu").menu({
});
("input:radio[name=r_select]").click(function() {
var selection =(this).val()
if (selection == 'destroy') {
("#my_cs_menu").menu(selection);
('#display').html(
" <b>destroy method invoked</b>");
}
if (selection == 'initialize') {
("#my_cs_menu").menu();
('#display').html(
" <b>Menu Initialized</b>");
}
})
})
</script>
</body>
</html>