生成多种类型的生成多种类型的JavaScript列表列表
在这篇文章中,我们将介绍如何创建使用各种类型列表显示数据的Web组件。具体而言,我们采用的是Webix UI库。要理解
Webix UI的工作机制,我们将会创建一个简单的小组件,以列表形式显示JSON数据,然后为已有数据添加编辑功能,以此来
学习如何为组件添加交互能力。我们还会学习如何从已有的Webix部件(Widget)创建满足特定需求的Web组件。最后,我们
会介绍一些由Webix提供的更高级类型列表,例如Grouplist和Unitlist。
添加Webix UI库
Webix是一种基于HTML5组件的JavaScript UI软件库,用于创建移动和桌面Web应用。Webix提供了多种多样的组件,从基本
的按钮到电子表格,使用这些组件可以开发出类似于Excel的办公Web应用。
Webix不只是提供了UI组件集合,它还提供了事件处理机制、对离线模式的支持以及一系列的开发工具。例如,你可以使用
Skin Builder创建自定义的皮肤,或是使用“在线源代码广场”中的代码做实验。
要在你的项目中添加所需的JavaScript和CSS文件,有多种实现途径:
1下载Webix库软件包,并在codebase文件夹中找到相应的文件。使用如下方式加入Webix支持:
<link rel="stylesheet" href="./codebase/webix.css">
<script src="./codebase/webix.js"></script>
2 使用CDN:
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css">
<script src="http://cdn.webix.com/edge/webix.js"></script>
3 通过NuGet安装文件:
nuget install Webix
如果你更习惯Bower,使用:
bower install webix
4 使用Microsoft Visual Studio时,可以在Package Manager Console执行下面的命令:
install-package Webix
创建一个简单的JavaScript列表
开始构建JavaScript列表之前,我们必须要新建一个HTML页面,并在其中添加必需的JavaScript和CSS文件。在本文的例子
中,我们使用CDN添加Webix。如果你已经下载了包括所有文件的Webix软件包,也可以直接使用下载文件所在的目录。现在
打开项目所在的目录,新建一个名为index.html的HTML文件。该文件可以使用文本编辑器打开,代码如下:
<!doctype html>
<html>
<head>
<script src="http://cdn.webix.com/site/webix.js"></script>
<link rel="stylesheet" type="text/css"
href="http://cdn.webix.com/edge/webix.css">
</head>
<body>
<script>
</script>
</body>
</html>
Webix的相关代码必须要置于<script></script>标签对之间。在完成编辑后,可以在Web浏览器中打开index.html文件,检查在
JavaScript列表中是否包含了所需的数据,并且按照我们的设计意图展示数据。
要初始化Webix,需要将所有代码置入webix.ui()这一构建器中。如果想要确认你的应用是否在页面完全加载后得到了执行,使
用webix.ready(function() { ... }。下面给出了代码的基本结构: