代码拉取完成，页面将自动刷新
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="avalon.js"></script>
<script>
$(function() {
$("#dialog").dialog();
});
</script>
<style>
#menu{
width:700px;
}
.ui-mainmenu{
float: left;
list-style: none;
margin:0px;
padding:0px;
width:100%;
}
.ui-mainmenu-item{
display:inline-block;
padding:0px 20px;
position: relative;
}
.ui-submenu-item{
display:block;
padding:0px 20px;
position: relative;
}
.ui-mainmenu-item a{
display: block;
}
.ui-menu-text{
font-weight: normal;
}
.ui-submenu-item .ui-menu-text{
color:#000;
}
.icon-span{
float:left;
position: absolute;
right:0px;
top:15px;
}
.ui-mainmenu-item a, .ui-submenu-item a{
padding-top:10px;
padding-bottom: 10px;
}
.ui-mainmenu-item a, .ui-mainmenu-item a span, .ui-submenu-item a, .ui-submenu-item a span {
display: block;
text-decoration:none;
}
.ui-mainmenu-item .position-span{
position: relative;
display: block;
height: 1px;
width:1px;
}
.ui-submenu-item .position-span{
display:inline!important;
position: absolute;
top:0px;
right:0px;
}
.ui-menu-hide-son-slider li .ui-submenu-slider{
visibility: hidden;
width:0px;
}
.ui-mainmenu-slider{
position:absolute;
padding-top:2px;
left:0px;
top: -2px;
height:0px;
visibility: hidden;
overflow: hidden;
}
.ui-submenu-slider{
position:absolute;
padding-top:2px;
left:-2px;
top: 0px;
width:0px;
visibility: hidden;
overflow: hidden;
}
.ui-menu-slider ul{
position: absolute;
z-index:1000;
top:-10px;
display: block;
padding:2px;
margin:0px;
}
</style>
<script>
function fix(array) {
for (var i = 0, el; el = array[i]; i++) {
if (typeof el === "string") {
array[i] = {
content: el
}
el = array[i]
}
if (typeof el.href !== "string") {
el.href = "#"
}
el.animate = false
el.elem = {}
el.$skipArray = ["elem", "animate", "href"]
if (typeof el.content !== "string") {
el.content = " "
}
if (avalon.type(el.submenu) !== "array") {
el.submenu = []
} else {
fix(el.submenu)
}
}
return array
}
var model = avalon.define("menu", function(vm) {
vm.array = fix([{content: "aaaa", submenu:
[
{content: "aaaaaaa", submenu: [{content: "dddddddddddd", submenu: ["qqqqq", "ppppp"]}, "eeeeeeeeeeee", "ffffffffff"]},
{content: "bbbbbbbbbbbb", submenu: ["11111111111", "2222222222", "33dd3333"]},
{content: "cccccccccccc", submenu: ["vvvvvvvv", "oooooooooo", "fffffffff"]}
]},
{content: "bbbb", submenu: [{content: "b1", submenu: []}, {content: "b2", submenu: []}]},
{content: "ccc", submenu: ["eddd"]}, "dddd"])
vm.showMain = function(scope, array) {
if (array.lastScope && array.lastScope !== scope && array.lastScope.animate) {
model.hideMain(array.lastScope, 100)
}
if (!scope.animate) {
scope.animate = true
array.lastScope = scope
var slider = document.getElementById("ui-menu-slider-" + scope.$id)
if (slider) {
var h = slider._height + 8
var w = slider._width + 8
slider.style.width = w + "0px"
slider.style.height = "0px"
slider.style.visibility = "visible"
avalon(slider).addClass("ui-menu-hide-son-slider")
var submenu = document.getElementById("submenu-" + scope.$id)
submenu.style.left = "0px"
$(slider).animate({height: h}, 500, function() {
scope.animate = false
slider.style.overflow = "visible"
var icomElem = document.getElementById("icon-" + scope.$id)
if (icomElem)
avalon(icomElem).removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-n")
})
$(submenu).animate({top: 0}, 500)
}
}
}
vm.hideMain = function(scope, time) {
time = time || 250
if (!scope.animate || time !== 250) {
scope.animate = true
var slider = document.getElementById("ui-menu-slider-" + scope.$id)
if (slider) {
var h = slider._height + 8
slider.style.overflow = "hidden"
$(slider).animate({height: 0}, 250, function() {
scope.animate = false
slider.style.visibility = "hidden"
var icomElem = document.getElementById("icon-" + scope.$id)
avalon(slider).addClass("ui-menu-hide-son-slider")
if (icomElem)
avalon(icomElem).removeClass("ui-icon-triangle-1-n").addClass("ui-icon-triangle-1-s")
})
$(document.getElementById("submenu-" + scope.$id)).animate({top: -1 * h}, 250)
}
}
}
vm.showSubmenu = function(scope, array) {
if (array.lastScope && array.lastScope !== scope && array.lastScope.animate) {
model.hideSubmenu(array.lastScope, 100)
}
if (!scope.animate) {
scope.animate = true
array.lastScope = scope
var slider = document.getElementById("ui-menu-slider-" + scope.$id)
if (slider) {
var h = slider._height + 8
var w = slider._width + 8
slider.style.width = "0px"
slider.style.height = h + "px"
slider.style.visibility = "visible"
$(slider).parents(".ui-menu-hide-son-slider").removeClass("ui-menu-hide-son-slider")
avalon(slider).addClass("ui-menu-hide-son-slider")
var submenu = document.getElementById("submenu-" + scope.$id)
submenu.style.top = "0px"
$(slider).animate({width: w}, 500, function() {
scope.animate = false
slider.style.overflow = "visible"
})
$(document.getElementById("submenu-" + scope.$id)).animate({left: 0}, 500)
}
}
}
vm.hideSubmenu = function(scope, time) {
time = time || 250
if (!scope.animate || time !== 250) {
scope.animate = true
var slider = document.getElementById("ui-menu-slider-" + scope.$id)
if (slider) {
var w = slider._width + 8
slider.style.overflow = "hidden"
$(slider).animate({width: 0}, 250, function() {
scope.animate = false
slider.style.visibility = "hidden"
})
$(document.getElementById("submenu-" + scope.$id)).animate({left: -1 * w}, 250)
}
}
}
vm.renderSubmenu = function() {
var height = this.offsetHeight;
var width = this.offsetWidth;
this.style.top = -1 * height + "px"
this.style.left = -1 * width + "px"
this.style.width = width + "px"
this.style.height = height + "px"
this.parentNode._width = width
this.parentNode._height = height
}
vm.processTemplate = function(text) {
var REPLACE = avalon(this).data("name")
var SUBSTITUTE = "avalon" + Math.random().toString(36).substring(2, 15)
var ret = text.replace(/PARENTITEM/g, REPLACE).replace(/SONITEM/g, SUBSTITUTE)
return ret
}
})
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<noscript id="submenutmpl">
<ul class="ui-submenu ui-corner-all ui-widget-content"
ms-attr-id="submenu-{{PARENTITEM.$id}}"
ms-each-SONITEM="PARENTITEM.submenu"
data-each-rendered="renderSubmenu" >
<li class="ui-submenu-item ui-corner-all" ms-hover='ui-state-hover' ms-mouseenter="showSubmenu(SONITEM, PARENTITEM.submenu)" ms-mouseleave="hideSubmenu(SONITEM)" ms-data-vm="SONITEM">
<a href="javascript:void(0)" tabindex="-1" class="ui-helper-clearfix" >
<table>
<tr>
<td class="ui-menu-text">
{{SONITEM.content}}
</td>
<td>
<span ms-if='SONITEM.submenu.length' class=" ui-icon ui-icon-triangle-1-e">
</span>
</td>
</tr>
</table>
</a>
<span class="position-span">
<div ms-if="SONITEM.submenu.length"
ms-attr-id="ui-menu-slider-{{SONITEM.$id}}"
class="ui-menu-slider ui-submenu-slider" ms-include="'submenutmpl'" ms-data-name="'SONITEM'" data-include-loaded="processTemplate">
</div>
</span>
</li>
</ul>
</noscript>
<div ms-controller="menu" id="menu" class="ui-widget ui-helper-clearfix ">
<ul class="ui-widget-header ui-mainmenu ui-corner-all" ms-each="array" >
<li class="ui-mainmenu-item" ms-mouseenter="showMain(el,array)" ms-mouseleave="hideMain(el)" ms-data-vm="el">
<a href="javascript:void(0)" tabindex="-1" class="ui-helper-clearfix" >
<table>
<tr>
<td class="ui-menu-text">
{{el.content}}
</td> <td>
<span ms-if='el.submenu.length' class="ui-icon ui-icon-triangle-1-s" ms-attr-id="icon-{{el.$id}}">
</span>
</td>
</tr>
</table>
</a>
<span class="position-span">
<div ms-if="el.submenu.length"
ms-attr-id="ui-menu-slider-{{el.$id}}"
class="ui-menu-slider ui-mainmenu-slider" ms-include="'submenutmpl'" ms-data-name="'el'" data-include-loaded="processTemplate">
</div>
</span>
<!-- -->
</li>
</ul>
</div>
如何在avalon中选取元素，由于avalon没有选择器引擎，我们可以使用一个取巧的方法，在绑定时，为目标元素设置ms-attr-id="xxxx{{el.$id}}"，然后你可以使用getElementById迅速定位它了。
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手