##Jingle UI##
Jingle UI
基 于webkit开发，目前 只 支持 ios，android依 赖zepto.js、iscroll4、artTemplate等 开源类库和 组件
持 续开发中，文 档尚不 完 善 ，有 需求的 朋友 可 以直接 看 demo和 源 码
###
Eoe资讯
访问
###
-
安 装 nodejs插件npm install;
-
运行nodejs
node server.js
-
浏览
器 访问：http://localhost:3000
###页面结构###
<!---侧边栏容器 --->
侧边栏
侧边栏
###
data-transition:页面转场动画，默 认为“slide”,
目前 框 架 已 内 置 “slideUp”，“slideDown”,"scale"，亲们可 以自己 编写css3动画...
aside 侧边
data-position: left(左 侧边栏) right(右 侧边栏)
data-transition: push(抽屉式 ) overlay(侧边栏覆盖页面 ) reveal(页面退出 显示侧边栏)
data-show-close: true false (是 否 显示关闭按钮)
list
ul class="list" 基本 设置
li data-selected="selected" 点 击会有高 亮 显示
###
section:页面跳 转
article:页面中 的 元素 块切换
menu:显示/隐藏侧边菜 单
link:执行a标签默认行为
href对应section/article/menu的 id
###
<!--只 有 文字 -->
<ul class="control-group">
<li class="active"><a href="#">Hello</a></li>
<li><a href="#">Jingle</a></li>
<li><a href="#" >html5</a></li>
</ul>
<!--只 有 图标-->
<ul class="control-group">
<li data-icon="home"></li>
<li class="active" data-icon="bell"></li>
<li data-icon="spinner"></li>
</ul>
<!--图标+文字 左右 -->
<ul class="control-group">
<li class="active"><a href="#" data-icon="home">Hello</a></li>
<li><a href="#" data-icon="bell">Jingle</a></li>
<li><a href="#" data-icon="spinner">html5</a></li>
</ul>
<!--图标+文字 上下 -->
<ul class="control-group">
<li class="active" data-icon="home"><a href="#">Hello</a></li>
<li data-icon="bell"><a href="#">Jingle</a></li>
<li data-icon="spinner"><a href="#" >html5</a></li>
</ul>
图标
data-icon="icon name"
icon name请参见示例 中 的 icons页面，基本 所有 的 组件都 可 以用
toggle
<div class="toggle" class="active"></div>
默 认为√和 ×，可 以自定 义文字
data-on="开启"
data-off="关闭"
范围选择
<div data-rangeinput="right">
<input type="range" min=4 max=10 value="7"/>
</div>
data-rangeinput: 输入框 显示在 左 侧还是 右 侧
进度
<div data-progress="80" data-title="已 完成 "></div>
data-title:自 定 义进度 文字
<a class="button" data-count=3 data-orient="left">按钮</a>
data-orient:标签显示位置 ，默 认显示 在 右 上角
checkbox
<div data-checkbox="unchecked">爱我你就勾勾我 </div>
data-checkbox:unchecked(未 选中) checked(选中)
###
J.Toast.show(type,text,duration);
//type: toast|success|error|info 内 置 的 几种样式
//text： 显示文 本
//duration:持 续时间，为0则不自 动关闭
J.Toast.hide(); //关闭消息
popup 弹出
J.Popup.show(options);
J.Popup.close();
J.Popup.alert();
J.Popup.confirm();
J.Popup.popover();
J.Popup.loading();
J.Popup.actionsheet();
slider 轮换组件
var slider = new J.Slider(selector);
scroll 滚动组件(
自 动装载模式 ：data-scroll=true
javascript模 式 ：J.Scroll(selector,opts);