Skip to content
Jingle UI是一个基于html5、css3开发轻量级的移动webapp 框架,提供一些基本交互方式,常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh......),帮助您更方便的开发移动应用。
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo-muti update to 0.4 Apr 23, 2014
demo 点击态实现方式优化 Sep 1, 2014
dist 点击态实现方式优化 Sep 1, 2014
doc add wiki pages Feb 19, 2014
libs zepto升级为1.1.3 ,对应的zepto.touch2mouse也做了相应的变动 May 25, 2014
src
.gitignore update Apr 1, 2014
CONTRIBUTING.md init project May 6, 2013
Gruntfile.js 修复多处bug Nov 14, 2013
Jingle.json update Apr 1, 2014
LICENSE-MIT init project May 6, 2013
README.md No commit message Sep 1, 2014
package.json 点击态实现方式优化 Sep 1, 2014
roadmap.md update roadmap.md May 9, 2014
server.js
update.md update.md May 21, 2014

README.md

##提示##

因为工作的原因,一直都没有时间去维护和更新的Jingle,后面很长一段时间内可能都没有太多的业务时间。 在这里对关注和使用Jingle的同学说一声抱歉!其实源码也不多,需要用到实际项目的同学建议通读源码,这样才能更好为项目服务,也能提升自己的能力不是? 当然,后续我也会尽量抽出时间来对Jingle做一些重构和规划,只是时间点上不太确定,再次说一声抱歉~

##Jingle UI## Jingle UI是一个基于html5、css3开发轻量级的移动webapp 框架,提供一些基本交互方式,常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh......),帮助您更方便的开发移动应用。

  • 基于webkit开发,目前只支持ios,android
  • 依赖zepto.js、iscroll4、artTemplate等开源类库和组件

持续开发中,文档尚不完善,有需求的朋友可以直接看demo和源码

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

    node server.js

  3. 浏览器访问:http://localhost:3000

###页面结构###

<!---侧边栏容器---> 侧边栏 侧边栏
<!--页面容器--->

Jingle

book pencil more <!---do it yourself --->

###布局组件### section 基本页面

基本属性:

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" 点击会有高亮显示

###交互组件### ok data-target的值有:

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(选中)

###功能组件### 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();

slider 轮换组件

var slider = new J.Slider(selector);

scroll 滚动组件(下拉刷新)

自动装载模式:data-scroll=true
javascript模式:J.Scroll(selector,opts);
You can’t perform that action at this time.