基础库
标签库（按字母排序）
属性扩展
标签库对 BUTTON 标签进行了扩展，主要是为了实现与后端进行快速交互。当设置了onclick+或watch属性时，所有扩展功能才生效。
需要引入两个文件，注意root.button.js文件的引入要在其他表单组件如root.input.js之后。
与按钮操作相关的扩展属性有：
disable-on-click 当向服务器端发送请求时，是否禁用按钮，可以防止用户多次点击，默认为true。enable-on-success 当服务器端请求成功后，是否启用按钮，默认为true。如果为一次性按钮可设置为false。enable-on-failure 当服务器端请求结果不符合预期时，是否启用按钮，默认为true。如果为一次性按钮可设置为false。enable-on-exception 当服务器端请求出错时，是否启用按钮，默认为true。href 请求成功后的跳转 URL 地址，支持 Express 字符串。没有服务器端事件时，可以把按钮直接当链接使用。
text 获取或设置按钮的文字。type 按钮类型，目前支持switch和twice属性，用作切换按钮和再次确认按钮。本文最下面有示例。watch 用于组件监听，下面在“组件监听”中单独介绍这个属性。与启用禁用相关的属性有：
disabled 是否默认禁用按钮，原生属性，不过属性值支持比原生多，接受可识别为尔值的各种值，如ok、cancel、false、0等。disabled-class 按钮在禁用状态下的样式，默认值normal-button optional-button。disabled-text 按钮在禁用状态下的文本，默认值Disabled。disabled-value 按钮在禁用状态下的值，默认值no。enabled 是否默认启用按钮，与disabled属性相对，两个属性同时使用时优先级低于disabled。接受可识别为布尔值的值，如yes、no、true、1等。enabled-class 启用状态下的样式，默认值normal-button blue-button。enabled-text 按钮在启用状态下的文本，默认值Enabled。enabled-value 按钮在启用状态下的值，默认值yes。与提示相关的属性如下，所有以-text消息相关属性均支持 Express 字符串：
hint或hint-element 设置在其他文本标签中提示操作过程中的各种信息，属性值为 CSS 选择器，如#Message。当所有提示方式都没有设置但是又设置了提示文字属性时，默认在按钮右侧创建一个 SPAN 标签用于显示提示文字。callout或callout-position 使用 Callout 提示，属性值用来设置显示的位置，默认在按钮上方显示即up。alert 使用 Alert 对话框进行提示，无属性值。如果引入了 Popup 组件，则会代替原生的 window.alert 对话框。message或message-duration 使用 Message 组件进行提示，属性值为 Message 提示框显示的时间，0为一直显示，单位为秒。text-class 提醒文字的样式，仅适用于 Hint 提示方式。error-text-class 错误或异常文字的样式，仅适用于 Hint 提示方式。valid-txt-class 正确或成功文字的样式，仅用于 Hint 提示方式。confirm-text 如果设置了这个属性，则在点击按钮时显示确认提示框，提示框里显示这个属性的文字。confirm-title 设置确认对话框的标题文字，对于原生确认对话框无效。confirm-button-text 设置弹出对话框确认按钮的文字，默认为OK，对于原生确认对话框无效。cancel-button-text 设置弹出对话框取消按钮的文字，默认为Cancel，对于原生确认对话框无效。click-text 点击按钮触发服务器端请求时的提示文字，替换按钮上的文字。invalid-text 当 onclick 事件的值返回 false 时的提醒文字onclick="return false;"。jumping-text 跳转过程中的提示文字，替换按钮文字。success-text 请求成功后的提示文字，本文下方有状态说明。failure-text 请求失败后的提示文字，本文下方有状态说明。exception-text 请求发生异常后的提示文字，替换按钮上的文字，“异常”是指接口或 PQL 语句发生错误，错误会被打印到控制台。与按钮外观相关的属性有：
color 按钮颜色，见本文下面的说明。scale 按钮大小，见本文下面的说明。扩展方法可用于事件表达式。
enabld() 启用按钮。disable() 禁用按钮。还有一个通用的set(attr, value)扩展方法可以用，原生方法不影响使用，如click()方法。
按钮新增一个服务器端事件onclick+，是按钮扩展的关键属性。属性值为按钮要执行的 PQL 语句或要请求的 API 接口，属性值格式详见服务器端事件和与数据相关的属性。客户端事件onclick依然可以使用。
为了配合switch按钮类型，新增两个客户端事件onclick-enabled和onclick-disabled，分别当按钮切换到相应的状态下触发。
为了配合twice按钮类型，新增两个客户羰事件onclick-confirm和onclick-cancel，分别当按钮确认和取消按钮时触发。
客户端事件可配合其他组件使用，比如需要监听按钮的动作，参见精简事件和表达式。
扩展选择器一般用来定义事件，可用的选择器只有 1 个：$('#id')或$s('#id')， 其中id前面的#符号不可省略。一般情况下用不到选择器，只了解选择器的语法即可。
Button 扩展通常用于通过onclick+事件向后端发起请求，请求有以下几种状态：
success 成功状态，表示返回值符合预期，依照返回值类型确定。详见服务器端事件中的说明。failure 失败状态，表示返回值不符合预期，依照返回值类型确定。exception 请求异常状态，PQL 语句或接口出错。大多数情况下，按钮行为都是向数据库插入或更新数据，插入数据可以返回最新数据的自增id，更新数据可以返回受影响的行数，使用non-zero规则即可进行判断。
Button 一般情况下会配合其他表单组件使用，如文本框等。Button 提供了对其他表单组件进行监听的功能，已在表单输入未完成和完成时作出正确的响应，决定是否禁用按钮。这个响应是自动的，一般情况下也不需要专门配置。
监听其他组件有两种方式。第一是设定onclick+事件，页面加载时会自动分析onclick+事件中相关的组件是否为必填项required，Button 会自动将必填组件加入监听列表。第二是设定watch属性，Button 会自动将watch属性中的组件加入监听列表，只能按照组件的名字或 id 进行监听，多个组件之间使用逗号,分隔。当只使用一种方式不能满足监听要求时，也可以两种方式混合使用。上例中，假如#Title，#Views，#Source都是必填项，则按钮必须在这 3 个表单项的输入值都正确时才会启用。
试试下面的例子，文本框输入值时 Button 才能启用。
示例代码如下：
按钮样式分为基本样式和颜色样式，基本样式用于控制按钮或文字大小，颜色样式用于控制按钮颜色，一般情况下两个样式同时使用。
large-button 超大按钮，文字大小1.25rem或20pxbig-button 大按钮，文字大小1.125rem或18pxmedium-button 中等按钮，文字大小1rem或16pxnormal-button 标准按钮，文字大小0.875rem或14pxsmall-button 小按钮，文字大小0.75rem或12pxmini-button 超小按钮，文字大小0.625rem或10px颜色样式有：
prime-button 系统主题颜色相同，32种颜色中随机一种green-button 绿色按钮red-button 红色按钮optional-button 无色按钮，与其他颜色按钮相反maroon-button 深红色按钮blue-button 蓝色按钮，默认颜色orange-button 橙色按钮gray-button 灰色按钮white-button 白色按钮示例：
外观样式可用scale和color属性代替，如
当type属性设置为switch时，可以把按钮做为切换按钮使用。
这个示例来自于 Master 项目后台启停用调度的按钮，主要逻辑为：只有先设置了工作流之后才能启用按钮，由onchange事件来判断，如果不满足启用条件，则提示文字invalid-text；options用来设置不同状态下按钮的显示文字和值；value属性必须设置值；onclick+事件用于请求后端接口，完成数据库更新。
当type设置为twice时，当点击按钮时会划出“确认”和“取消”按钮进行再次确认，在用户体验上这种方式比弹出框更友好一些。
这个示例来自于 Master 项目后台重启 Keeper 的按钮，主要逻辑为，当点击按钮时，按钮会向下划出（fadeOut），同时“确认”和“取消”两个按钮会从左右两方划入（fadeIn）；再次点击“确认”按钮才会继续执行。使用confirm-button-text和cancel-button-text属性可以设置“确认”和“取消”按钮的文字，enable-on-success属性表示点击成功后不再恢复。
参考链接
