jeesite中Jingle UI 帮助文档

### Jeesite中Jingle UI帮助文档解析 #### 概述 Jingle UI是一个轻量级的移动WebApp框架，该框架基于HTML5与CSS3技术进行开发，旨在简化移动应用开发过程。Jeesite框架集成Jingle UI，用于开发手机端功能。本文将详细介绍Jingle UI的核心特点、页面布局、组件使用以及一些实用示例。 #### Jingle UI框架介绍 Jingle UI主要面向移动设备，如iOS与Android系统。它依赖于多个开源库和技术，包括Zepto.js（一个轻量级的JavaScript库）、iScroll4（一款强大的滚动组件）及ArtTemplate（一种模板引擎）。这些工具共同协作，提供了基础的交互方式和常用的组件，例如滚动（Scroll）、操作表单（ActionSheet）、侧边菜单（SideMenu）、切换开关（Toggle）及下拉刷新（Push2Refresh）等。 #### 安装与配置 为了使用Jingle UI框架，首先需要搭建本地开发环境。由于涉及到跨域问题，推荐使用Node.js作为服务器端代理。开发者可以根据自身技术栈选择其他服务端解决方案，比如Apache或Nginx。 1. **安装Node.js插件**：通过命令行运行`npm install`来安装所需的Node.js插件。 2. **运行Node.js**：启动`server.js`文件，使服务端代理生效。 3. **浏览器访问**：打开浏览器并输入`http://localhost:3000`即可查看效果。 #### 页面结构设计 Jingle UI的页面结构主要由两大部分组成：“侧边栏容器”（`#aside_container`）与“页面容器”（`#section_container`）。 1. **侧边栏容器**：用于包含不同的侧边栏，可以通过`data-position`属性指定其位置（左侧或右侧），并通过`data-transition`属性定义显示时的动画效果。 ```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> ``` 2. **页面容器**：包含页面的主要内容区域，可以使用`data-target`属性来指定页面间的跳转目标。 ```html <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"> <!---doityourself---> </article> </section> </div> ``` #### 布局组件详解 1. **基本页面**：通过`data-transition`属性可以自定义页面之间的转场动画，默认值为“slide”。 2. **Aside侧边菜单**：具有三个主要属性：`data-position`、`data-transition`和`data-show-close`。其中，`data-position`用于指定侧边栏的位置；`data-transition`定义侧边栏显示方式；`data-show-close`控制是否显示关闭按钮。 #### 组件使用说明 1. **列表组件**：使用`<ul class="list">`标签创建列表，列表项通过`<li>`标签表示。添加`data-selected="selected"`属性可以使列表项在被点击时高亮显示。 2. **交互组件**：通过`<a>`标签与`data-target`属性组合使用实现不同类型的交互效果。`data-target`可选值包括： - `section`：页面跳转。 - `article`：页面内的元素块切换。 - `menu`：显示/隐藏侧边菜单。 - `link`：执行链接默认行为。 例如： ```html <a href="#" data-target="section">ok</a> ``` #### 界面元素 1. **导航栏**：使用`<ul class="control-group">`创建导航栏，可以通过添加`class="active"`给列表项来标示当前选中状态。 示例代码： ```html <ul class="control-group"> <li class="active"><a href="#">Hello</a></li> <li><a href="#">Jingle</a></li> </ul> ``` 通过以上介绍，我们可以看到Jingle UI框架不仅提供了丰富的组件库，还具有灵活的页面布局和交互能力。这对于快速构建美观且功能完备的移动Web应用而言是非常有用的。开发者可以根据具体需求自由组合这些组件和属性，创造出满足业务需求的应用界面。