怎么使用Jingle

下载

源码都在github上，直接从github下载。 主要包含：

  • Jingle js组件
  • Jingle css
  • 依赖的js框架(zepto\template\iscroll)
默认Jingle组件已经打包好放在dist文件夹中，开发者可以根据需要修改src中的源码后通过grunt重新进行打包

代码结构

css


<link rel="stylesheet" href="Jingle.css">

javascript


<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/template.min.js"></script>
<script type="text/javascript" src="js/Jingle.debug.js"></script>
<!---PC端测试时需要这个文件，将click事件模拟成touch事件，正式上线删除该js文件即可--->
<script type="text/javascript" src="js/zepto.touch2mouse.js"></script>

html(具体请参见demo中index.html):


<div id="aside_container"><!---侧边栏容器--->
<aside id="index_aside" data-position="left" data-transition="reveal" data-show-close="true">
侧边栏
</aside>
<aside id="main_aside" data-position="left" data-transition="reveal" data-show-close="true">
侧边栏
</aside>
</div>
<div id="section_container"><!--页面容器--->
<section id="index_section" class="active">
<header>
<nav class="left">
<a data-target="menu" data-icon="menu" href="#index_aside"></a>
</nav>
<h1 class="title">Jingle</h1>
<nav class="right">
<a href="#about_section" class="button" data-target="section" data-icon="question"></a>
</nav>
</header>
<footer>
<a  href="#" data-target="article" data-icon="book" class="active">book</a>
<a  href="#" data-target="article" data-icon="pencil">pencil</a>
<a  href="#" data-icon="ellipsis">more</a>
</footer>
<article class="active">
<!---do it yourself --->
</article>
</section>
</div>

初始化Jingle:


Jingle.launch();

认识Jingle

Jingle适合开发什么样的应用

Jingle是一个Webapp框架，基于H5C3开发，理论上可以用来开发各种类型的webapp,如轻应用、触屏站、hybrid应用等等。

最适合用来开发Hybrid应用

Jingle代码结构描述

section

  • 卡片式结构，一个section对应一个卡片(模仿android里的activity)
  • 按需加载section模板，section Id与模板的名称需要一致

article

  • 包含在section里面(模仿android里的fragment)
  • 根据header footer自动充满屏幕
  • 一个section里包含多个article

header

  • 固定在屏幕顶部

footer

  • 固定在屏幕底部

popup

  • 同时只会有一个popup存在

推荐开发方式

服务端提供RestAPI(JSON)， 客户端渲染模板，处理逻辑

组件属性

自装配UI组件

通过data-*等不同配置来实现组件的自动装配

基本组件

图标

data-icon="icon name"
    icon name请参见demo中的icons页面，基本所有的组件都可以用

badge 数字标签

<a class="button" data-count=3 data-orient="left">按钮</a>
    data-orient: left|right 标签显示位置，默认显示在右上角

布局组件

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" data-icon="next"
    // selected的值为class名称，元素被触摸时的高亮样式
    // icon用来表示li行后的小图标

交互组件

<a href="#" data-target="section">ok</a>

data-target的值有：

section:页面跳转
    article:页面中的元素块切换
    menu:显示/隐藏侧边菜单
    link:执行a标签默认行为
    back:后退

    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>

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:自定义进度文字

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 轮换组件

javascript

var slider = new J.Slider("#sliderId");

html

<div id="sliderId">
    <div>
    <div>slider1</div>
    <div>slider2</div>
    <div>slider2</div>
    </div>
    </div>
    **注意：有2层wrapper**

scroll 滚动组件(下拉刷新)

自动装载模式：data-scroll=true

javascript

var slider = new J.Scroll("#scrollId");

html

<div id="scrollId">
    <div>
    <div>content</div>
    </div>
    </div>
    **注意：有2层wrapper**