JQuery вкладки выбора конкретной вкладки - PullRequest
Новая
       18

JQuery вкладки выбора конкретной вкладки

7 голосов
/ 02 июля 2010

У меня есть страница, содержащая набор вкладок jQuery. Все вкладки указывают на один и тот же целевой div, но загружают его разным контентом через ajax. Когда я выполняю начальную загрузку полной страницы, мне нужно по-разному устанавливать активную вкладку в зависимости от различных факторов. Содержимое в целевом div уже настроено на сервере для этой начальной загрузки, поэтому мне не нужно нажимать на вкладку, мне просто нужно установить правильную вкладку в «selected». Я попытался установить класс соответствующего HTML-элемента "li" в "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>

И фрагмент C #, который строит UL: 

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 + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>");
                tabsLiteral.Append("</li>");
            }
            tabsLiteral.Append("</ul>");
            _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));

            HtmlGenericControl ctl = new HtmlGenericControl();
            StringBuilder html = new StringBuilder();
            html.Append("<script type=\"text/javascript\">");
            html.Append("$(\"#panelTabs\").tabs({selected: 2});");
            html.Append("</script>");
            ctl.InnerHtml = html.ToString();
            _panelTabs.Controls.Add(ctl);

Другая версия: 

StringBuilder tabsLiteral = new StringBuilder();
            tabsLiteral.Append("<ul>");
            foreach (KeyValuePair<string, Tab> kvp in tabs)
            {
                string active = "";
                if (currentTabCaption == kvp.Value.Caption)
                {
                    //active = " class=\"ui-tabs-selected\"";
                }
                tabsLiteral.Append("<li" + active + ">");
                // Note - the kvp.Value.URI determines what should happen when the Tab is clicked
                tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>");
                tabsLiteral.Append("</li>");
            }
            tabsLiteral.Append("</ul>");
            _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));

            HtmlGenericControl ctl = new HtmlGenericControl();
            StringBuilder html = new StringBuilder();
            html.Append("<script type=\"text/javascript\">");
            //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
            html.Append(@"$(function() {
                alert('initialising tabs');
                $(""#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."");
                        }
                    },
                    select: function(event, ui) {
                        getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
                    }
                });
            });");
            html.Append("$(\"#panelTabs\").tabs({selected: 2});");
            html.Append("</script>");
            ctl.InnerHtml = html.ToString();
            //_panelTabs.Controls.Add(ctl);
            Page.Controls.Add(ctl);

Ответы [ 5 ]

22 голосов
/ 02 июля 2010

То, что вы ищете, это выбранный параметр . Э.Г. 

$("#MyTabs").tabs({
  selected: 2 
});
4 голосов
/ 02 июля 2010

Вы можете иметь первую строку внутри функции переключения вкладок, чтобы удалить выбранный класс: 

var uiTabsSelected = '.ui-tabs-selected';
$(uiTabsSelected).removeClass(uiTabsSelected);
1 голос
/ 31 июля 2013

В случае, если кто-то еще придет сюда в поисках ответа, текущий (на эту дату) способ выбора вкладки (jQuery UI 1.10) заключается в использовании опции "active":

Инициализировать вкладки с указанием активной опции: 

$( ".selector" ).tabs({ active: 1 });

http://api.jqueryui.com/tabs/#option-active

1 голос
/ 02 июля 2010

Изменить это: 

html.Append("$(\"#panelTabs\").tabs({selected: 2});");

На это: 

html.Append("$(\"#panelTabs\").tabs('option','selected', 2);");

Редактировать: и ... 

$(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.");
                }},
            select: function(event, ui) {
                getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
            }
        });    

    });
0 голосов
/ 02 июля 2010

Решением было добавить и удалить классы, как предложил ethagnawl.В следующем C # показаны как создаваемый UL, так и требуемая инъекция скрипта jQuery.Важный бит в функции show: где классы манипулируют.Именно этот код решает проблему. 

StringBuilder tabsLiteral = new StringBuilder();
            tabsLiteral.Append("<ul>");
            foreach (KeyValuePair<string, Tab> kvp in tabs)
            {
                //string tabClass = " class=\"ui-state-default\"";
                string tabClass = " class=\"ui-state-default\"";
                if (currentTabCaption == kvp.Value.Caption)
                {
                    tabClass = " class=\"ui-tabs-selected\"";
                }
                tabsLiteral.Append("<li" + tabClass + ">");
                //tabsLiteral.Append("<li>");
                // Note - the kvp.Value.URI determines what should happen when the Tab is clicked
                tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>");
                tabsLiteral.Append("</li>");
            }
            tabsLiteral.Append("</ul>");
            _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));

            HtmlGenericControl ctl = new HtmlGenericControl();
            StringBuilder html = new StringBuilder();
            html.Append("<script type=\"text/javascript\">");
            //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
            html.Append(@"$(function() {
                $('#panelTabs').tabs({
                    select: function(event, ui) {
                        getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
                    },
                    show: function(event, ui) {
                        // You MUST set both 'ui-state-active' AND 'ui-tabs-selected' for tab UI to operate properly - if either are missing it doesn't work
                        $('.ui-tabs-selected').removeClass('ui-state-active').removeClass('ui-tabs-selected'); 
                        $(ui.tab).addClass('ui-state-active').addClass('ui-tabs-selected'); 

                        //$('#panelTabs').tabs('selected',idx); // WOULD have been nice if this had worked, but UI does not keep up
                     }
                });
            });");
            html.Append("</script>");
            ctl.InnerHtml = html.ToString();
            //Page.Header.Controls.Add(ctl); // NEVER place script in the page header when the script must survive an AJAX delivery - it won't run
            Page.Controls.Add(ctl); // Acceptable to place script on the page, as it WILL survive AJAX delivery
...