在开始之前,必须先完成练习 3.1:导入必需的资源。
“选项卡式面板”组件使用 JavaScript 来支持浏览器上的几个重要客户机端事件。如果选择“选项卡式面板”(选择选项卡区域),则在“快速编辑”视图中您将看到下列事件:
事件 |
描述 |
---|---|
onpanelenter |
当进入“选项卡式面板”控件中的任何面板时就会调用此事件。这使得页面开发者能够为该事件添加任意业务逻辑、验证用户输入的信息或者为要显示的面板准备信息。 |
onpanelexit |
当退出“选项卡式面板”控件中的任何面板时就会调用此事件。这使得页面开发者能够为该事件添加任意业务逻辑、验证用户输入的信息和拒绝离开面板,或者控制流向下一个面板的流。此事件很重要,因为在“向导”方式下(具有“下一步”和“上一步”按钮,而不具有一些选项卡)使用“选项卡式面板”时,可以使用此事件来创建复杂的流。 |
oninitialpanelshow |
当“选项卡式面板”控件首次显示在用户界面中时就会调用此事件。 |
onfinish |
当用户按了“完成”按钮时(如果已经启用了该按钮)就会调用此事件。这允许页面开发者为该事件添加业务逻辑,例如,验证用户输入的信息。 |
oncancel |
当按了“取消”按钮时就会调用此事件。 |
对于 OnCancel 和 OnFinish 事件,应该只包括用来验证是否可以提交或取消“选项卡式面板”的逻辑,并执行适当的操作。不要从那些处理程序中提交表单,原因是框架将自动完成此操作。
如果您单击给定面板中的空白处,则将看到下列事件。
事件 |
描述 |
---|---|
onenter |
当进入所选面板时就会调用此事件。此事件与全局 onpanelenter 事件的行为完全一样,只不过此事件是特定于给定面板的,并且允许开发者为该面板指定专用逻辑。 |
onexit |
退出所选面板时就会调用此事件。此事件与全局 onpanelexit 事件的行为完全一样,只不过此事件是特定于给定面板的,并且允许开发者为该面板指定专用逻辑。 |
如果局部指定的处理程序只用于给定面板,并且您还具有处理程序用于全局事件,则将首先调用专用处理程序。如果它对 OnExit 返回非空值,或者对 OnEnter 返回 true,则将调用全局处理程序。
提示:当在“快速编辑”视图中选择一个事件并单击代码面板时,您将看到一些注释,用来说明该事件的目的、它的参数以及期望的返回类型和值。
如果需要定制“选项卡式面板”的外观,则编辑名为 tabpanel.css 的缺省“级联样式表”(CSS)。在“项目导航器”中,在您的项目的 /WebContent/theme/tabtree.css 中提供了此文件。
现在,您可以开始进行练习 3.3:添加树组件了。