标签: jquery-ui-tabs

TAB1的内容由来自远程URL的ajax加载.选择TAB1时,我必须切换到TAB2,然后返回到TAB1以刷新加载的内容.

如何在单击其选项卡时使TAB1刷新加载的内容？

编辑: HTML代码如下

<div id="tabs">
    <ul>
        <li><a href="url1">Tab1</a></li>
        <li><a href="url2">Tab2</a></li>
    </ul>
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        $tabs = $("#tabs").tabs({
            select: function(event, ui) {
                $('a', ui.tab).click(function() {
                    $(ui.panel).load(this.href);
                    return true;
                });
            }
        });
});
</script>

我有一个Web应用程序,主要由一个包含信息的大表单组成.表单分为多个选项卡,以使其对用户更具可读性:

<form>
<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
  </ul>
  <div id="tab1">A big table with a lot of input rows</div>
  <div id="tab2">A big table with a lot of input rows</div>
</div>
</form>

表单是动态扩展的(额外的行添加到表中).每隔10秒,表单就会被序列化并与服务器同步.

我现在想在其中一个选项卡上添加交互式表单:当用户在字段中输入名称时,此信息将发送到服务器并返回与该名称关联的ID.此id用作某些动态添加的表单字段的标识符.

这样一个页面的快速草图将如下所示:

<form action="bigform.php">
<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
  </ul>
  <div id="tab1">A big table with a lot of input rows</div>
  <div id="tab2">
    <div class="associatedinfo">
    <p>Information for Joe</p>
    <ul>
      <li><input name="associated[26][]" /></li>
      <li><input name="associated[26][]" /></li>
    </ul>
    </div>

    <div class="associatedinfo">
    <p>Information for Jill</p>
    <ul>
      <li><input name="associated[12][]" /></li> …

有没有人知道如何在jQuery UI标签中居中对齐标签？

(默认情况下它们是左对齐的,我在doc中找不到对齐选项)

这是一个页面,我用它来组合一些图表,当前的代码很简单:

    $('#chart_tabs').tabs();

更新: CSS代码:

    .ui-tabs .ui-tabs-nav {
            text-align: center;
    }

    .ui-tabs .ui-tabs-nav li {
            float: none !important;
            display: inline-block;
    }

Didier建议(谢谢)将标签中心对齐,但也在标签 - "按钮"下面放了一些奇怪的空白:

这可能有点难以解释,但我会尽我所能.我有一个包含两个标签的产品页面,完整描述和视频.这些都是使用jQuery UI Tabs完成的.

在页面的这一部分上方,我有一个带缩略图的产品图片......但我希望其中一个缩略图成为查看视频的链接(当然包含在视频选项卡中).

如果我将页面加载为site.com/product#video,它会加载正确的选项卡...但是当选项卡未激活时,我使用#tab div之外的链接(例如:视频),它什么都不做

如果#tab div中没有​​包含标签,我如何获得打开标签的链接？

码

此代码位于选项卡之外,需要打开#video选项卡

<a href="#video">Open Video Tab</a>

标签代码

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="product-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover"><a href="#description">Full Description</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#video">Video</a></li>
</ul>
<div class="product-collateral">
    <div class="box-collateral box-description">
        <div id="description" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
           Content
        </div>
        <div id="video" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
            <h2 class="video">Video Content</h2>
        </div>
    </div>
</div>
</div>

我正在使用JQuery UI在我的应用程序中制作标签.我需要选项卡是可链接的(直接链接打开页面并选择正确的选项卡).这是通过使用散列标记/ 分段标识符来完成的.但是当选项卡上方和选项卡内部的内容很长时,我遇到了问题.

单击选项卡时,页面向下滚动到选项卡的开头.这不是我想要的.

我正在使用Jquery 1.7.1和Jquery UI 1.8.16.

javascript/Jquery代码是标准的Jquery UI选项卡,添加了事件"tabsshow".这在使用jquery ui标签更改location.hash(Stackoverflow问题)和JQuery UI标签时建议:点击标签时更新带有哈希的URL(博客 - 罗宾的技术日记)

$(document).ready(function() {
    $("#tabs").tabs();

    /**
     * Add hash to URL of the current page
     * 
     * http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html
     * https://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs
     */
    $("#tabs").bind('tabsshow',function(event, ui) {
        window.location.hash = ui.tab.hash;
    });
});

以下HTML可用于测试行为

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<div style="height: 400px;">Some other content</div>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top"><a href="#tab_1"><span>Tab 1</span></a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tab_100"><span>Tab 100</span></a></li> …

我有一个标签屏幕,并希望在提交表单并且返回有效后触发所选选项卡上的单击.这里是html的一部分:

<ul id="tabUL" class="tabs js-tabs same-height">
    <li class="current">
        <a class="tabLink" href="#tabProducts" data-url="/bla/bla">Products</a>
    </li>
</ul>

我的成功命令是:

success: function(data, textStatus, XMLHttpRequest) {
    $('#tabUL').find('li.current a').trigger('click');
}

这似乎不起作用......任何帮助表示赞赏:)问候安德里亚

对于使用JQuery-UI选项卡的页面,如何允许用户在选项卡标题中选择文本？

我有一些动态标签,并希望用户能够选择标题复制到剪贴板.

例如在Demo页面上,我希望能够选择复制/粘贴'Nunc tincidunt'.'Proin dolor'和'Aenean lacinia'.甚至是标题的一部分(例如'Proin','Aenean','tincidunt').

我有一组选项卡,代表表单的不同部分,全部对齐到左侧.当用户填写所有部分时,我希望他能够查看整个表单.

我正在使用jQuery UI选项卡来分割不同部分的部分.用户可以根据需要在各部分之间切换.

我现在想要以下内容:

• 部分选项卡标题应该左对齐(这是jQuery UI的默认设置)
• 打印概览选项卡标题应与右侧对齐,并且(可能)具有不同的样式

所以问题是:如何在jQuery UI中更改单个选项卡的样式？

是否有可用于jQuery UI的标签小部件的事件监听器？

我想根据当前活动的选项卡索引更改网页上的背景颜色.这样的事情(伪代码):

$('.tabs').addEventListener(index, changeBackgroundImage);

function changeBackgroundImage(index) {
    switch (index) {
        case 1:
            $('body').css('background-image', '/images/backgrounds/1.jpg');
        break;
        case 2:
            $('body').css('background-image', '/images/backgrounds/2.jpg');
        break;
        case 3:
            $('body').css('background-image', '/images/backgrounds/3.jpg');
        break;
        default:
            $('body').css('background-image', '/images/backgrounds/default.jpg');
        break;
    }
};

提前致谢.

我正在使用jquery UI选项卡,我需要主要更改它的样式.我需要重新审视背景图像,边框,几乎所有内容.我需要它看起来很小,而不是像它自成一体.

最好的方法是什么？我需要使用日历小部件的默认UI样式,它位于同一页面上.我做了很多研究,每个人似乎都指向主题 - 滚动.但是,我不只是想改变颜色和边框半径.我需要删除废话.主题 - 滚动似乎只是改变颜色之类的东西(对现实世界不是很有用).如何在不改变同一页面上其他UI小部件的样式的情况下调整选项卡的css(我希望日历保持不变)？

是否值得为我的标签使用jquery UI？