`
- 浏览:
308911 次
- 性别:
- 来自:
广州
-
java 代码
-
-
- JSCookMenu(http:
-
- 要使用Myfaces的Tomahawk的JSCookMenu需要和3个tab打交道 t:jscookMenu
-
- (http:
-
- (http:
-
- t:navigationMenuItems(http:
-
- 其中t:jscookMenu用来控制menu的主题风格,t:jscookMenu有两个必须的属性layout,theme分别用于指定menu的布局和主题, 其取值范围在Tomahawk中分别为
- layout: hbr, hbl, hur, hul, vbr, vbl, vur, vul
- themes: ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel
- 如果要使用自定义主题,恐怕要修改Tomahawk的源代码了, 但是你可以在上面的四个主题基础上修改主题,只要保证里面用到的资源名字不改变就可以不用修改源代码使用自定义主题了.
-
- t:jscookMenu还有几个JSF tag中的标准属性(id, binding, rendered,
-
- immediate,enabledOnUserRole,visibleOnUserRole);
- 另外还有三个可能你会经常使用的属性javascriptLocation , imageLocation 和 styleLocation;
-
- javascriptLocation 属性可以指定一个目录来加载JSCookMenu需要的JS文件. 如果没有指定则利用
-
- ExtensionsFilter或者AddResource从tomahawk-1.1.4-SNAPSHOT.jar中加载. 注意: 如果你使用该属性,必须保证JSCookMenu的两个重要的JS文件(JSCookMenu.js,MyFacesHack.js在不久的将来MyFacesHack.js可能会消失 ^_^)
-
- 在所给出的目录下. 然后在该目录下把每个主题要用到的js文件放到以主题名字命名的文件夹中. 例如 我使用了该属性
- 则在css/jscookmenu目录中的文件结构如下:
-
- - jscookmenu
- - ThemeIE
- theme.js
- JSCookMenu.js
- MyFacesHack.js
- 必须保证上面的目录结构, 不然会找不到js文件.
-
- imageLocation 属性用来指定一个目录来加载JSCookMenu用到的图片资源. 如果指定该属性则在指定的目录下面一定要有相应的图片, 图片的命名为 在原来主题中的图片名字前面加上主题名字. 例如我指定了该属性:
-
- javascriptLocation="css/jscookmenu">
- 则在ThemeIE目录下面一定要有该主题使用到的三个图片,在原来的主题包中这三个图片的名字分别
- 为,folder.gif,arrow.gif,link.gif. 现在由于使用到了上面的属性, 所以要把这3个图片的名字改为(主题名字+
- 原来的名字)ThemeIEfolder.gif, ThemeIEarrow.gif,ThemeIElink.gif
-
-
- styleLocation用来指定一个目录来加载JSCookMenu用到的主题css文件. 如果指定了该属性,则在指定的目录下面 把每个主题要用到的css文件放到以主题名字命名的文件夹中. 例如:
-
- imageLocation="css/jscookmenu/ThemeIE" javascriptLocation="css/jscookmenu">
- 则在jscookmenu目录下面要建立一个ThemeIE的目录, 然后 在ThemeIE目录中放入theme.css文件.
-
- 使用上面的属性时候,要注意imageLocation 属性使用.
- 上面的资源文件在tomahawk-1.1.4-SNAPSHOT.jar中可以找到, 目录如下:
- \org\apache\myfaces\custom\navmenu\jscookmenu\resource
-
- 一般来说只要使用t:jscookMenu的layout,theme属性就可以了. 对JSCookMenu不是很熟悉的不要轻易使用上面的属性,以免找不到资源文件.
-
- t:jscookMenu只是控制menu的主题和资源文件的加载.要想让JSCookMenu发挥作用,少不了后面的两个标签
- t:navigationMenuItems 和t:navigationMenuItem(这两个标签类似于f:selectitems和f:selectitem ). 下面我
-
- 们就来看看这两个标签吧.
-
- t:navigationMenuItem 该标签的主要属性有
-
- id,actionListener,itemLabel,itemValue,action,rendered,icon,split等.这些属性的使用都是很简单的请参考这里 http:
-
- 如果同时指定了itemLabel和icon则menuItem会同时显示图片和文字. 如果指定了split="true"则该MenuItem会与上面的MenuItem用一个分割符号分割开.一个示例:
-
- itemLabel="返回首页" itemValue="go_home" icon="images/myfaces.gif"
-
- action="go_home" split="true" />
-
- t:navigationMenuItems是通过mbean来通过编程的方式来生成Menu. 这在MenuItem是动态的时候很有用. 该标签只有3个属性binding, value , 和id. 通过value来取得
-
- org.apache.myfaces.custom.navmenu.NavigationMenuItem
-
- (http:
-
- 示例:
- public List getPanelNavigationItems() {
- List menu = new ArrayList();
-
- NavigationMenuItem products = getMenuNaviagtionItem("#{example_messages
-
- ['panelnav_products']}", null);
- menu.add(products);
- products.add(getMenuNaviagtionItem("#{example_messages['panelnav_serach']}", "#
-
- {navigationMenu.getAction2}"));
- products.add(getMenuNaviagtionItem("#{example_messages['panelnav_serach_acc']}", "#
-
- {navigationMenu.getAction2}"));
- NavigationMenuItem item = getMenuNaviagtionItem("#{example_messages
-
- ['panelnav_search_adv']}", "#{navigationMenu.getAction2}");
- item.setActive(true);
- item.setOpen(true);
- item.setTarget("_blank");
- products.add(item);
-
- menu.add(getMenuNaviagtionItem("#{example_messages['panelnav_shop']}", "#
-
- {navigationMenu.getAction2}"));
-
- NavigationMenuItem corporateInfo = getMenuNaviagtionItem("#{example_messages
-
- ['panelnav_corporate']}", null);
- menu.add(corporateInfo);
- corporateInfo.add(getMenuNaviagtionItem("#{example_messages['panelnav_news']}", "#
-
- {navigationMenu.getAction2}"));
- item = getMenuNaviagtionItem("#{example_messages['panelnav_investor']}", "#
-
- {navigationMenu.getAction3}");
-
- item.setDisabled(true);
- corporateInfo.add(item);
-
- menu.add(getMenuNaviagtionItem("#{example_messages['panelnav_contact']}", "#
-
- {navigationMenu.getAction2}"));
-
- item = getMenuNaviagtionItem("External Link", null);
- item.setExternalLink("#{example_messages['external_link']}");
- item.setTarget("_blank");
- menu.add(item);
- return menu;
- }
-
- private static NavigationMenuItem getMenuNaviagtionItem(String label, String action) {
- NavigationMenuItem item = new NavigationMenuItem(label, action);
- item.setActionListener("#{navigationMenu.actionListener}");
- item.setValue(label);
- return item;
- }
-
- jsp代码:
-
-
-
-
-
- 最后关于使用JSCookMenu的导航设置,请使用导航规则来控制( 必要时候可以使用<redirect></redirect>属性 )以方便导航管理和避免多级目录的导航混乱问题 。 最后有个综合示例来演示如何使用JSCookmenu,做好后将放出.
-
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
**JSCookMenu实践** JSCookMenu是一个流行的JavaScript库,用于在网页上创建复杂的下拉菜单系统。这个库提供了一种优雅的方式来组织网站的导航结构,使得用户能够轻松地浏览和访问各种页面链接。本篇文章将深入探讨...
最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu
JSCookMenu是与Tapestry集成的一个JavaScript库,用于创建具有可扩展子菜单的动态菜单系统,它使得在网页上创建复杂的导航结构变得更加简单。 Tapestry JSCookMenu组件允许开发者在Tapestry应用中无缝地使用...
结合以上分析,JSCook-开源项目是一个面向Web开发者的JavaScript工具集,其中的JSCookMenu.js用于创建交互式的菜单系统,而effect.js则提供了丰富的视觉效果。通过开源的方式,这个项目不仅提供了实用的代码库,也为...
`JSCookMenu.js`、`validator.js`和`menu_theme.js`这些JavaScript文件可能负责前端界面的交互和样式,例如创建下拉菜单、实现表单验证以及设定界面主题。它们是提高用户体验的关键组件,使得用户在管理项目和任务时...