`
tntxia
  • 浏览: 1487993 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

MenuBar是EasyAjax中的实现

CSSJavaScript旅游prototypeAjax 
阅读更多
xml 代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <title>澳翔航空港title>  
  4.   
  5. <script type="text/javascript" src="jscalendar/calendar.js">script>  
  6. <script type="text/javascript" src="jscalendar/lang/calendar-zh.js">script>  
  7. <script type="text/javascript" src="js/prototype.js">script>  
  8. <script type="text/javascript" src="js/easyajax.js">script>  
  9. <link href="css/style.css" rel="stylesheet" type="text/css"/>  
  10. <link rel="alternate stylesheet" type="text/css" media="all" href="../css/calendar-blue.css" title="winter" />  
  11. head>  
  12.   
  13. <body onload="ajax.DomBean.InitPage();">  
  14.     <div id="MenuArea" width="800" background="#cccccc">  
  15.     <ul jsclass="easy.MenuBar">  
  16.           <li><a href="index.htm">主页a>li>  
  17.       <li><a href="login.htm">登陆a>li>  
  18.       <li><a href="register.htm">注册a>li>  
  19.       <li><a href="#">查询a>  
  20.          <ul>  
  21.             <li><a href="ticketSearch.htm">机票查询a>li>  
  22.             <li><a href="hotelSearch.htm">酒店查询a>li>  
  23.          ul>           
  24.       li>  
  25.       <li>  
  26.          <a href="#">旅游杂志a>  
  27.          <ul>  
  28.          <li><a href="magzine/beijing.htm">历史名城 - 北京a>li>  
  29.          <li><a href="http://www.shanghai.gov.cn/">文化都会 - 上海a>li>  
  30.          ul>  
  31.       li>  
  32.       <li>  
  33.          <a href="#">旅游论坛a>  
  34.       li>  
  35.       <li><a href="mailto:shin.chen@et-china.com">联系我们a>li>  
  36.       ul>     
  37.     div>  
  38.   
  39. <p>     
  40.   <input name="button3" type="button" onclick="Element.toggle('src');" value="Toggle Source Code" />  
  41.   <textarea id="src" class="srcarea" rows="10" style="width:100%;display:none" disabled="true" >  
  42.   textarea>  
  43. p>  
  44.   
  45. <script type="text/javascript">  
  46.      $("src").value=$("MenuArea").innerHTML;   
  47. script>  
  48. body>  
  49. html>  

具体的实现说明

１.　实现需要两个JS，

xml 代码
  1. <script type="text/javascript" src="js/prototype.js">script>  
  2. <script type="text/javascript" src="js/easyajax.js">script>  

可能从EasyAjax里面得到

２.　需要ul标签，并把它的jsclass属性设为easy.MenuBar，如果ul内还有ul那么就会出现下拉菜单的效果

３　需要CSS，也可以在EasyAjax上得到

xml 代码
  1. <link href="css/style.css" rel="stylesheet" type="text/css"/>  

４　效果图

  • 大小: 8.5 KB
分享到：
| 使用TextArea
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics