jQuery-ui 选项卡 CSS 无法正常运行

发布于 2024-11-29 10:42:55 字数 3801 浏览 1 评论 0原文

我正在用 PHP 开发一个高级数据库管理器(对于傻瓜来说基本上是 phpMyAdmin,只给管理员创建表的能力,然后管理员创建表单供用户输入数据)。对于大多数此类应用程序,我更关心后端而不是外观,因此我一直借用 jQuery-UI 来加快编码速度。

当我创建管理仪表板时,我遇到了一个问题。我使用了 jQuery-UI 选项卡的默认实现,并且 ui-tab-nav 自行拉伸以垂直填充页面。

我已将错误追溯到我的以下 CSS 规则:

#sidebar { float:left; }

这显示了我遇到的错误:

$(function() {
    $("#tabs").tabs();
});
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#sidebar {
    float: left;
    height: 100%;
    width: 200px;
    margin: inherit;
    padding: inherit;
    overflow: auto;
    border-right: solid 1px #000;
}
#sidebar .menu {
    margin: 10px;
    padding: inherit;
    list-style: none;
}
.title {
    font-size: 1.5em;
    font-weight: bold;
    margin: inherit;
    padding: inherit;
}
#sidebar .menu .nav-section {
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: solid 1px #000;
    margin: 20px 0;
    padding: inherit;
}
#content {
    position: relative;
    margin-left: 201px;
    /* 200px width + 1px border */
    padding: inherit;
}
#header {
    margin: inherit;
    padding: inherit;
    background: #FF9;
}
#header label {
    margin-left: 20px;
}
#myForm th {
    background-color: #999;
    border: 1px #000 solid;
}
#myForm td {
    border: 1px #000 solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="sidebar">
    <h2 class="title">DBManager: <em>Administrators</em></h2>
    <ul class="menu">
        <li class="nav-section">Forms</li>
        <li><a href="?form=demos">Demos</a> - <a href="?form=demos&edit=1">Edit</a></li>
        <li class="nav-section">Reports</li>
        <li><a href="?report=school-copy">School Copy</a> - <a href="?report=school-copy&edit=1">Edit</a></li>
        <li class="nav-section">Actions</li>
        <li><a href="phpMyAdmin">phpMyAdmin</a></li>
        <li><a href="?dashboard=1">Dashboard</a></li>
        <li><a href="?logout=1">Logout</a></li>
    </ul>
</div>

<div id="content">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>
</div>

JSFiddle 演示

通过注释掉此规则,jQuery-UI 选项卡可以正常显示,但整个内容框是推到我的侧边栏下方。选项?

I'm working on an advanced database manager in PHP (essentially phpMyAdmin for dummies, giving only Administrators the ability to create tables, then admins create forms for users to input data). For most of this applications I'm more concerned with the back-end than the appearance, so I've been borrowing jQuery-UI to speed up coding.

As I was creating the administrative dashboard I ran into an issue. I used the default implementation of jQuery-UI tabs and the ui-tab-nav stretched itself to fill the page vertically.

I've traced the error to the following CSS rule of mine:

#sidebar { float:left; }

This shows the error that I'm having:

$(function() {
    $("#tabs").tabs();
});
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#sidebar {
    float: left;
    height: 100%;
    width: 200px;
    margin: inherit;
    padding: inherit;
    overflow: auto;
    border-right: solid 1px #000;
}
#sidebar .menu {
    margin: 10px;
    padding: inherit;
    list-style: none;
}
.title {
    font-size: 1.5em;
    font-weight: bold;
    margin: inherit;
    padding: inherit;
}
#sidebar .menu .nav-section {
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: solid 1px #000;
    margin: 20px 0;
    padding: inherit;
}
#content {
    position: relative;
    margin-left: 201px;
    /* 200px width + 1px border */
    padding: inherit;
}
#header {
    margin: inherit;
    padding: inherit;
    background: #FF9;
}
#header label {
    margin-left: 20px;
}
#myForm th {
    background-color: #999;
    border: 1px #000 solid;
}
#myForm td {
    border: 1px #000 solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="sidebar">
    <h2 class="title">DBManager: <em>Administrators</em></h2>
    <ul class="menu">
        <li class="nav-section">Forms</li>
        <li><a href="?form=demos">Demos</a> - <a href="?form=demos&edit=1">Edit</a></li>
        <li class="nav-section">Reports</li>
        <li><a href="?report=school-copy">School Copy</a> - <a href="?report=school-copy&edit=1">Edit</a></li>
        <li class="nav-section">Actions</li>
        <li><a href="phpMyAdmin">phpMyAdmin</a></li>
        <li><a href="?dashboard=1">Dashboard</a></li>
        <li><a href="?logout=1">Logout</a></li>
    </ul>
</div>

<div id="content">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>
</div>

JSFiddle Demo

With this rule commented out the jQuery-UI tabs display properly, however the entire content box is pushed below my sidebar. Options?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

傾城如夢未必闌珊 2024-12-06 10:42:55

#tabs div 向左浮动:http://jsfiddle.net/UCeLf/

#tabs { float:left; }

Float the #tabs div left as well: http://jsfiddle.net/UCeLf/

#tabs { float:left; }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文