Комментарии 19
<a href="/Home/GetHomeTab">Home</a>
ActionLink специально же придумали, чтоб такого не писать.
Осталось сделать как в джимейле, чтобы табы кэшировались, и в случае, если страница осталась такой же, она грузилась бы из кэша, а не с сервера. Не могу ручаться, что джимейл так и работает, но по ощущениям похоже.
Кэширование по дефолту включено. Можно отключать.
Только что посмотрел на gmail, при каждом клике на Inbox, идут 2-3 запроса на сервер, но он все равно кэширует что-то локально, без подключения к инету работает, пока не запросит состояние подключения.
как я понимаю, этими запросами он спрашивает у сервера, все ли там так же осталось, как и было? :)
Нет, первый запрос возвращает: список labels(ярлыков), подключенные email к профилю, список писем в папке.
Ясно. Было бы еще здорово пощупать результат этой работы. Как я понял, автор предоставил только скриншоты.
И еще:
«Не стоит забывать несколько основных проблем, которые стоит не забыть разрешить в данном подходе». Понятно, да?
И еще:
«Не стоит забывать несколько основных проблем, которые стоит не забыть разрешить в данном подходе». Понятно, да?
<div id="tabContainer">
<ul>
<li id="GetHomeTab"><a href="/Home/GetHomeTab">Home</a></li>
<li id="GetProductTab"><a href="/Home/GetProductTab">Products</a></li>
<li id="GetContactUsTab"><a href="/Home/GetContactUsTab">Contact Us</a></li>
</ul>
</div>
$(document).ready(function() {
var hash = hash.window.location.hash.substring(1);
if (hash != "") {
$("#tabContainer").tabs('select', hash);
} else {
$("#tabContainer").tabs();
}
$("#tabContainer").bind("tabsshow", function(event, ui) {
window.location.hash = ui.tab.id;
});
});
за ui.tab.id не ручаюсь, нужно посмотреть, как получить id закладки.
НЛО прилетело и опубликовало эту надпись здесь
Недостатки решения.
1) Без яваскрипта текст страницы даже не отобразится --> СЕОшники не одобряют. Плюс. лишний АЯКС-запрос серьезно замедляет загрузку страницы.
2) Нельзя кликнуть по вкладке средней кнопкой (открыть в новой вкладке)
3) Не работают корректно F5, Назад, вперед, добавить в закладки с этим примером.
4) Нужно грузить тяжелый jQuery ради такой мелочи как табы.
Нагрузка на сервер также растет, так как теперь запросов к динамическим страницам больше.
1) Без яваскрипта текст страницы даже не отобразится --> СЕОшники не одобряют. Плюс. лишний АЯКС-запрос серьезно замедляет загрузку страницы.
2) Нельзя кликнуть по вкладке средней кнопкой (открыть в новой вкладке)
3) Не работают корректно F5, Назад, вперед, добавить в закладки с этим примером.
4) Нужно грузить тяжелый jQuery ради такой мелочи как табы.
Нагрузка на сервер также растет, так как теперь запросов к динамическим страницам больше.
Все это решается без проблем, вот решение 1, 2, 3 проблемы.
4) 20 кб — это смешная цена
Данный подход не для повседневного использования, а когда нужно.
4) 20 кб — это смешная цена
Данный подход не для повседневного использования, а когда нужно.
Кнопка назад в предложенном примере все равно работать не будет например. Как и функция «открыть в новом окне».
> Данный подход не для повседневного использования, а когда нужно.
Вот это точно, лучше сделать нормально, без лишних усложенний.
> Данный подход не для повседневного использования, а когда нужно.
Вот это точно, лучше сделать нормально, без лишних усложенний.
Да что вы, это же #хеш. Или вы будете утверждать, что url — mysite.com/#tab1 нельзя открыть в новом окне?
>Кнопка назад в предложенном примере
будьте так добры, нажмите последовательно на # у любого комментария на данной странице, а потом кнопку назад, работает? то-то же
>Кнопка назад в предложенном примере
будьте так добры, нажмите последовательно на # у любого комментария на данной странице, а потом кнопку назад, работает? то-то же
> [a href="/Home/GetHomeTab"]
Где вы здесь видите хеш? При щелчке средней кнопкой по этой ссылке в новом окне откроется «/Home/GetHomeTab».
> будьте так добры, нажмите последовательно на # у любого комментария на данной странице, а потом кнопку назад, работает? то-то же
На Хабре много косяков, это не образец :) Но конечно, должно ли переключение табов добавлять ссылки в историю — отдельный вопрос. Если это маленькая врезка с табами — это как маленький виджет, то наверно нет, а если весь сайт сделан как коллекция аякс-табов — то наверно да, так как пользвоатель может захотеть вернуться на предыдущий таб кнопкой назад.
Где вы здесь видите хеш? При щелчке средней кнопкой по этой ссылке в новом окне откроется «/Home/GetHomeTab».
> будьте так добры, нажмите последовательно на # у любого комментария на данной странице, а потом кнопку назад, работает? то-то же
На Хабре много косяков, это не образец :) Но конечно, должно ли переключение табов добавлять ссылки в историю — отдельный вопрос. Если это маленькая врезка с табами — это как маленький виджет, то наверно нет, а если весь сайт сделан как коллекция аякс-табов — то наверно да, так как пользвоатель может захотеть вернуться на предыдущий таб кнопкой назад.
>Где вы здесь видите хеш? При щелчке средней кнопкой по этой ссылке в новом окне откроется «/Home/GetHomeTab».
А вот тут, работает все хитро, я написал, что нужно еще добавить реализацию работы без ajax, вот тут бы она и сработала. Ну право, я же делал перевод, не могу же я еще за автора отдуваться за его недочеты. Но все это достаточно специфично, вот товарищу les80 по нраву такое решение.
А вот тут, работает все хитро, я написал, что нужно еще добавить реализацию работы без ajax, вот тут бы она и сработала. Ну право, я же делал перевод, не могу же я еще за автора отдуваться за его недочеты. Но все это достаточно специфично, вот товарищу les80 по нраву такое решение.
Что-то совсем упущен момент о CSS, без которого у меня получились не вкладки, а только список.
Раз уж недавно апнули, напишу пару комментариев, может кому пригодится.
В данной реализации есть два серьезных минуса:
— Асинхронные запросы выполнятся по очереди (поставьте Thread.Sleep, увидите). Это связано с блокировкой сессии на каждый запрос. В MVC 2 нужно изменять сорцы MVC, и создавать копию провайдера без блокировки. В MVC3 появился ControllerSessionStateAttribute.
— При использовании Ajax-версии табов id контейнера контента генерируется автоматически, и если необходимо обращаться к табе из jquery, придется завязываться на ui-tab-1, ui-tab-2 и т.д. В асинхронных формах и того краше: new AjaxOptions {UpdateTargetId=«ui-tab-2» }
Вместо этого можно вгрузить содержимое табок при рендере страницы, используя Html.RenderPartial или Html.RenderAction.
В таком случае, избавляемся от обоих тараканов.
В данной реализации есть два серьезных минуса:
— Асинхронные запросы выполнятся по очереди (поставьте Thread.Sleep, увидите). Это связано с блокировкой сессии на каждый запрос. В MVC 2 нужно изменять сорцы MVC, и создавать копию провайдера без блокировки. В MVC3 появился ControllerSessionStateAttribute.
— При использовании Ajax-версии табов id контейнера контента генерируется автоматически, и если необходимо обращаться к табе из jquery, придется завязываться на ui-tab-1, ui-tab-2 и т.д. В асинхронных формах и того краше: new AjaxOptions {UpdateTargetId=«ui-tab-2» }
Вместо этого можно вгрузить содержимое табок при рендере страницы, используя Html.RenderPartial или Html.RenderAction.
В таком случае, избавляемся от обоих тараканов.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
jQuery закладки и Partial View, используем AJAX