JQuery 实现2个静态菜单效果

日期 2009年3月13日 换公司后的第二天

公司要求用到 JQuery , 以前最它只有一些简单的了解...看来必须好好的学习下才行啊..

今天初步的做了2个菜单效果..实现比较简单..现记录如下:

首先需要对 JQuery 一些基本的选择器用法有一定的了解..

(注意哦.:都是静态效果的,)

第一个: 树型菜单

    1:要准备的包: jquery.js(jquery核心包)
                jquery.treeview.js(下载这个树型的plugin)

    2:html代码如下,每一个<ul>表示一个父节点,父节点下面每一个平级子节点用<li>标签

<div id="titleDiv" class="titleDiv">
    	树菜单
    </div>
    <div id="workDiv" class="workDiv">
      <div>
    <ul id="tree" class="treeview">
	 <li>
	     <a href="?1" >item 1</a>
	     <ul>
	       <li>
		<a href="?1.0"> item 1.0</a>
		 <ul>
	           <li>
		     <a href="?1.0.0">item 1.0.0</a>
		  </li>
		  <li>
	              <a href="?1.0.1">item 1.0.1</a>
		   </li>
		  <li>
		     <a href="?1.0.2">item 1.0.2</a>
	           </li>
		 </ul>
	</li>
	<li>
	  <a href="?1.1"> item 1.1</a>
	</li>
	<li>
	  <a href="?1.2"> item 1.2</a>
	  <ul>
	     <li>
		<a href="?1.2.0">item 1.2.0</a>
	     </li>
	     <li>
		<a href="?1.2.1">item 1.2.1</a>
	     </li>
	     <li>
		<a href="?1.2.2">item 1.2.2</a>
	     </li>
	     <li>
		<a href="?1.2.3">item 1.2.3</a>
	     </li>
	  </ul>
	</li>
      </ul>
    </li>
    <li>
      <a href="?2">item 2</a>
      <ul>
         <li>
           <a href="?2.0">item 2.0</a>
           <ul>
              <li>
	        <a href="?2.0.0">item 2.0.0</a>
	        <ul>
		  <li>
		     <a href="?2.0.0.0">item 2.0.0.0</a>
		   </li>
		   <li>
		      <a href="?2.0.0.1">item 2.0.0.1</a>
		      <ul>
		        <li>
			<a href="?2.0.0.1.0">item 2.0.0.1.0</a>
			</li>
		      </ul>
		   </li>
		</ul>
	     </li>
	<li>
            <a href="?2.0.1">item 2.0.1</a>
	</li>
	<li>
	   <a href="?2.0.2">item 2.0.2</a>
	</li>
      </ul>
    </li>
    <li>
	<a href="?2.1">item 2.1</a>
    </li>
  </ul>
 </li>
<li>
   <a href="?3">item 3</a>
   <ul>
     <li></li>
   </ul>
</li>
</ul>
</div>
<br>

3:JS代码如下:

jQuery(document).ready(function(){
  			jQuery("#tree").treeview({
  				collapsed: true,//设置相关参数
  				animated: "medium",
  				persist: "location"
  			});
  	            });

第二个菜单

所需要的包:  jquery.js  ui.core.js  ui.accordion.js
           (ui.core 好象是必须在 ui.accordion 前面导入)

  		jQuery(document).ready(function(){
  
  			jQuery("#accodin").accordion({event:"click",alwaysOpen:false,active:""});

  		});

<div>
  <ul id="accodin" class="">
    <li>
       <a href="#">Test 1</a>
       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </li>
    <li>
    	<a href="#">Test 2</a>
    	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </li>
    <li>
    	<a href="#">Test 3</a>
    	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur.</div>
    </li>
    <li>
    	<a href="#">Test 4</a>
         <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </li>
  </ul>
</div>