jQuery-UI（菜单样式、拖动、放大/缩小、排序...）

2015/01/02 36557

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!doctype html>
<html>
<head>
  <title>jquery-ui</title>
  <meta html-equiv="content-type" content="text/html,charset=utf-8"></meta>
</head>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/nav.css">
  <script>
    $(function(){
	  $("#menu").menu();          <!---菜单样式-->
	  $("#menu" ).draggable();   <!---可拖动-->
	  $("#menu").resizable();    <!--放大/缩小-->
	  $("#tabs").tabs();
	  $("#accordion").accordion();
	   $( "#sortable" ).sortable();  <!--排序-->
      $( "#sortable" ).disableSelection();
	});
  </script>
  <style>
   body{
   width:90%;
   background:url(image/bg0.jpg);
   margin:0 auto;
   }
    .ui-menu {
	   width:100px;
	   text-align:center;
	   margin:0 auto;
	}
	.ui-tabs{
	 border:1px solid green;
	}
	#accordion{
	  width:100%;
	  height:200px;
	}
	.content{
	 height:1000px;
	 width:100%;
	 border:5px solid #87CEFA;
	 -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius:15px;
	}
    .cdown{ 
	   margin:0 auto;
	   width:100%;
	}
	.ctop{
	 margin:0 auto;
	  width:100%;
	   height:500px;
	}
	
	#tabs-1{
	  background:url(image/p-bg1.jpg) no-repeat;
	}
	#tabs-2{
	  background:url(image/p-bg2.jpg) no-repeat;
	}
	#tabs-3{
	  background:url(image/p-bg3.jpg) no-repeat;
	} 

	#tabs ul li{
	background:#76EEC6;
	}
	 
	.c{
	  height:250px;
	}
	#sortable image{
	  width:155px;
       margin-left:10px;	
	}


  </style>
<body>

  <nav>
     <ul>
       <li><a href="#" >首页</a></li>
       <li><a href="#" >第一</a></li>
	   <li><a href="#" >第二</a></li>
	   <li><a href="#" >第三</a></li>
	   <li><a href="#" >第四</a></li>
	   <li><a href="#" >关于我们</a></li>
     </ul>
  </nav>
 <div class="content">
   <div class="ctop">
   <div id="accordion">
	<h3>图片可重新排序</h3>
	<div class="c" id="sortable"><image src="image/pic1.jpg"/><image src="image/pic2.jpg"/><image src="image/pic3.jpg"/><image src="image/pic4.jpg"/><image src="image/pic5.jpg"/></div>
	<h3>Second</h3>
	<div class="c">Second Second Second Second Second Second Second Second Second Second Second</div>
	<h3>Third</h3>
	<div class="c">Third Third Third Third Third Third Third Third Third Third Third Third Third</div>
   </div>
      
   </div>
      <div class="cdown">
	   <div id="tabs">
	<ul>
		<li><a href="#tabs-1" class="one">First</a></li>
		<li><a href="#tabs-2" >Second</a></li>
		<li><a href="#tabs-3" >Third</a></li>
	</ul>
	<div id="tabs-1" class="c">First First First First First First First First First First First First First</div>
	<div id="tabs-2" class="c">Second Second Second Second Second Second Second Second Second Second Second</div>
	<div id="tabs-3" class="c">Third Third Third Third Third Third Third Third Third Third Third Third Third</div>
   </div>
      </div>
   </div>


   <ul id="menu" class="ui-widget-content">
     <li class="ui-state-disabled" style="font-size:10px;text-align:center">菜单(可拖动)</li>
     <li><a href="#">abcd</a>
	   <ul>
	     <li><a href="#">aaa</a></li>
		 <li><a href="#">bbb</a></li>
		 <li><a href="#">ccc</a></li>
		 <li><a href="#">ddd</a></li>
	   </ul>
	 </li>
	  <li><a href="#">efg</a>
	   <ul>
	     <li><a href="#">eee</a></li>
		 <li><a href="#">fff</a></li>
		 <li><a href="#">ggg</a></li>
	   </ul>
	 </li>
   </ul>
  
   </div>
   
  
  
   
</body>
</html>