Question

当我们点击链接时，我想要一个弹出窗口，弹出窗口应包含选项卡。是否可以在jQuery中使用现成的UI或插件？至于jQuery，我想知道是否符合我的要求。请告诉我。提前谢谢。

Answer 1

使用jQueryUI。它拥有您需要的一切。

正如网站所说：

jQuery UI是一组策划的用户界面交互，效果，小部件和构建在jQuery JavaScript库之上的主题。无论您是构建高度交互的Web应用程序还是您只需要在表单控件中添加日期选择器，jQuery UI即可完美的选择。

它有Popups
它有Tabs

实施例弹出窗口中的选项卡示例

<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>

Answer 2

jQuery modal可能是个不错的选择。您可以将任何HTML放在模态中。

弹出标签| jQuery的

2 个答案: