Как сделать историю jquery-инструментов в ajaxed вкладках по названию вкладки? - PullRequest
Новая
       32

Как сделать историю jquery-инструментов в ajaxed вкладках по названию вкладки?

0 голосов
/ 27 февраля 2012

У меня есть следующие вкладки в jquery-tools: 

<!-- tabs -->
<ul class="css-tabs">
    <li><a href="/example/a">ABC</a></li>
    <li><a href="/example/b">DEF</a></li>
</ul>

<!-- single pane. it is always visible -->
<div class="css-panes">
    <div style="display:block"></div>
</div>

И у меня включена история.

Поэтому, когда я нажимаю на первой вкладке ABC, у меня естьurl: www.example.com / example / a # / example / a

И после нажатия второй вкладки DEF URL выглядит следующим образом: www.example.com / example / b # / example / b

Мне не нравится, как выглядит URL, и я бы предпочел, чтобы история вкладок соответствовала названию вкладки (ABC и DEF): www.example.com / example / a # ABC и www.example.com / example / b # DEF

Я искалэто довольно долго, но я не мог найти ничего о том, как это можно сделать ...

1 Ответ

2 голосов
/ 27 февраля 2012

Хорошо, поэтому я собираюсь ответить на свой вопрос> _ <</p>

Нет, я не нашел решения где-то в сети, я решил сам ...

Решение для версии jquery-tools 1.2.6 стабильный

В коде jquery-tools, который касается инструмента истории, вы меняете его следующим образом: 

(function(a){var b,c,d,e;a.tools=a.tools||{version:"v1.2.6"},a.tools.history={init:function(g){e||(a.browser.msie&&a.browser.version<"8"?c||(c=a("<iframe/>").attr("src","javascript:false;").hide().get(0),a("body").prepend(c),setInterval(function(){var d=c.contentWindow.document,e=d.location.hash;b!==e&&a(window).trigger("hash",e)},100),f(location.hash||"#")):setInterval(function(){var c=location.hash;c!==b&&a(window).trigger("hash",c)},100),d=d?d.add(g):g,g.click(function(b){var d=a(this).attr("href");c&&f(d);if(d.slice(0,1)!="#"){location.href="#"+d;return b.preventDefault()}}),e=!0)}};function f(a){if(a){var b=c.contentWindow.document;b.open().close(),b.location.hash=a}}a(window).bind("hash",function(c,e){e?d.filter(function(){var b=a(this).attr("href");return b==e||b==e.replace("#","")}).trigger("history",[e]):d.eq(0).trigger("history",[e]),b=e}),a.fn.history=function(b){a.tools.history.init(this);return this.bind("history",b)}})(jQuery);

Для этого: (нет необходимости в новых строках, вы можете удалить их и вернуть в одну строку) 

(function(a)
{
    var b,c,d,e;a.tools=a.tools||{version:"v1.2.6"},a.tools.history={init:function(g){e||(a.browser.msie&&a.browser.version<"8"?c||(c=a("<iframe/>").attr("src","javascript:false;").hide().get(0),
    a("body").prepend(c),setInterval(function(){var d=c.contentWindow.document,e=d.location.hash;b!==e&&a(window).trigger("hash",e)},100),
    f(location.hash||"#")):setInterval(function(){var c=location.hash;c!==b&&a(window).trigger("hash",c)},100),d=d?d.add(g):g,
    g.click(function(b){var d=a(this).attr("href");
    c&&f(d);if(d.slice(0,1)!="#"){location.href="#"+a(this).attr("name");return b.preventDefault()}}),e=!0)}};

    function f(a)
    {
    if(a)
    {
        var b=c.contentWindow.document;
        b.open().close(),
        b.location.hash=a
    }
    }a(window).bind("hash",function(c,e){e?d.filter(function(){var b=a(this).attr("name");return b==e||b==e.replace("#","")}).trigger("history",[e]):d.eq(0).trigger("history",[e]),b=e}),
    a.fn.history=function(b){a.tools.history.init(this);return this.bind("history",b)}
}
)

Изменения - это два простых изменения: Это: 

location.href="#"+d

было изменено на это: 

location.href="#"+a(this).attr("name")

А это: 

var b=a(this).attr("href");

было изменено на это: 

var b=a(this).attr("name");

Также еще одна важная вещь: вам нужно добавить атрибут «имя» к вашим вкладкам и поместить имя, которое вы хотите отображать в адресе после # (в моем случае я хочу, чтобы та же ссылка / имя вкладки появляются), вот так: 

<!-- tabs -->
<ul class="css-tabs">
    <li><a href="/example/a" name="ABC">ABC</a></li>
    <li><a href="/example/b" name="DEF">DEF</a></li>
</ul>

<!-- single pane. it is always visible -->
<div class="css-panes">
    <div style="display:block"></div>
</div>

И это все, теперь у вас есть рабочие вкладки jquery-tools с историей, работающей с "#name of the tab", а не с "#href link": D Как это:

www.example.com / пример / а # ABC

www.example.com / пример / б # DEF * * 1 034

Если вам не нужен атрибут «имя», а только идентификатор или класс, измените место, где я поместил имя, в идентификатор или класс, но обязательно добавьте идентификатор или класс в свои вкладки ...

...