示例：创建 jQuery 按钮控件

此示例显示创建视图时如何使用外部第三方库，如 jQuery。

1. 向视图添加定制 HTML 代码：
   1. 在 "布局" 页面中，将 定制 HTML 高级项添加到画布。
   2. 在 HTML 属性中，选择 文本 选项，然后提供定制 HTML 代码。
      对于此示例，您可以使用以下代码来定义 jQuery 按钮：

      <input type="button" class="Jquerybutton" name="jbtnName" value="default"></input>

2. 上载包含 jQuery 库资产和样式表的压缩文件 (.zip)，然后选择各个要包含的文件：
   1. 从库资产列表中，单击 文件 旁边的加号，然后从组件列表中选择 服务器文件 。
   2. 选择压缩的 jQuery 库资产文件 (此示例为jQuery.zip ) ，然后单击 完成。
   3. 上载完成后，切换到视图的 " 行为 " 页面，然后单击 包含的脚本旁边的加号。
   4. 在服务器文件列表中，单击 jQuery.zip 旁边的折叠标记以查看已上载文件的内容。
   5. 选择要包含的文件。
      将分别选择每个要包含的文件。 以特定顺序包含 .css 文件。 对于此示例，以下文件将以其列示顺序包含：

      • jquery-1.4.js
      • jquery-ui-1.8.custom.min.js
      • core.css
      • jquery-ui-1.8.custom.css
3. 在 " 行为 " 页面中的 事件处理程序下，选择 装入 ，然后提供定制脚本。
   对于此示例，您可以使用以下脚本：

   var _this = this;
   $('.Jquerybutton', this.context.element).button(
   {label: this.context.options._metadata.label.get("value")}).bind('click', function() {
   _this.context.trigger(function() { console.log("jQuery button boundary event handled");})
   }); 

   表 1. 关于脚本的说明

   项目	描述
   this.context.options._metadata.label.get("value")	从配置选项中检索标签值。
   this.context.trigger(...)	单击按钮时触发边界事件。 如果边界事件连线到人员服务图中的下一步，那么单击按钮会触发转换（至下一步）。

4. 单击 保存 或 完成编辑。