2010-10-04 2 views
1

Вопрос ... Я хочу создать одностраничное веб-приложение, имеющее глубокую привязку (URL-адрес изменяется при щелчке, где пользователь загружается), поэтому пользователь может обмениваться ссылками, закладкой и т. Д. ..jQuery Глубокое связывание веб-приложения

проблема с плагином Jquery барбекю, что он требует HREF иметь хэш в нем, как HREF = «#/фотографии/1»

это означает, что мне нужно, чтобы убедиться, что все URL в моем приложение начинается с хэша. Кроме того, это означает, что браузеры, не поддерживающие JS, не будут работать, поскольку URL-адреса все хэшируются.

Есть ли элегантный способ сделать одностраничное веб-приложение с глубоким связыванием, которое отлично работает для JS & Не-JS-браузеры и требует меньше изменений кода?

благодаря

ответ

2

Если вы хотите использовать единую структуру URL, которая может работать как для JS и без JS, способных/с поддержкой браузеров, вы можете проверить, поддерживает ли браузер JS и изменить навигационные ссылки соответственно. Если браузер поддерживает/активировал JS, добавьте хэш и извлечение страницы с помощью window.location.hash. Пример URL:

site.com/#photos/1

Если он не поддерживает JS ваш URL будет выглядеть следующим образом:

site.com/photos/1

Таким образом, вам нужно только добавить # в URL. Это легко сделать либо в самом скрипте, либо изменить ссылки на странице с помощью jQuery после загрузки страницы. Вы можете использовать (при условии, Apache/PHP) в Apache ModRewrite переписать URL на что-то вроде:

site.com/index.php?p=photos&show=1

Say нагрузки сайта в первый раз, и браузер не поддерживает JS, загружать любой должен быть загружен в зависимости от (в данном случае) переменных «page» и «show». Если он поддерживает JS, вы можете хранить переменные, как это:

<div style="display:none;" id="page">photos</div> 
<div style="display:none;" id="show">1</div> 
<div id="content"></div>

и после загрузки страницы вы запустите Jquery и извлечь навигационные данные:

var page = $('#page').html(); 
var show = $('#show').html();

и делать все, что должно быть чтобы показать правильную страницу.

Когда вы нажимаете новые ссылки, вы можете использовать различные плагины jQuery для хеш-навигации, или страница будет загружаться обычным способом, когда нет JS и, следовательно, нет хеша в ссылках.

Для предотвращения дублирования кода вам необходимо настроить свои страницы таким образом, чтобы их можно было легко отобразить обычным способом и через jQuery. Скажем, у вас есть это фото страницы, вы можете включить «photos.php» при просмотре без JS и использовать один и тот же файл с помощью JQuery:

$.get(page + '.php', { 
    show: show 
}, function(data) { 
    $('#content').html(data); 
});

Поскольку «photos.php» будет видеть те же самые $_GET переменных, выход будет таким же.

Вы будет получить некоторые перекрытия, хотя. Если вы хотите отобразить/отправить форму, например.вы, вероятно, справитесь с этим по-другому, обычным способом, против которого вы справляетесь с этим через jQuery. Обычный способ обработки данных формы и отображение обновленной страницы. Поэтому в случае с «photos.php» вы хотите получить полный выход. Но при использовании jQuery вам нужен только результат, например, говорит «сделано» и меняет страницу, не перезагружая ее полностью. Это можно решить, добавив еще несколько переменных в функции $.get (или $.post).

Возможно, вы захотите изучить (PHP) рамки MVC. При использовании настройки MVC вы можете отделить всю логику сайта (запросы навигации/базы данных/etc) от представления (то есть то, что отображается на сайте). Это делает его очень простым в использовании такой же логикой, но отдельный просмотров в этом случае сайт с обычным и один с навигацией на основе jQuery.

В конце концов вы должны спросить себя, стоит ли все это преодолевать. Для кого предназначен сайт? Действительно ли эти люди используют браузеры без JavaScript? Действительно ли необходимо иметь доступный сайт, который не полагается на JS? В настоящее время в большинстве случаев все используют браузер, который отлично справляется с JS, и время, когда люди будут отключать его по соображениям безопасности, давно исчезло. Поддержание обеих версий сайта может занять много времени и ресурсов (в зависимости от размера курса), поэтому он может просто не стоить того. В этом случае проще просто отобразить сообщение или урезанный и упрощенный сайт, в котором говорится, что пользователь должен перейти в 21-й век, чтобы использовать полностью функциональный сайт.

Смежные вопросы