列表组件是极其常用的一类组件,是许多视图组件系统的必须包含的.列表可以做的很简单,只显示简洁的内容.列表也可以做的很复杂,用于展示非常丰富的内容. 组成元素 列表离不开列表项以及包含列表项的容器.下面是最简单的列表组件,它包含一个列表项组件 Item 以及一个列表项容器组件 List. Item: { xml: "<li id='item'/>" }, List: { xml: "<ul id='list'/>" } 此列表组件尽管简单,但所…

xmlplus 是什么 xmlplus 是博主写的一个 JavaScript 框架,用于快速开发前后端项目. xmlplus 基于组件设计,组件是基本的构造块.评价组件设计好坏的一个重要标准是封装度.基于 xmlplus 设计的组件具有极高的封装度.组件由命名空间组织.基于传统目录路径的组件引用方式,让组件的使用更为便捷. xmlplus 具有友好的相容性.非侵入式的设计,使得 xmlplus 可以与当今几乎所有的框架或者库集成使用.利用 xmlplus 出色的整合能力,你可以整合现有的库或框架…

文本框是页面中最常用的输入组件,它的默认使用方式如下: <input type='text'/> 当然,这里的 `type='text' 可以略去不写.大部分情况下,使用默认的文本框作为输入组件是没什么问题的.但在具体的项目中,难免会有功能扩展的需求.这里仅以如何增加文本框数据的格式化输入输出能力为例说明如何扩展原生的文本框组件.除了本章的内容,你也可以参考官方文档中的 参数映射 一章. 目标组件的功能分析 对于原生的文本框,我们获取到的值是文本类型的,就像下面的示例所展示的: Example…

除了图标以外,按钮也许是最简单的组件了,现在来看看如何定义按钮组件. 使用原生按钮组件 在 xmlplus 中,HTML 元素也以组件的方式存在.所以,你可以直接通过使用 button 标签或者 input 标签来使用按钮组件.如下示例所示: Example: { xml: "<div id='example'>\ <button>Default</button>\ <input type='submit'>Primary</input>…

网页上使用的图标分可为三种:文件图标.字体图标和 SVG 图标.对于文件图标,下面仅以 PNG 格式来说明. PNG 图标 对于 PNG 图标的引用,有两种方式.一种是直接由 HTML 元素 img 的 src 属性给出.下面是一个简单的示例. Icon: { css: "#icon { width: 68px; height: 68px; }", xml: "<img id='icon'/>", fun: function (sys, items, o…

这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组件的分解 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助.通过观察,可以将选项卡组件分为容器部分和子项部分,正如下面的 XML 结构所展示的. <Tabbar id="tabbar"> <TabItem id="home" label="首页"/> <TabItem id="setting&quo…

树形组件是一种具有层级结构的组件,广泛应用于各种场景.本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件. 数据源 树形组件的数据源可以是 JSON 格式的数据对象,也可以是具有 XML 结构的数据或者是其它的具有层级结构的数据.本章将采用具有如下 JSON 格式的数据对象. var data = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'world' }, { name: 'chi…

"下拉刷新"由著名设计师 Loren Brichter 设计,并应用于 Twitter 第三方应用 Tweetie 中.2010年4月,Twitter 收购 Tweetie 开发商 Atebits 后,该专利归 Twitter 所有.这一章我们就来看看如何实现一个下拉刷新组件. 分析 和前面在设计组件时的做法一样,我们先想想看最终的成品组件是如何使用的,这需要点想像力.下拉刷新组件看成一个容器组件是合理的,用户可以对容器的内容进行下拉操作.如果用户完成了完整的下拉触发操作,该组件应该会…

分隔框(DividedBox)是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox).水平分隔框会将其子级分为两列,而垂直分隔框则会将其子级分为两行.列与列之间以及行与行之间一般都会有一条可以拖动的用以改变子级组件大小的分隔条.下面仅以垂直分隔框为例来介绍此类组件是如何设计以及实现的. 成品组件用例 按照以往的设计经验,我们可以先写出想像中的成品组件用例,这将有助于我们后续的进一步的设计与实现.垂直分隔框既然是布局类的组件,那…

这一章我们要实现是一个网格组件,该组件除了最基本的数据展示功能外,还提供排序以及数据过滤功能. 数据源 为了测试我们即将编写好网格组件,我们采用如下格式的数据源.此数据源包含两部分的内容,分别是表头数据集和表体数据集.网格组件实例最终的列数由表头数据集的长度决定. var data = { gridColumns: ['name', 'power'], gridData: [ { name: 'Chuck Norris', power: Infinity }, { name: 'Bruce Le…