jquery-ui - 带有标签的弹出窗口 | jQuery

Question

我希望在单击链接时启用弹出窗口，其中弹出窗口应包含选项卡。jQuery 中是否有现成可用的 UI 或插件？至于 jQuery，我想知道是否有什么适合我的要求。请告诉我。提前致谢。

Answer 1

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

Answer 2

jQuery modal可以是一个不错的选择。您可以将任何 HTML 放入模式中。