`
zengjinliang
  • 浏览: 307657 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JSCookMenu教程

阅读更多
java 代码
  1.   
  2.   
  3. JSCookMenu(http://jscook.yuanheng.org/JSCookMenu/)是一位留学UCLA(University of California Los Angeles,加州大学洛杉矶分校)的中国留学生(袁衡 http://www.cs.ucla.edu/~heng/)创建的一个JS菜单开源项目 在很多项目上都有运用. Apache 的myfaces集成了JSCookMenu以方便JSF用户使用JSCookMenu.    
  4.   
  5. 要使用Myfaces的Tomahawk的JSCookMenu需要和3个tab打交道 t:jscookMenu   
  6.   
  7. (http://www.hexiao.cn/myfaces/tlddoc/tomahawk-1.1.3-tlddoc/t/jscookMenu.html) t:navigationMenuItem   
  8.   
  9. (http://www.hexiao.cn/myfaces/tlddoc/tomahawk-1.1.3-tlddoc/t/navigationMenuItem.html)    
  10.   
  11. t:navigationMenuItems(http://www.hexiao.cn/myfaces/tlddoc/tomahawk-1.1.3-tlddoc/t/navigationMenuItems.html  ) .有时也要用到类 org.apache.myfaces.custom.navmenu.NavigationMenuItem; 在web.xml文件中还要配置myfaces的filter,请参考MyFaces的网站来配置(http://myfaces.apache.org/tomahawk/extensionsFilter.html ).   
  12.   
  13. 其中t:jscookMenu用来控制menu的主题风格,t:jscookMenu有两个必须的属性layout,theme分别用于指定menu的布局和主题, 其取值范围在Tomahawk中分别为    
  14. layout: hbr, hbl, hur, hul, vbr, vbl, vur, vul   
  15. themes: ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel    
  16. 如果要使用自定义主题,恐怕要修改Tomahawk的源代码了, 但是你可以在上面的四个主题基础上修改主题,只要保证里面用到的资源名字不改变就可以不用修改源代码使用自定义主题了.   
  17.   
  18. t:jscookMenu还有几个JSF tag中的标准属性(id, binding, rendered,    
  19.   
  20. immediate,enabledOnUserRole,visibleOnUserRole);   
  21. 另外还有三个可能你会经常使用的属性javascriptLocation , imageLocation 和 styleLocation;    
  22.   
  23. javascriptLocation 属性可以指定一个目录来加载JSCookMenu需要的JS文件. 如果没有指定则利用   
  24.   
  25. ExtensionsFilter或者AddResource从tomahawk-1.1.4-SNAPSHOT.jar中加载. 注意: 如果你使用该属性,必须保证JSCookMenu的两个重要的JS文件(JSCookMenu.js,MyFacesHack.js在不久的将来MyFacesHack.js可能会消失 ^_^)   
  26.   
  27. 在所给出的目录下. 然后在该目录下把每个主题要用到的js文件放到以主题名字命名的文件夹中. 例如 我使用了该属性    
  28. 则在css/jscookmenu目录中的文件结构如下:   
  29.   
  30. - jscookmenu   
  31. - ThemeIE   
  32.   theme.js   
  33. JSCookMenu.js   
  34. MyFacesHack.js   
  35. 必须保证上面的目录结构, 不然会找不到js文件.   
  36.   
  37. imageLocation 属性用来指定一个目录来加载JSCookMenu用到的图片资源. 如果指定该属性则在指定的目录下面一定要有相应的图片, 图片的命名为 在原来主题中的图片名字前面加上主题名字. 例如我指定了该属性:   
  38.   
  39. javascriptLocation="css/jscookmenu">   
  40. 则在ThemeIE目录下面一定要有该主题使用到的三个图片,在原来的主题包中这三个图片的名字分别   
  41. 为,folder.gif,arrow.gif,link.gif. 现在由于使用到了上面的属性, 所以要把这3个图片的名字改为(主题名字+   
  42. 原来的名字)ThemeIEfolder.gif, ThemeIEarrow.gif,ThemeIElink.gif   
  43.   
  44.   
  45. styleLocation用来指定一个目录来加载JSCookMenu用到的主题css文件. 如果指定了该属性,则在指定的目录下面 把每个主题要用到的css文件放到以主题名字命名的文件夹中. 例如:   
  46.   
  47. imageLocation="css/jscookmenu/ThemeIE" javascriptLocation="css/jscookmenu">   
  48. 则在jscookmenu目录下面要建立一个ThemeIE的目录, 然后 在ThemeIE目录中放入theme.css文件.   
  49.   
  50. 使用上面的属性时候,要注意imageLocation 属性使用.    
  51. 上面的资源文件在tomahawk-1.1.4-SNAPSHOT.jar中可以找到, 目录如下:   
  52. \org\apache\myfaces\custom\navmenu\jscookmenu\resource   
  53.   
  54. 一般来说只要使用t:jscookMenu的layout,theme属性就可以了. 对JSCookMenu不是很熟悉的不要轻易使用上面的属性,以免找不到资源文件.   
  55.   
  56. t:jscookMenu只是控制menu的主题和资源文件的加载.要想让JSCookMenu发挥作用,少不了后面的两个标签   
  57. t:navigationMenuItems 和t:navigationMenuItem(这两个标签类似于f:selectitems和f:selectitem ). 下面我   
  58.   
  59. 们就来看看这两个标签吧.   
  60.   
  61. t:navigationMenuItem 该标签的主要属性有   
  62.   
  63. id,actionListener,itemLabel,itemValue,action,rendered,icon,split等.这些属性的使用都是很简单的请参考这里 http://www.hexiao.cn/myfaces/tlddoc/tomahawk-1.1.3-tlddoc/t/navigationMenuItem.html   
  64.   
  65. 如果同时指定了itemLabel和icon则menuItem会同时显示图片和文字. 如果指定了split="true"则该MenuItem会与上面的MenuItem用一个分割符号分割开.一个示例:   
  66.   
  67.                  itemLabel="返回首页" itemValue="go_home" icon="images/myfaces.gif"    
  68.   
  69. action="go_home" split="true" />   
  70.   
  71. t:navigationMenuItems是通过mbean来通过编程的方式来生成Menu. 这在MenuItem是动态的时候很有用. 该标签只有3个属性binding, value , 和id. 通过value来取得   
  72.   
  73. org.apache.myfaces.custom.navmenu.NavigationMenuItem    
  74.   
  75. (http://www.hexiao.cn/myfaces/NavigationMenuItem.html)的一个集合.   
  76.   
  77. 示例:    
  78.   public List getPanelNavigationItems() {   
  79.     List menu = new ArrayList();   
  80.     // Products   
  81.     NavigationMenuItem products = getMenuNaviagtionItem("#{example_messages  
  82.  
  83. ['panelnav_products']}"null);   
  84.     menu.add(products);   
  85.     products.add(getMenuNaviagtionItem("#{example_messages['panelnav_serach']}""#  
  86.  
  87. {navigationMenu.getAction2}")); // 在NavigationMenuItem 中可以添加二级菜单   
  88.     products.add(getMenuNaviagtionItem("#{example_messages['panelnav_serach_acc']}""#  
  89.  
  90. {navigationMenu.getAction2}"));   
  91.     NavigationMenuItem item = getMenuNaviagtionItem("#{example_messages  
  92.  
  93. ['panelnav_search_adv']}""#{navigationMenu.getAction2}");   
  94.     item.setActive(true);   
  95.     item.setOpen(true);   
  96.     item.setTarget("_blank");   
  97.     products.add(item);   
  98.     // Shop   
  99.     menu.add(getMenuNaviagtionItem("#{example_messages['panelnav_shop']}""#  
  100.  
  101. {navigationMenu.getAction2}"));   
  102.     // Corporate Info   
  103.     NavigationMenuItem corporateInfo = getMenuNaviagtionItem("#{example_messages  
  104.  
  105. ['panelnav_corporate']}"null);   
  106.     menu.add(corporateInfo);   
  107.     corporateInfo.add(getMenuNaviagtionItem("#{example_messages['panelnav_news']}""#  
  108.  
  109. {navigationMenu.getAction2}"));   
  110.     item = getMenuNaviagtionItem("#{example_messages['panelnav_investor']}""#  
  111.  
  112. {navigationMenu.getAction3}");   
  113.     //item.setIcon("images/arrow-first.gif");   
  114.     item.setDisabled(true);   
  115.     corporateInfo.add(item);   
  116.     // Contact   
  117.     menu.add(getMenuNaviagtionItem("#{example_messages['panelnav_contact']}""#  
  118.  
  119. {navigationMenu.getAction2}"));   
  120.     // External Link   
  121.     item = getMenuNaviagtionItem("External Link"null);   
  122.     item.setExternalLink("#{example_messages['external_link']}");   
  123.     item.setTarget("_blank");   
  124.     menu.add(item);   
  125.     return menu;   
  126.   }   
  127.   
  128.   private static NavigationMenuItem getMenuNaviagtionItem(String label, String action) {   
  129.     NavigationMenuItem item = new NavigationMenuItem(label, action);   
  130.     item.setActionListener("#{navigationMenu.actionListener}");   
  131.     item.setValue(label);   
  132.     return item;   
  133.   }   
  134.   
  135. jsp代码:   
  136.      
  137.     
  138.   
  139.   
  140.   
  141. 最后关于使用JSCookMenu的导航设置,请使用导航规则来控制( 必要时候可以使用<redirect></redirect>属性 )以方便导航管理和避免多级目录的导航混乱问题 。 最后有个综合示例来演示如何使用JSCookmenu,做好后将放出.    
  142.     
分享到:
评论

相关推荐

    JSCookMenu实践

    **JSCookMenu实践** JSCookMenu是一个流行的JavaScript库,用于在网页上创建复杂的下拉菜单系统。这个库提供了一种优雅的方式来组织网站的导航结构,使得用户能够轻松地浏览和访问各种页面链接。本篇文章将深入探讨...

    最棒的菜单jscookmenu

    最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu

    Tapestry JSCookMenu-开源

    JSCookMenu是与Tapestry集成的一个JavaScript库,用于创建具有可扩展子菜单的动态菜单系统,它使得在网页上创建复杂的导航结构变得更加简单。 Tapestry JSCookMenu组件允许开发者在Tapestry应用中无缝地使用...

    JSCook-开源

    结合以上分析,JSCook-开源项目是一个面向Web开发者的JavaScript工具集,其中的JSCookMenu.js用于创建交互式的菜单系统,而effect.js则提供了丰富的视觉效果。通过开源的方式,这个项目不仅提供了实用的代码库,也为...

    Suricata-开源

    `JSCookMenu.js`、`validator.js`和`menu_theme.js`这些JavaScript文件可能负责前端界面的交互和样式,例如创建下拉菜单、实现表单验证以及设定界面主题。它们是提高用户体验的关键组件,使得用户在管理项目和任务时...

Global site tag (gtag.js) - Google Analytics