вкладки jQuery, выбирающие определенную вкладку

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

И фрагмент 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 + "\" 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);
7
задан DEH 2 July 2010 в 00:15
поделиться

4 ответа

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

var uiTabsSelected = '.ui-tabs-selected';
$(uiTabsSelected).removeClass(uiTabsSelected);
4
ответ дан 6 December 2019 в 06:23
поделиться

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

$("#MyTabs").tabs({
  selected: 2 
});
22
ответ дан 6 December 2019 в 06:23
поделиться

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

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');
            }
        });    

    });
1
ответ дан 6 December 2019 в 06:23
поделиться

Решение заключалось в добавлении и удалении классов, как предложил 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
0
ответ дан 6 December 2019 в 06:23
поделиться
Другие вопросы по тегам:

Похожие вопросы: