jQuery-UI(菜单样式、拖动、放大缩小、排序...)

jQuery-UI(菜单样式、拖动、放大缩小、排序...),第1张

概述jQuery-UI(菜单样式拖动、放大/缩小、排序...)

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家,也给大家做个参考。

<!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 >   <div >   <div ID="accordion">	<h3>图片可重新排序</h3>	<div  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 >Second Second Second Second Second Second Second Second Second Second Second</div>	<h3>Third</h3>	<div >Third Third Third Third Third Third Third Third Third Third Third Third Third</div>   </div>         </div>      <div >	   <div ID="tabs">	<ul>		<li><a href="#tabs-1" >First</a></li>		<li><a href="#tabs-2" >Second</a></li>		<li><a href="#tabs-3" >Third</a></li>	</ul>	<div ID="tabs-1" >First First First First First First First First First First First First First</div>	<div ID="tabs-2" >Second Second Second Second Second Second Second Second Second Second Second</div>	<div ID="tabs-3" >Third Third Third Third Third Third Third Third Third Third Third Third Third</div>   </div>      </div>   </div>   <ul ID="menu" >     <li  >菜单(可拖动)</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>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的jQuery-UI(菜单样式、拖动、放大/缩小、排序...)全部内容,希望文章能够帮你解决jQuery-UI(菜单样式、拖动、放大/缩小、排序...)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1097619.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-28
下一篇2022-05-28

发表评论

登录后才能评论

评论列表(0条)

    保存