
上QQ阅读APP看书,第一时间看更新
3.3 水平/垂直菜单元件
水平菜单元件用于创建一个多级别的水平菜单。水平菜单一般用于一级导航菜单,从“元件库”面板拖动一个水平菜单元件到“页面设计”面板,如图3-26所示。
选择图3-26的水平菜单元件的第一列“文件”后,可在“检视”面板的“属性”选项卡中对其进行属性设置,如图3-27所示。

图3-26 水平菜单元件

图3-27 设置水平菜单元件属性
在该选项卡中,可设置该元件的“鼠标单击时”“获得焦点时”“失去焦点时”“选中改变时”“选中时”“取消选中时”和“载入时”事件,并可通过下方的操作按钮进行操作:“”按钮用于在该列的前方添加菜单项,“
”按钮用于在该列的后方添加菜单项,“
”按钮用于删除菜单项,“
”按钮用于添加子菜单项,选中菜单项直接输入文字可设置菜单项名称,例如通过使用这些操作按钮可设置如图3-28所示的水平菜单。

图3-28 使用水平菜单元件设置水平菜单
垂直菜单元件用于创建一个多级别的垂直菜单。垂直导航作为导航也很常见。一般用在二级、三级导航菜单中,从“元件库”面板拖动一个垂直菜单元件到“页面设计”面板,如图3-29所示。
选择图3-29的垂直菜单元件的第一行“Item 1”后,可在“检视”面板的“属性”选项卡设置其事件和其余属性信息,并可进行添加菜单项、添加子菜单项和删除子菜单项等操作,并可选中某行后,输入文字信息设置菜单项名称。

图3-29 垂直菜单元件(默认)
例如通过利用“检视”面板的相应操作设置出如图3-30所示的垂直菜单。
水平菜单元件和垂直菜单元件操作起来相对不便,在此仅做功能性的介绍,后续我们实现一级菜单或二级、三级菜单时,采用的是另外的方式实现设计。

图3-30 使用垂直菜单元件设置垂直菜单