Question

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

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

Answer 1

我无法完成您在问题中描述的完整示例 - 我最终会完成您的整个项目。但这是你可能最难坚持的部分。

你可以用jQuery和jQueryUI做很多事情。此示例中的代码非常少，看看它的作用。

您将需要探索jQueryUI对话框和Tab＆＃34;小部件＆＃34; （他们的术语 - 我称之为插件或附加组件或其他东西），尤其是＆＃34; API＆＃34;为每个小部件。 API告诉您如何控制窗口小部件的每个方面并提供许多示例。例如 - 我如何知道在对话框定义中使用autoOpen:false？ API和示例。

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

非常重要：请注意，HTML顶部包含三个库：

jQueryUI的CSS
jQuery library
jQueryUI库（必须遵循jQuery库或它不会工作）

＆＃13;

$( "#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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

您还应该查看以下教程（如果您还不完全熟悉的话）：

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

示例：

＆＃13;

$( "#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 );
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何创建一个包含iframe和多个标签的对话框？

1 个答案: