Jingle
配置项
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| appType | String | single | 工程类型，默认为单页面工程single, 多页面工程muti(也就是普通的webapp,去掉了路由的功能) |
| transitionType | String | slide | 页面转场默认动画效果 |
| showWelcome | Boolean | false | 是否显示欢迎界面,需要在basePagePath放置welcome.html文件 |
| welcomeSlideChange | Function | null | 欢迎界面卡片切换时的执行函数，可以制作酷帅吊炸天的欢迎界面 |
| showPageLoading | Boolean | true | 加载page模板时，是否显示遮罩 |
| basePagePath | String | html/ | page模板默认的相对位置，主要用于开发hybrid应用，实现page的自动装载 |
| remotePage | Object | {} | page模板的远程加载路径{#id: href,#id: href}，可以用来获取服务端渲染的模板 |
属性
| 名称 | 描述 |
|---|---|
| version | 版本号 |
| $ | Zepto的引用 |
| mode | 根据屏幕大小判断是手机还是平板 |
| hashTouch | 判断是否有触摸事件 |
| launchCompleted | 是否启动完成 |
| hasMenuOpen | 是否有侧边栏打开 |
| hasPopupOpen | 是否有打开的弹出框 |
| isWebApp | 根据协议判断是否为webapp http为webapp,file://为phonegap |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| launch | None | 启动Jingle，实现SPA对组件的初始化，路由的自动监控 |
| anim |
El 元素 animName 动画名称 duration 持续时间 ease 动画函数 callback 回调函数 |
Zepto动画函数的改进，主要是增加一些缺省值，让方法更方便的调用 |
| showMask | Text：显示文本 | 显示loading框 |
| hideMask | None | 关闭loading框 |
| showToast | text 显示文本 type 消息类型，可选值toast|success|error|info duration 显示持续时间，为0则不自动关闭 |
显示消息 |
| hideToast | None | 关闭消息提示 |
| alert | Title 标题 Content 文本 |
Alert弹出框 |
| confirm | Title 标题 Content 文本 okCall 确认回调函数 cancelCall 取消回调函数 |
Confirm弹出框 |
| popup | Config,参见J.Popup.show() | 弹出框 |
| closePopup | 关闭弹出框 | |
| popover | html 内容 pos 位置，参见J.Popup arrowDirection箭头方向 onShow显示之前执行 |
带箭头的弹出框 |
| tmpl | containerSelector 欲填充的容器 templateId 模板ID data 数据源 type 填充内型add|replace |
自动渲染模板并填充到页面 |
Element
Element主要是用来渲染一些小组件
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| init | elector 选择器 可选 | 初始化页面内(选择器内)的icon\scroll等元素 |
| icon | el | 初始化icon组件(包含子元素) |
| toggle | el | 初始化toggle组件(包含子元素) |
| progress | el | 初始化progress组件(包含子元素) |
| range | el | 初始化range组件(包含子元素) |
| badge | el | 初始化badge组件(包含子元素) |
| scroll | el | 初始化scroll组件(包含子元素) |
Menu
侧边菜单栏
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| init | None | 初始化Menu相关的dom元素，绑定事件。 一个SPA工程只需要执行一次。在Jingle.launch中已执行控 |
| show | Selector css选择器或element实例 | 打开指定侧边菜单 |
| hide | duration 关闭动画持续时间 callback 动画完毕回调函数 |
关闭已经打开的侧边菜单 |
Router
路由控制器，实现页面的跳转，动画，事件等
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| goTo | Hash 卡片#id | 跳转到指定的卡片 |
| showArticle | href #id el 当前锚点 |
激活href对应的article |
| back | 后退到前一个卡片 |
Template
提供一个模板渲染函数以及常用的模板
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| render | containerSelector 目标容器 templateId artTemplate模板ID data 模板数据 type replace|add 渲染好的文档片段是替换还是添加到目标容器中 |
借助artTemplate模板来渲染页面 |
| background | el 目标容器 title 显示文本 icon 图标 |
显示一个带ICON的背景模板 |
| loading | el 目标容器 | 加载等待背景模板 |
| no_result | el 目标容器 | 显示一个无记录的模板 |
Toast
消息组件
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| show | type 类型 toast|success|error|info text 文字内容 duration 持续时间 为0则不自动关闭,默认为5000ms |
显示消息提示 |
| hide | 关闭消息提示 |
Popup
弹出框组件。提供一系列内置好的常用弹出框。
配置项
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| height | Number | Null | 高度 |
| width | Number | Null | 宽度 |
| opacity | Number | .3 | 透明度 |
| url | String | null | 远程加载url |
| tplId | String | null | 模板ID-从模板加载 |
| tplData | Object | null | 模板数据，配合tplId使用 |
| html | String | popup内容 | |
| pos | String/Object | center | 位置 String类型：内置的位置top|top-second|center|bottom|bottom-second Object类型：css样式值 |
| clickMask2Close | Boolean | true | 是否点击外层遮罩关闭popup |
| showCloseBtn | Boolean | true | 是否显示关闭按钮 |
| arrowDirection | String | null | popover的箭头指向 |
| animation | Boolean | true | 是否显示动画 |
| timingFunc | String | linear | 动画效果 |
| duration | Number | 200 | 动画执行时间 |
| onShow | Function | null | 在popup内容加载完毕，动画开始前触发 |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| show | Options 见配置项 | 打开一个弹出框 |
| close | noTransition立即关闭，无动画 | 关闭弹出框 |
| alert | title 标题 content 内容 |
Alert弹出框 |
| confirm | title 标题 content 内容 okCall 确定按钮handler cancelCall 取消按钮handler |
confirm 组件 |
| popover | html 弹出框内容 pos 位置 arrow_direction 箭头方向 onShow onShow事件 |
带箭头的弹出框 |
| loading | text 文本，默认为“加载中...” | oading组件 |
| actionsheet | buttons 按钮集合[{color:'red',text:'btn',handler:function(){}},
{color:'red',text:'btn',handler:function(){}}] |
actionsheet组件 |
Calendar
一个简单的日历组件
配置项
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| swipeable | Boolean | true | 是否可通过手指滑动 |
| date | Date | new Date() | 日历当前日期 |
| onRenderDay | Function | null | 渲染单元格时的事件 |
| onSelect | Function | null | 选中日期时的事件 |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| refresh | date 指定日期 | 刷新日历为指定日期 |
| parse | date 日期 | 字符串转化为日期对象，只支持yyyy-MM-dd 和 yyyy/MM/dd |
| format | dateStr | 格式化日期 yyyy-MM-dd |
Refresh
上拉/下拉刷新组件。利用iScroll4实现。
配置项
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| selector | String | 容器 | |
| type | String | pullDown | 拉动类型 下拉：pullDown 上拉：pullUp |
| minPullHeight | Number | 10 | 拉动的像素相对值，超过才会翻转 |
| pullText | String | 下拉刷新... 上拉加载更多... |
拉动时的文本 |
| releaseText | String | 松开立即刷新... 松开开立即加载... |
松开文本 |
| refreshText | String | 刷新中... 加载中... |
刷新文本 |
| refreshTip | String | 下拉时显示的文本，比如：最后更新时间:2013-12-21 | |
| onPullIcon | String | arrow-down-2 arrow-up-3 |
拉动时的icon图像 |
| onReleaseIcon | String | icon-reverse | 松开时的icon图像 |
| onRefreshIcon | String | spinner | 刷新时的icon图像 |
| callback | Function | null | 刷新成功的回调函数 |
方法
| 名称 | 类型 | 描述 |
|---|---|---|
| scroller | iScroll | 对应的iscroll对象 |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| destroy | 销毁刷新控件 |
Slider
一个简单的轮换组件。
配置项
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| selector | String | 容器 | |
| showDots | Boolean | true | 是否显示导航点 |
| autoPlay | Boolean | false | 是否自动播放 |
| interval | int | 3000 | 自动播放时间间隔，默认3秒 |
| onBeforeSlide | Function | null | 滑动卡片前触发 |
| onAfterSlide | Function | null | 滑动卡片后触发 |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| refresh | 刷新控件 | |
| prev | 切换到前一个卡片 | |
| next | 切换到后一个卡片 | |
| index | i : 卡片索引 | 切换到指定卡片 |