forked from RubyLouvre/avalon.oniui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (208 loc) · 9.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="xjb_html">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>去哪儿avalon ui</title>
<link type="text/css" rel="stylesheet" href="./style/avalon.doc.css" />
<link type="text/css" rel="stylesheet" href="./style/avalon.index.css" />
<script src="avalon.js"></script>
<script src="./pages/library/history.js"></script>
<script src="./highlight/shCore.js"></script>
<link rel=stylesheet type=text/css href="pages/timeline/css/base.css"/>
<script>
var page = avalon.define("pages", function(vm) {
vm.pages = [{
title: "组件库",
href: "pages/library/index.html"
}, {
title: "组件概览",
href: "pages/timeline/index.html"
}, {
title: "APIs",
href: "pages/apis/index.html"
}, {
title: "下载",
href: "pages/download/index.html"
}
]
vm.changeActiveIndex = function(index) {
vm.activeIndex = index
}
vm.activeIndex = 0
vm.computeActiveIndex = function(url) {
var url = url || location.hash.replace(/#/g, "");
for (var i = 0, len = page.pages.length; i < len; i++) {
if (page.pages[i].href === url) {
return i;
}
}
return 0
}
vm.searchComponentKey = ""
vm.searchComponent = function() {
_findComponent(vm.searchComponentKey)
}
vm.searchFocus = function() {
avalon.bind(document, "keypress", function(e) {
var currKey = 0,
e = e || event;
if (e.keyCode == 13) {
_findComponent(vm.searchComponentKey)
}
})
}
vm.searchFailVisible = 0
vm.searchLastVisible = 0
})
page.activeIndex = page.computeActiveIndex()
require(["uptop/avalon.uptop", "ready!"], function() {
avalon.define("oniui_uptop", function(vm) {
vm.width = 120,
vm.animate = true
})
})
//搜索框输入后清空结果列表
page.$watch("searchComponentKey", function() {
searchResultList = []
})
//搜索組件
var searchResultList = [] //搜索结果列表
function _findComponent(key) {
var list = document.getElementById("ui-list"), //find "ui-list" in pages/library/index.html
items = list.getElementsByTagName("a")
for (var i = 0, len = items.length; i < len; i++) {
if (items[i].innerHTML.trim().indexOf(key) !== -1 || _findInAdvice(items[i].innerHTML.trim()).indexOf(key) !== -1) {
_selectElement(items[i])
scroll(0, items[i].offsetTop)
if (searchResultList.indexOf(i) === -1) {
searchResultList.push(i)
return
}
}
//最后一个了
if (i === len - 1 && searchResultList.length !== 0) {
searchResultList = []
page.searchLastVisible = 1
setTimeout(function() {
page.searchLastVisible = 0
}, 2000)
return
}
page.searchTipVisible = 1
setTimeout(function() {
page.searchTipVisible = 0
}, 2000)
}
//未找到组件
page.searchFailVisible = 1
setTimeout(function() {
page.searchFailVisible = 0
}, 2000)
}
function _findInAdvice(componentName) {
var advices = {
"accordion": "手风琴组件",
"at": "@组件",
"browser": "浏览器检测模块",
"button": "按钮组件",
"camera": "百叶窗图片轮播组件",
"carousel": "轮播组件/跑马灯组件",
"checkboxlist": "复选框列表组件",
"colorpicker": "颜色选择器组件/取色器组件",
"cookie": "cookie工具集组件",
"coupledatepicker": "日期范围选择的双日历组件",
"datepicker": "日期选择器组件",
"daterangepicker": "日期范围选择日历组件",
"dialog": "对话框弹窗组件",
"doublelist": "平衡木组件/左右列表组件/双列表组件",
"draggable": "拖拽组件/可拖动组件",
"dropdown": "下拉框组件",
"flipswitch": "滑动式开关组件",
"lazyload": "懒加载组件",
"live": "事件代理绑定组件",
"loading": "加载动画效果组件",
"menu": "菜单组件",
"miniswitch": "下拉式开关组件",
"notice": "提示组件/提示信息组件",
"pager": "分页组件",
"position": "定位组件",
"preview": "图片预览组件/图片批量预览组件",
"progressbar": "进度条组件/倒计时组件",
"promise": "异步列队组件",
"rating": "评分组件",
"resizable": "伸缩组件",
"scrollbar": "滚动条组件",
"scrollspy": "滚动监听组件",
"simplegrid": "表格组件/大数据展示组件",
"slider": "滑块组件",
"spinner": "数字输入框组件",
"store": "本地储存组件",
"switchdropdown": "切换下拉框组件",
"tab": "选项卡组件/标签页组件",
"textbox": "提示功能的输入框组件",
"timer": "时间选择器组件",
"tooltip": "气泡提示组件",
"uploader": "图片上传组件/文件上传组件",
"validation": "验证组件"
}
if (typeof advices[componentName] !== "undefined") {
return advices[componentName]
} else {
return ""
}
}
//选中文字
function _selectElement(element) {
if (window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
var range = document.createRange();
range.selectNodeContents(element);
sel.addRange(range);
} else if (document.selection) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(element);
textRange.select();
}
}
</script>
</head>
<body class="ms-controller" ms-controller="pages" ms-uptop data-uptop-background-url="uptop/up_green.png" >
<div class="header">
<div class="fix">
<div id="nav" class="nav">
<a class="logo" ms-href='{{ location.href.indexOf("localhost") !== -1 ? "/avalon/index.html": "/oniui/index.html"}}'></a>
<ul id="oniui_component_list">
<li ms-repeat-page="pages" ms-class="active: $index == activeIndex" ms-click="changeActiveIndex($index)">
<a ms-href="#{{page.href}}" >{{page.title | html}}</a>
</li>
</ul>
<div class="search">
<span class="search-tip" ms-css-opacity="{{searchFailVisible}}">未找到组件</span>
<span class="search-tip" ms-css-opacity="{{searchLastVisible}}">最后一个了</span>
<input type="text"
placeholder="组件名或中文关键字..."
ms-duplex="searchComponentKey"
ms-focus="searchFocus"/>
<a href="javascript:void(0);" ms-click="searchComponent"></a>
</div>
</div>
</div>
<div class="placeHolder"></div>
<h1 id="avalon_oniui_banner"><span>Avalon新一代UI库： OniUI</span></h1>
</div>
<div class="content" ms-class="content{{activeIndex}}">
<div ms-repeat-page="pages" ms-if-loop="$index == activeIndex" ms-include-src="page.href"><!--页面位于pages文件夹下面--></div>
</div>
<div class="footer">
<ul>
<li><a href="#">关于AvalonUI</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">业务合作</a></li>
<li><a href="#">常见问题</a></li>
<li class="last"><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>