[jquery][jquery-ui]垂直制表符有用吗?

标签: jQuery jQuery-UI
发布时间: 2011/5/26 16:27:36
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想沿左侧的页面,而不是选项卡顶部。我已经加载 JQuery 出于其他原因 (影响),所以我更喜欢使用 JQuery 到另一个 UI 框架。搜索"垂直制表符 jquery"产量链接到工程的进度。

获取垂直制表符,跨浏览器充满,工作还是太琐碎的一旦你有了一个解决方案,似乎不值得张贴的示例代码吗?

解决方法 1:

我不知道这是什么你在寻找,但在这里很不管怎样: http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html

解决方法 2:

看一看我试试它的 http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html ,它能正常工作。

<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style> 

<script>
    $(document).ready(function() {
        $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
        $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

    });
</script>

解决方法 3:

请尝试在这里:

http://www.sunsean.com/idTabs/

看看自由选项卡可能会有你的需要。

让我知道如果你找到你喜欢的事情。我致力于相同问题几个月前,并实现自己的决定。我喜欢做什么,但它可能是很好的使用标准库。

解决方法 4:

我不会期望垂直制表符,需要不同的 Javascript,从水平的选项卡。唯一的不同是 CSS,以便在页上呈现的标签和内容。选项卡的 JS 一般并没有多个显示/隐藏/也许负载内容。

解决方法 5:

我已做了一个垂直的菜单和选项卡页中更改

我更改了代码源上的两个词和我分开设置两个不同 Div

一是在菜单:

<div class="arrowgreen">
  <ul class="tabNavigation"> 
    <li a href="#first" title="Home">Home</a></li>
    <li a href="#secund" title="Home">Home</a></li>
  </ul>
</div> 

和其他 div 它是内容。

<div class="pages">
  <div id="first">
    CONTENT
  </div>
  <div id="secund">
    CONTENT
  </div>
</div>

代码一起使用的 div 分开

$(function () {
    var tabContainers = $('div.pages > div');

    $('div.arrowgreen ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.arrowgreen ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

我希望它可以帮助。

里卡多 · 利马

解决方法 6:

使用 。选项卡是否垂直或水平只取决如何你用 CSS 样式他们。

解决方法 7:

看看 Listamatic。选项卡语义上都只是以特定的方式设置样式的项的列表。您甚至不必 javascript,使工作作为各种示例在 Listamatic 展垂直制表符。

解决方法 8:

也有看看 jQuery 爱好者的垂直制表符

禾田,

赞助商