?

Log in

No account? Create an account
Main

jQuery. Плагин для работы со ссылками

Когда используешь ajax приходится фиксировать изменившееся состояние приложения. Например вызвал я окно с формой и добавил некоторый параметр. Скажем это каталог и я хочу, чтобы в текущем окне если у товара не указана страна-изготовитель, то использовалась например Уганда.

Отлично. Вытащил формочку, кроме Уганды указал еще чего-нибудь. Закрыл формочку. Состояние хранится в переменных JS. Если я перегружу страницу, то все пропадет. Если я кликну по сортировке или по номеру страницы, то все также потеряется.

Иначе говоря надо чтобы в строке браузера текущая локация получила бы добавку в виде &country=Uganda, и все ссылки в пагинаторе и все ссылки в заголовках столбцов, используемые для сортировки тоже получили свою добавку. Также пусть получат добавку ссылки на правку продукта, чтобы в форме выставить страну, если ее нет.

Если для генерации урлов с параметрами есть встроенны механизм jQuery.param, то для того чтобы подкорректировать ссылки такого механизма нет (что если у ссылки нет знака ? или там в конце стоит #, т.е. просто так дописать &coutry=Uganda в конец ссылки не кошерно).

Нашел удобный плагин
jQuery BBQ: Back Button & Query Library

PS. я вообще-то не очень опытный пользователь jQuery, поэтому был рад открытию для себя .wrap(). Например изменилось состояние системы и надо разрешить с объектом некотрое действие, обозначаемое иконкой со ссылкой. Пока действие было недоступно мы показывали пустую картинку без ссылки, а как только действие стало доступным, меняем картинку с пустой на значимую и оборачиваем объект ссылкой:

$('#modicon').attr("src",'/icons/pageadd.png').wrap('<a href='/items/'+id+'/mod' />); //id -- заранее известный id объекта

Comments

Картинку лучше менять посредством CSS, описав ее как свойство ссылки. То есть что-то вроде:
('#modicon').wrap('<a class="pageadd" href="/items/"+id+"/mod" />);
Тогда и javascript-кода будет меньше, и мухи отдельно от котлет.
хм а в

a.pageadd

тогда что будет? каринка бэкграундом?
ага.
а <img id='modicon' src='/icons/empty.png'> так и оставить не меняя?
А, так это картинка? Не разглядел. То есть я правильно понимаю, что до тех пор, покуда действие недоступно, не видно ничего? А когда доступно — появляется ссылка? Если так, то всё еще проще и красивее можно сделать:
<div id="article">
  <a class="itemadd" href="/item/add/whatever">Добавить</a>
</div>

a.itemadd {
  display:none;
}

.add-available a.itemadd {
  display:inline; /* ну или block - смотря, как надо*/
}

$("#article").addClass("add-available");
То есть в разметке товара ссылка добавления есть всегда, только в исходном состоянии она не отображается. Когда система изменяет состояние, и действие становится доступным, мы блоку товара добавляем класс "add-available", нахождение в контексте которого делает ссылку добавления видимой.
у ссылки нет текста -- экономлю место с помощью иконки.
там у меня несколько действий. одно из них недоступно, иконки выглядят так:
[a][b][ ][d]

т.е. место зарезервировано, чтобы потом при добавлении иконки бы не скакали.

а после добавления параметров так
[a][b][с][d]

т.е. появляется иконка окруженная ссылкой, а до этого была пустая картинка.
Чтоб место резервировалось, можно использовать не display:none|block, а visibility:hidden|visible. Дальше уже материал для холивара: можно текст в ссылке не писать, оставить её пустой и явно указать размеры под иконку; можно и текст написать, но с помощью правил CSS сделать так, чтобы он не отображался и не влиял на размеры ссылки — в этом случае разметка будет наиболее точно отражать содержимое документа, а CSS будет отображать его так, как задумано дизайнером. Естественно, чем "правильнее" идеологически мы начинаем что-то делать, тем больше возможных граблей мы встретим на своём пути :) Тут уже всё зависит от опыта и уровня знания матчасти. Иногда, естественно, проще сделать так, чтоб работало, и не париться над деталями реализации. (этим я снимаю с себя ответственность за возможный ущерб, упущенную выгоду и бла-бла-бла :)
в любом случае спасибо.
хорошая пища для ума.
я знаю, что верстальщики любят ссылки оформлять иконками -- внешние, внутренние и тюд и иконка в бэкграунде. Но какая-то старая заноза в голове, что иконка это картинка, а не бэкграунд мешает :)
Наоборот, так даже по-программерски правильнее: Вам не должно быть особо важно, картинка там, бэкграунд или вообще ничего нету. Есть ссылка такого-то класса, имя класса определяет ее назначение (семантика), а стили определяют ее отображение. Думаю, не стоит объяснять, что такое решение намного проще поддерживается и расширяется (хотя и недостаток есть — например, сложно добавить две иконки фоном или добавить какую-то конкретную иконку, список которых непостоянен). Но это всё зависит от конкретной ситуации.
ага, я в общем не против. буду пробовать использовать.
мне бы вообще научиться причесывать макароны на клиенте, что css, что js. а то как-то кудряво получается.