Foxtable(狐表)用户栏目Web开发 → 每天进步一点(191013):一些特别小型的应用系统,使用1个面板+N个菜单就够了!


  共有97人关注过本帖树形打印复制链接

主题:每天进步一点(191013):一些特别小型的应用系统,使用1个面板+N个菜单就够了!

帅哥哟,离线,有人找我吗?
reachtone
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 一级勋章
等级:版主 帖子:1887 积分:16307 威望:0 精华:18 注册:2008/9/2 10:09:00
每天进步一点(191013):一些特别小型的应用系统,使用1个面板+N个菜单就够了!  发帖心情 Post By:2019/10/12 17:23:00 [只看该作者]


使用panel面板的tools属性可以给面板加上工具栏,这个实在没有什么好说的。例如:

以下内容为程序代码:

$('#p').panel({ //生成面板
     title: '***小型数据管理系统',
     fit:true,
     iconCls:'icon-lock',
     tools:'#bt'
});


这里的tools就是绑定工具栏元素的。假如这个工具栏内容是:

以下内容为程序代码:

<div id="bt">
      <a class="icon-tip"></a>
      <a class="icon-search"></a>
      <a class="icon-more"></a>
</div>


那么,生成的面板顶部就会有包含3个图标的工具栏:

这个实在太简单了。攻略第二版291-293页有详细的代码示例。

假如就把这个面板作为一个小型的应用系统来使用呢?其实还可以给工具栏按钮加上菜单。要给工具栏按钮加上菜单的关键在于两处:
一是给a标签添加菜单按钮样式,一是将指定的a标签绑定到菜单元素。
例如,把上面的a标签代码改成:

以下内容为程序代码:

<div id="bt">
     <a class="easyui-menubutton icon-tip" menu="#mm1"></a>
     <a class="easyui-menubutton icon-search" menu="#mm2"></a>
     <a class="easyui-menubutton icon-more" menu="#mm3"></a>
</div>


然后再把攻略中的menubutton菜单代码复制过来,那么,面板的工具栏按钮就有了下拉菜单了。
当把鼠标划到第1个图标上时,弹出的下拉菜单为:

此时,如果在菜单项上单击,将给出提示:

看到这里,就知道怎么做了吧?只要在单击事件里加上相应的代码,就可以在面板中加载显示不同的内容!

同样的道理,当把鼠标滑过第2个和第3个按钮时,将分别弹出如下内容:

[此贴子已经被作者于2019/10/12 19:03:59编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
reachtone
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 一级勋章
等级:版主 帖子:1887 积分:16307 威望:0 精华:18 注册:2008/9/2 10:09:00
  发帖心情 Post By:2019/10/12 18:54:00 [只看该作者]

有一点要注意,由于panel中的tools属性只能显示16*16大小的图标按钮,因而这种菜单并不是十分完美的。如果要建立带文字的下拉菜单按钮,可以在panel的body里使用layout组件分区,将其中的一个分区专门作为菜单显示之用。

 回到顶部
帅哥哟,离线,有人找我吗?
ycli368
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:四尾狐 帖子:839 积分:8273 威望:0 精华:0 注册:2012/12/11 14:25:00
  发帖心情 Post By:2019/10/13 10:17:00 [只看该作者]

厉害,牛掰

 回到顶部