- <!doctype html>
- <html>
- <head>
- <title>jquery-ui</title>
- <meta html-equiv="content-type" content="text/html,charset=utf-8"></meta>
- </head>
- <link rel="stylesheet" >
- <script src1="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
- <script src1="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
- <link rel="stylesheet" type="text/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 src1="image/pic1.jpg"/><image src1="image/pic2.jpg"/><image src1="image/pic3.jpg"/><image src1="image/pic4.jpg"/><image src1="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>
- //该片段来自于http://www.codesnippet.cn/detail/2101201511591.html
来源: http://www.codesnippet.cn/detail/2101201511591.html