标签: jquery-ui-tabs

我有一个包含一组jQuery选项卡的页面.所有选项卡都指向同一个目标div,但是通过ajax加载不同的内容.当我执行初始整页加载时,我需要根据各种因素设置不同的活动选项卡.目标div中的内容已经在服务器上为此初始加载设置,因此我不需要单击选项卡,我只需要将正确的选项卡设置为"选中".我已经尝试将相关"li"html元素的类设置为"ui-tabs-selected".这具有初始期望的效果,但是一旦页面被加载然后在选择另一个选项卡时,预选的选项卡不会关闭,从而选择两个选项卡.

那么,有没有人知道预选一个标签的替代方法(不会导致它被点击),或者是我所看到的奇怪的"ui-tabs-selected"行为的解决方案.

谢谢.

<script type="text/javascript">
    $(function() {
        $("#panelTabs").tabs({
            ajaxOptions: {
                error: function(xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible.");
                }
            }
        });

        $("#panelTabs").tabs({
            select: function(event, ui) {
                getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
            }
        });
    });
    </script>

以及构建UL的C#片段:

StringBuilder tabsLiteral = new StringBuilder();
            tabsLiteral.Append("<ul>");
            foreach (KeyValuePair<string, Tab> kvp in tabs)
            {
                tabsLiteral.Append("<li>");
                // Note - the kvp.Value.URI determines what should happen when the Tab is clicked
                tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" …

有没有办法重新加载选定的选项卡我知道有.load()函数.但它想要一个标签索引,我似乎没有看到一种方法来获取选定的标签ID.

我不确定此刻是否可行,而且我所做的测试似乎提供了奇怪的结果.

我在一个页面上有一个4个选项卡的部分,这些选项卡内部是几个文本部分,每个部分都给出了一个唯一的锚名称.

我想要做的是从另一页链接到标签3中的第4块内容...

选项卡都很好用,如果我链接到第一个选项卡上的内容部分它很好..它当我想要链接到第一个它变得棘手的选项卡..

我试过了

<a href="http://example.com#tab-3#content-4" ></a>

但这根本不起作用

当我使用时

<a href="http://example.com#tab-3"></a>

我也看到了这个实现 - 但它似乎具有与使用上面的代码相同的功能,无论这是否在我的jquery调用中

$(function(){
  $('tabs').tabs();
  var hash = location.hash;
  $('tabs').tabs( "select" , hash );
});

使用上述2个选项中的任何一个,而选择第三个选项卡时,我会一直推到页面底部.我假设这是因为所有选项卡都放在列表项中,然后jqueryui将它们转换为选项卡..实际上将数字3的选项卡内容从底部向上移动到选项卡部分的顶部.

如果有人知道如何链接到第3个选项卡上的第4块内容,我会非常感激.

有人解决方案可能在$ _post和$ _get数据..但我不确定是否真的如此,即便如此我不知道如何用jqueryui实现它

先感谢您

我有一个包含JQuery UI Tabs小部件的网页.Tab小部件通过AJAX加载选项卡.在其中一个标签页(将其命名为DescriptionPage)中,我有一个将通过ajaxForm插件提交的表单.

<div id="tabs">
    <ul>
        <li>
           <a href="DescriptionPage">Description Page</a>
        </li>
    </ul>
</div>

这是我的DescriptionPage的内容.

<form id="myForm">
  <!-- Form elements goes here -->
</form>

<script>
  $(function(){
    $('#myForm').ajaxForm(function (response) {
      $('#myForm').parent().empty().append(response);
    });
  });
</script>

提交表单后,将返回相同的DescriptionPage,包括表单和脚本.因此,表单内容将替换为服务器端的响应.响应还包含验证消息.

问题是,整个场景在Chrome和Firefox中运行良好.但在Internet Explorer 8中,会出现一个奇怪的问题.

首次加载选项卡时,javascript成功执行.当用户提交表单并且放置响应时,IE无法执行我的javascript,说"JQuery未定义".

为什么IE无法在通过ajax加载的内容中调用JQuery？有解决方法吗？

PS:我想从html中分离脚本,但它根本不是一个选项:(

P.S2:由于愚蠢的IE,我的javascript和CSS文件变得一团糟.

我正在使用jQuery Validate和Tabs插件.我希望在用户尝试从选项卡移动到其他两个选项卡之一时验证特定选项卡.有没有人有这种特殊方法的经验？

目前,这是我绑定Tabs插件的方式:

   $(function() {
      //Bind Link Tab Selection
      //------------------
      var $tabs = $("#tabs").tabs();
       $('#step1_button').click(function() {
          $tabs.tabs('select','2');
          return false;
       });
       $('#step2_button').click(function() {
          $tabs.tabs('select','3');
          return false;
       });
       //------------------
       //------------------

       //Bind Tabs
       //------------------
       $("#tabs").tabs({
          fx: {width:'toggle'}
       });
       //------------------
       //------------------
    });

我正在开发一个Web应用程序,我正在使用JQuery UI Tabs插件来分隔数据.
如果我将鼠标悬停在每个选项卡上,则在屏幕的左下方我可以看到该选项卡的URL(例如:testPage.com/#tab1或testPage.com/#tab2)

现在,如果我在URL栏中键入其中一个地址,我不会转到与URL中的哈希相关的选项卡,而是转到应用程序中的第一个选项卡.

我的问题是:如何将特定选项卡锚定到URL？
因此,如果有人去testPage.com/#tab3,他们将在应用程序的标签3中结束.

我这样做也是因为我想使用JQuery BBQ插件来修改浏览器历史记录,所以我可以让用户在他们点击后退按钮时转到他们所在的最后一个标签.

示例:http:
//benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/

我正在运行一个Wordpress主题(Slate),它附带了实现标签的短代码jquery.tabs.min.js.

使用他们的短代码我尝试嵌套选项卡,它不起作用,很可能是因为他们如何设计短代码,所以我创建了一些简单的jQuery和额外的HTML来制作嵌套选项卡区域,然后包含原始主题的jquery选项卡短代码.

一切都在工作,但是有一个问题让我感到困惑:当加载子标签时包含的标签少于前面的父标签子标签,那么子标签就会溢出,jQuery会获得子标签从上一组中,将它们附加到当前选项卡.

这里有一个工作的例子.请注意,"锻炼"区域中的"冬季运动活动"子选项卡也会加载到夜生活区域,而"游览"父项选项卡中的博物馆和旅游景点也会加载到"日历"父级选项卡中,该选项卡应仅包含1个子选项卡(蒙特利尔活动) ).

所以我有一些奇怪的溢出继续..
我的初学者jQuery代码控制父标签在下面.

$(function(){
    var subcat = $('.sub-categories'),
        subdivfirst = $('.sub-categories div:first'),
        subdiv = $('.sub-categories div'),
        cattitlefirst = $('.categories ul li:first'),
        cattitle = $('.categories ul li');

        subcat.children('div').hide();  
        subdivfirst.show();     
        cattitlefirst.addClass('active');


        $('.categories li a').click(function(){
            var $this = $(this);

            cattitle.removeClass('active');
            subcat.children('div').hide();

            $this.parent('li').addClass('active');

            var catLink = $this.attr('id');
            var showcat = $('div #sub-' + catLink);

            showcat
                .fadeIn(600)    
                .find('.panes').show()
        });
});

然后,这些" .subcategoriesdiv"中的每一个都包含标准的jQueryUI选项卡.

我认为jQueryUI选项卡和我创建的额外自制选项卡之间肯定存在某种冲突,但我不确定如何跟踪它.任何帮助,提示或想法清理我的代码将不胜感激.

刚开始探索Twitter的Bootstrap,我喜欢我所看到的.但是我有一个关于如何实现包含iFrame的Tabs的查询.我知道iFrame非常糟糕,但正确使用对于显示不同类型的数据非常有用.

我有jQueryUI选项卡的经验,它允许我在选项卡内显示iFrame.但是我找不到任何与Bootstrap相同的文档.

从jQueryUI的角度来看,我过去曾这样做过:

<div id="tabs">
  <ul>
    <li><a class="tabref" href="#tabs-1" rel="page1-iframe.html">Page 1 Title</a></li>
    <li><a class="tabref" href="#tabs-2" rel="page2-iframe.html">Page 2 Title</a></li>
  </ul>
  <div id="tabs-1"></div>
  <div id="tabs-2"></div>
</div>

以上是比标准的jQueryUI Tab实现更先进.它允许我偏移iFrame的负载,直到用户选择选项卡,这是加载大量页面时的最佳方式.

但是,我看不到与Bootstrap类似的方式.

在这里寻找指点.

干杯尼克

我正在尝试更改选项卡区域的背景..比如,您有一个选项卡列表,我知道如何更改每个选项卡的颜色,但我想知道您是否可以更改背景的颜色所有的.通常它是深灰色,标签是浅灰色.我想要将这些颜色改为浅蓝色或浅绿色,并且我已经尝试更改我能找到的与UI选项卡有关的所有内容的CSS,并且它们都没有工作.

我正在尝试为我的jquery UI选项卡添加一些自定义样式.这是我期望的标签输出.

我试图搞清楚,但仍然没有运气.

这是到目前为止的代码:

<div id="main">
            <div class="ui-widget-header ui-corner-top">
                <ul>
                    <li><a href="#tabs-1">My Databases</a></li>
                    <li><a href="#tabs-2">Database Stats</a></li>
                </ul>
            </div>

            <div id="tabs-1" class="tabs3">
                <p>Database stats</p>
            </div>

            <div id="tabs-2" class="tabs3">
                <p>You could not be registered due to a system error. We apologize for any inconvenience.</p>
            </div>
</div>

CSS:

#main {
   margin-left: 246px;
   position: relative;
    padding: 0;
}


#main ul, .tabs3 {
   white-space: nowrap;
}

#main ul{
   border-bottom: medium none;
   //padding: 6px;
    height: 25px;
    border: none;
}

.ui-tabs .ui-tabs-nav {
   margin: 0;
   padding: 0.2em …