Question

我已经创建了一个标签式对话框窗格，如下所示：JSFiddle 这是我的完整源代码：

$.fn.tabbedDialog = function() {
  this.tabs();
  this.dialog({
    'modal': true,
    'minWidth': 400,
    'minHeight': 300,
    'draggable': true
  });
  this.find('.ui-tab-dialog-close').append($('a.ui-dialog-titlebar-close'));
  this.find('.ui-tab-dialog-close').css({
    'position': 'absolute',
    'right': '0',
    'top': '23px'
  });
  this.find('.ui-tab-dialog-close > a').css({
    'float': 'none',
    'padding': '0'
  });
  var tabul = this.find('ul:first');
  this.parent().addClass('ui-tabs').prepend(tabul).draggable('option', 'handle', tabul);
  this.siblings('.ui-dialog-titlebar').remove();
  tabul.addClass('ui-dialog-titlebar');
}
$('#tenant').tabbedDialog();

<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tenant">
  <ul>
    <li><a href="#tenant_details">My Tenant</a>
    </li>
    <li><a href="#tenant_events">Events</a>
    </li>
    <li><a href="#tenant_jobs">Jobs</a>
    </li>
    <li class="ui-tab-dialog-close"></li>
  </ul>
  <div>
    <div id="tenant_details">
      some details
    </div>
    <div id="tenant_events">
      some events
    </div>
    <div id="tenant_jobs">
      some jobs
    </div>
  </div>
</div>

当我在浏览器上预览我的代码时，它只显示内容而不格式化选项卡式窗格。我实际看了我的代码，一切似乎都很好。有没有更好的方法，我还没想到？

Answer 1

您没有链接JQuery UI脚本和样式：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css">

在提供的jsfiddle中，确切地说是在编辑器外部链接的资源（在左窗格中）。

您更好使用最新版本的JQuery UI：

<script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<强> UPD

使用以下代码更新您的<head>（不是在jsfiddle中）：

<head>
    <title>Welcome to tabbed layout</title>
    <!-- 1. JQuery 2.1.1 JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 2. JQuery UI 1.11.3 JS -->
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <!-- 3. JQuery UI 1.11.3 CSS -->
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
</head>

<强> UPD2

将JQuery UI更新为上一版本后，关闭按钮已损坏。这是因为JQuery UI类已经通过主要版本进行了更改。

将按钮替换为：

<li class="ui-button-icon-primary ui-icon ui-icon-closethick"></li>

用新类替换所有关闭按钮类：

this.find('.ui-icon-closethick').append($('a.ui-dialog-titlebar-close'));
this.find('.ui-icon-closethick').css({'position':'absolute','right':'0', 'top':'6px'});
this.find('.ui-icon-closethick > a').css({'float':'none','padding':'0'});

按top: 6px;修正最高班次。

＆＃13;

$.fn.tabbedDialog = function () {
    this.tabs();
    this.dialog({'modal':true,'minWidth':400, 'minHeight':300,'draggable':true, 'autoOpen': false});
    var $dialog = $(this).closest('.ui-dialog');
    this.find('.ui-icon-closethick').append($('.ui-dialog-titlebar-close')).css('position', 'static');
    $dialog.find('.ui-draggable-handle').append($('.ui-tabs-nav').removeClass().addClass('ui-tabs-nav')).addClass('ui-tabs');
    $dialog.find('.ui-dialog-title').remove();
}
$('#tenant').tabbedDialog();

$('button#show').click(function() {
  if ($('#tenant').dialog("isOpen")) {
    $('#tenant').dialog('close');
  }
  else
  {
    $('#tenant').dialog('open');
  }
});

＆＃13;

#tenant
{
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tenant">
  <ul>
    <li><a href="#tenant_details">My Tenant</a>
    </li>
    <li><a href="#tenant_events">Events</a>
    </li>
    <li><a href="#tenant_jobs">Jobs</a>
    </li>
    <li class="ui-icon-closethick"></li>
  </ul>
  <div>
    <div id="tenant_details">
      some details
    </div>
    <div id="tenant_events">
      some events
    </div>
    <div id="tenant_jobs">
      some jobs
    </div>
  </div>
</div>

<button id="show">Show / hide</button>

＆＃13;

<强> UPD3

添加了打开/关闭按钮。

使用jquery UI和CSS的选项卡式对话框窗格

1 个答案: