2013-06-22 33 views
1

我想要一個彈出窗口來啓用當我們點擊一​​個鏈接,其中彈出窗口應該包含選項卡。是否有任何UI或插件可以在jQuery中使用?至於jQuery,我想知道是否有任何適合我的要求。請告訴我。提前致謝。用選項卡彈出| jQuery

回答

1

jQuery modal可以是一個不錯的選擇。你可以把任何HTML內的模態。

4

使用jQueryUI。它擁有你需要的一切。

正如網站上說:

jQuery UI的是一個策劃組的用戶界面交互,效果, 小部件和主題建立在jQuery JavaScript庫的頂部。 無論您是構建高度互動的Web應用程序,還是您只需將日期選擇器添加到表單控件,jQuery UI就是 的完美選擇。


例 彈出

<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 

 
    <div id="dialog" title="Basic dialog"> 
 
     <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
 
     
 
     <div id="tabs"> 
 
     <ul> 
 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
 
     <li><a href="#tabs-2">Proin dolor</a></li> 
 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
 
     </ul> 
 
     <div id="tabs-1"> 
 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ulla interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
 
     </div> 
 
     <div id="tabs-2"> 
 
     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
 
     </div> 
 
     <div id="tabs-3"> 
 
     <p>Mauris eleifend est et tur potenti. Aliquam vulputbitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
 
     </div> 
 
    </div> 
 
     
 
    <script> 
 
     $(function() { 
 
     $("#tabs").tabs(); 
 
     $("#dialog").dialog({ width: 600 }); 
 
     }); 
 
    </script>
中的多個標籤的一個例子