-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
174 lines (152 loc) · 8.06 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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>webapp实现通讯录首字母滑动</title>
<meta name="keywords" content="css, xhtml designer, web design, webdesign, webdesigner, web designer, design, xhtml, css, psd, Manchester, England, London, izmir, Turkey" />
<meta name="description" content="I design interfaces for web, mobile, desktop applications and I believe in simplicity in design, technology and life..." />
<meta name="robots" content="index, follow" />
<meta name="author" content="I am iPing, iPing_FM.">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Access-Control-Allow-Origin" content="http://www.baidu.com:80">
<link rel="shortcut icon" href="logo.ico" type="image/x-icon"/>
<!--
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
-->
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="page-home">
<header>
<h1>iScrollContact.js</h1>
<h2>webapp
<br>一个Javascript库, 允许您创建一个类似通讯录首字母滑动的效果
<br>依赖 <a href="http://jQuery.com" target="_blank">jQuery</a> & <a href="http://cubiq.org/iscroll-4" target="_blank">iScroll</a>
<br>灵感来自苹果手机通讯录
<br>制作: <a href="http://bluemughtml5.com" target="_blank">蓝杯子HTML5工作室</a></h2>
<a href="https://github.com/ipingfm/iScrollContact.js" target="_blank">Download on Github</a>
</header>
<!-- example -->
<section class="example">
<h3>实例</h3>
<p class="gap">将您的鼠移到实例右边的字母上下滑动</p>
<div class="example-img">
<img src="images/bkg_block2.png">
</div>
</section>
<section class="usage">
<h3>用法</h3>
<p class="gap">内容页面的目标元素(elements:#ID)调用iScroll( )方法<br>它创造了必要的HTML元素在内容页面<br>右边操作元素(elements:#ID)调用iScrollContact( )方法<br>使用HTML 5新标签和CSS 3最新标准<br></p>
<ul>
<li>
<p>引用库</p>
<code>
<p><span class="gold"><!-- call require js --></span></p>
<p><<span class="red">script</span> <span class="green">src</span>=<span class="yellow">"js/lib/require.js"</span> <span class="green">defer async</span>=<span class="yellow">"true"</span> <span class="green">data-main</span>=<span class="yellow">"js/index"</span>></<span class="red">script</span>></p><br />
<p>require.config({</p>
<p class="tab"> baseUrl: <span class="yellow">"js/",</p>
<p class="tab"> paths: {</p>
<p class="tab2"> <span class="yellow">"jquery"</span>: <span class="yellow">"libs/jquery203"</span>,</p>
<p class="tab2"> <span class="yellow">"iScroll"</span>: <span class="yellow">"libs/iScroll425"</span>,</p>
<p class="tab2"> <span class="yellow">"iScrollContact"</span>:<span class="yellow"> "iScrollContact"</span></p>
<p class="tab"> },</p>
<p class="tab"><span class="gold"> /*iScrollContact.js符合AMD规范，才可以调用*/</span></p>
<p class="tab"> shim: {</p>
<p class="tab2"> <span class="yellow">'iScroll'</span>: {</p>
<p class="tab2"> exports: <span class="yellow">'iScroll'</span></p>
<p class="tab2"> },</p>
<p class="tab2"> <span class="yellow">'iScrollContact'</span>: {</p>
<p class="tab2"> deps: [<span class="yellow">'iScroll'</span>],</p>
<p class="tab2"> exports: <span class="yellow">'iScrollContact'</span></p>
<p class="tab2"> }</p>
<p class="tab"> } </p>
<p>});</p>
</code>
</li>
<li>
<p>HTML</p>
<code>
<p><span class="gold"><!-- dom elements --></span></p>
<p><<span class="yellow">ul id=</span><span class="lgreen">"abc-tab3"</span>></<span class="yellow">ul</span>></p><br>
<p><<span class="yellow">div id=</span><span class="lgreen">"roll-tips-tab3"</span>></p>
<p class="tab"><<span class="yellow">p id=</span><span class="lgreen">"roll-tips-tab3-p"</span>></<span class="yellow">p</span>></p>
<p></<span class="yellow">div</span>></p><br>
<p><<span class="yellow">div id=</span><span class="lgreen">"wrapper-tab3"</span>></<span class="yellow">div</span>></p>
</code>
</li>
<li>
<p>CSS</p>
<code>
<p><span class="yellow">.sticker</span> {</p>
<p class="tab"><span class="blue">width</span>: <span class="lgreen">180</span><span class="green">px</span>;</p>
<p class="tab"><span class="blue">height</span>: <span class="lgreen">180</span><span class="green">px</span>;</p>
}</p><br>
<p><span class="gold">// add image</span></p>
<p><span class="yellow">.example-1 .sticker-img</span> {</p>
<p class="tab"><span class="blue">background-image</span>: <span class="red">url</span>(<span class="green">heroes-2.png</span>);</p>
<p>}</p><br>
<p><span class="gold">// add color</span></p>
<p><span class="yellow">.example-2 .sticker-img</span> {</p>
<p class="tab"><span class="blue">background-color</span>: <span class="green">#ff4a85</span>;</p>
<p>}</p><br>
<p><span class="gold">// change shadow opacity</span></p>
<p><span class="yellow">.example-2 .sticker-shadow</span> {</p>
<p class="tab"><span class="blue">opacity</span>: <span class="green">0.6</span>;</p>
<p>}</p>
</code>
</li>
<li>
<p>JS</p>
<code>
<p> <span class="lblue">window.scrollTo(0,0);</span></p><br />
<p><span class="gold">//完全消除myscroll及其占用的内存空间</span></p>
<p><span class="gold">// myscroll.destroy()</span></p>
<p> myScrollTab3 <span class="red">= new </span>iScroll(<span class="yellow">'wrapper-tab3'</span>);</p>
<p> myScrollContactTab3 <span class="red">= new </span>iScroll_Contact_Fn(<span class="yellow">'scroller-tab3'</span>);</p>
<p> <span class="red">new</span> abc(<span class="yellow">'abc-tab3'</span>,myScrollTab3,myScrollContactTab3,<span class="yellow">'roll-tips-tab3'</span>);</p>
</code>
</li>
</ul>
</section>
<!-- <section class="heroes">
<h3>Heroes</h3>
<p>Sanghee Cho's <a href="http://blog.cmiscm.com/?p=3546" target="_blank">Heroes Project</a></p>
<ul>
<li class="sticker heroes-sticker heroes-1"></li>
<li class="sticker heroes-sticker heroes-2"></li>
<li class="sticker heroes-sticker heroes-3"></li>
<li class="sticker heroes-sticker heroes-4"></li>
<li class="sticker heroes-sticker heroes-5"></li>
<li class="sticker heroes-sticker heroes-6"></li>
</ul>
</section> -->
<section class="supported">
<h3>手机浏览器</h3>
<p class="gap">支持在高端系统( ios4+、android4.1+ )</p>
<div>
<p><img src="images/1.png"></p>
<p><img src="images/2.png"></p>
<p><img src="images/3.png"></p>
<p><img src="images/4.png"></p>
<p><img src="images/q (1).png"></p>
<p><img src="images/q (6).png"></p>
<p><img src="images/q (5).png"></p>
<p><img src="images/q (4).png"></p>
<p><img src="images/q (3).png"></p>
<p><img src="images/q (2).png"></p>
</div>
</section>
<footer>
<h3>关于我们</h3>
<p class="gap">王侯将相，宁有种乎!<br>
</p>
<div>
<p>创作于广州(Canton); 是<a href="http://bluemughtml5.com"> 蓝杯子HTML5工作室 <!-- BluemugHTML5 --> </a>的一个作品。</p>
</div>
</footer>
<script src="js/lib/require.js" defer async="true" data-main="js/index"></script>
</body>
</html>