jQuery UI的簡單使用，輕鬆實現二級選單
阿新 • • 發佈：2019-02-19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實驗10-3 jQuery UI</title> <link rel="stylesheet" href="jquery-ui.min.css" type="text/css"/> <style> html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { padding: 20px 30px 200px; } .title { text-indent: 2em; /* color: transparent; text-shadow: 0 0 1px rgba(0,0,0,0.5); */ } /* 組合 百葉窗效果 + 選單 => 實現二級選單的製作 */ .accordion>h3 { padding: .8em; padding-left: 2em; } .accordion>div { padding: 0 !important; overflow: hidden !important; } .menu>li>div { padding: 8px; } </style> </head> <body> <h2 class="title">1.百葉窗效果</h2> <div id="accordion"> <h3>Section 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p> </div> <h3>Section 2</h3> <div> <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, faucibus interdum tellus libero ac justo.</p> </div> <h3>Section 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa.</p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <h2 class="title">2.選單</h2> <ul id="menu" style="width:100px;"> <li> <div>Item 1</div> </li> <li> <div>Item 2</div> </li> <li> <div>Item 3</div> <ul> <li> <div>Item 3-1</div> </li> <li> <div>Item 3-2</div> </li> <li> <div>Item 3-3</div> </li> </ul> </li> <li> <div>Item 4</div> </li> <li> <div>Item 5</div> </li> </ul> <h2 class="title">3.Tab導航</h2> <div id="tabs"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$( "#tabs" ).tabs(); </code></pre> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> <h2 class="title">4.組合 百葉窗效果 + 選單 => 實現二級選單的製作</h2> <div class="accordion"> <h3>Section 1</h3> <div> <ul class="menu"> <li> <div>Item 1</div> </li> <li> <div>Item 2</div> </li> <li> <div>Item 3</div> </li> <li> <div>Item 4</div> </li> <li> <div>Item 5</div> </li> </ul> </div> <h3>Section 2</h3> <div> <ul class="menu"> <li> <div>Item 1</div> </li> <li> <div>Item 2</div> </li> <li> <div>Item 3</div> </li> </ul> </div> <h3>Section 3</h3> <div> <ul class="menu"> <li> <div>Item 1</div> </li> <li> <div>Item 2</div> </li> <li> <div>Item 3</div> </li> <li> <div>Item 4</div> </li> </ul> </div> </div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script> //初始化 百葉窗效果 $( "#accordion" ).accordion({ active: 2, animate: 200, classes: { "ui-accordion": "highlight" }, /*disabled: true,*/ heightStyle: "fill", icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }); //初始化 選單 $( "#menu" ).menu({ classes: { "ui-menu": "highlight" }, position: { my: "left top", at: "right-5 top-5" } }); //初始化 Tab導航 $( "#tabs" ).tabs(); //組合 百葉窗效果 + 選單 => 實現二級選單的製作 $( ".accordion" ).accordion({ heightStyle: "content" }); $( ".menu" ).menu(); </script> </body> </html>