logo资料库

jeesite中Jingle UI 帮助文档.docx

第1页 / 共5页
第2页 / 共5页
第3页 / 共5页
第4页 / 共5页
第5页 / 共5页
资料共5页,全文预览结束
Jingle UI
部分案例
本地环境搭建
页面结构
布局组件
交互组件
界面元素
功能组件
Jingle UI Jingle UI 是一个基于 html5,css3 开发轻量级的移动 webapp 框架,提供一些基 本交互方式,常用的组件(scroll,actionsheet,sidemenu,toggle, push2refresh ......),帮助您更方便的开发移动应用。  基于 webkit 开发,目前只支持 ios,android  依赖 zepto.js,iscroll4,artTemplate 等开源类库和组件 持续开发中,文档尚不完善,有需求的朋友可以直接看演示和源码 wiki 入口 部分案例 Eoe 资讯 访问地址:http : //migrator.duapp.com/static/eoe/ 源码地址:https : //github.com/shixy/eoe-jingle 深圳图书馆 访问地址:http : //shenzhenlib.duapp.com/ 源码地址:已打包成 apk,源码在 https://github.com/shixy/szlib 本地环境搭建 因为涉及到跨域问题,需要服务端做一个代理。
我采用的是 Nodejs,你可以根据自己的知识架构来做调整(Apache \ Nginx 等 等)。 1. 安装 nodejs 插件 npm install; 2. 运行 nodejs 节点 server.js 3. 浏览器访问:http:// localhost:3000 页面结构

Jingle

布局组件 部分基本页面 基本属性: data-transition:页面转场动画,默认为“slide”, 目前框架已内置“slideUp”,“slideDown”,"scale",亲们可以自己编写 css3 动画... aside 侧边菜单 基本属性: data-position: left(左侧边栏) right(右侧边栏) data-transition: push(抽屉式) overlay(侧边栏覆盖页面) reveal(页面退出显示侧边栏) data-show-close: true false (是否显示关闭按钮) 列表组件 ul class="list" 基本设置 li data-selected="selected" 点击会有高亮显示 交互组件 ok data-target 的值有: section:页面跳转 article:页面中的元素块切换 menu:显示/隐藏侧边菜单 link:执行 a 标签默认行为 href 对应 section/article/menu 的 id
界面元素 导航栏 图标 data-icon="icon name" icon name 请参见示例中的 icons 页面,基本所有的组件都可以用 切换
默认为√和×,可以自定义文字 data-on="开启" data-off="关闭" 范围选择器
data-rangeinput: 输入框显示在左侧还是右侧
进度条
data-title:自定义进度文字 数字标签 按钮 data-orient:标签显示位置,默认显示在右上角 复选框
爱我你就勾勾我
data-checkbox:unchecked(未选中) checked(选中) 功能组件 toast 消息提示框 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(); 滑块轮换组件 var slider = new J.Slider(selector); 滚动组件 自动装载模式:data-scroll=true javascript 模式:J.Scroll(selector,opts);
分享到:
收藏

相关推荐