jquery - 如何创建一个带有 iframe 和多个选项卡的对话框？

Question

当我单击一个选项卡时，我想打开一个对话框，其中包含多个链接到其他对话框的选项卡。这些其他对话框将包含 iframe。

请查看我从在线商店引用的以下工作网站: Link

Answer 1

我无法完成您在问题中描述的完整示例 - 我最终会完成您的整个元素。但这是您可能最困惑的部分。

您可以使用 jQuery 和 jQueryUI 做很多事情。这个例子中的代码很少，看看它做了什么。

您将想要探索 jQueryUI 对话框和选项卡“小部件”(他们的术语 - 我会称它们为插件或附加组件或其他名称)，尤其是每个小部件的“API”。 API 告诉您如何控制小部件的各个方面，并提供了许多示例。例如——我怎么知道在对话框定义中使用 autoOpen:false？ API 和示例。

jQuery 和 jQueryYI 是一个很好的起点。

非常重要:注意在 HTML 的顶部包含三个库:

• jQueryUI 的 CSS
  
• jQuery 库
  
• jQueryUI 库(必须遵循 jQuery 库，否则无法使用)

$( "#tabs" ).tabs(); //makes the tabs work (inside Dlg)

$( "#myDlg" ).dialog({
  autoOpen: false,
  title: 'Just a Q&D example - jQUI is super configurable',
  width: 800,
  closeOnEscape: true,
  modal: true
});

$('#btnOpenSesame').click(function(){
  $('#myDlg').dialog('open');
});

iframe{min-width:1000px;min-height:500px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Above order of libraries is important -->

<h4>This example displays best in Full Screen (look for that link at top right of running example)</h4>

<button id="btnOpenSesame">Open Dialog</button>

<div id="myDlg">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Wikipedia</a></li>
      <li><a href="#tabs-2">ZeroHedge</a></li>
      <li><a href="#tabs-3">Breitbart</a></li>
    </ul>
    <div id="tabs-1">
      <iframe src="http://wikipedia.org"></iframe>
    </div>
    <div id="tabs-2">
      <iframe src="http://zerohedge.com"></iframe>
    </div>
    <div id="tabs-3">
      <iframe src="http://breitbart.com"></iframe>
    </div>
  </div><!-- #tabs -->
</div><!-- #myDlg -->

---

您还应该查看以下教程(如果您还没有完全适应):

http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

http://www.w3schools.com/jquery/default.asp

http://www.w3schools.com/css/default.asp

---

更新:要在按下按钮后选择事件选项卡，请使用

$( ".selector" ).tabs( "option", "active", 1 );

例子:

$( "#tabs" ).tabs(); //makes the tabs work (inside Dlg)

$( "#myDlg" ).dialog({
  autoOpen: false,
  title: 'Just a Q&D example - jQUI is super configurable',
  width: 800,
  closeOnEscape: true,
  modal: true
});

$('#btnOpenSesame').click(function(){
  $('#myDlg').dialog('open');
});

$('#btnTab0').click(function(){
  $( "#tabs" ).tabs( "option", "active", 0 );
});
$('#btnTab1').click(function(){
  $( "#tabs" ).tabs( "option", "active", 1 );
});
$('#btnTab2').click(function(){
  $( "#tabs" ).tabs( "option", "active", 2 );
});

iframe{min-width:1000px;min-height:500px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Above order of libraries is important -->

<h4>This example displays best in Full Screen (look for that link at top right of running example)</h4>

<button id="btnOpenSesame">Open Dialog</button>

<div id="myDlg">
  <div>
    <button id="btnTab0">Open Tab 0</button>
    <button id="btnTab1">Open Tab 1</button>
    <button id="btnTab2">Open Tab 2</button>
  </div>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Wikipedia</a></li>
      <li><a href="#tabs-2">ZeroHedge</a></li>
      <li><a href="#tabs-3">Breitbart</a></li>
    </ul>
    <div id="tabs-1">
      <iframe src="http://wikipedia.org"></iframe>
    </div>
    <div id="tabs-2">
      <iframe src="http://zerohedge.com"></iframe>
    </div>
    <div id="tabs-3">
      <iframe src="http://breitbart.com"></iframe>
    </div>
  </div><!-- #tabs -->
</div><!-- #myDlg -->