Слайд шоу на jQuery
Очень красивая реализация — здесь.
Очень красивая реализация — здесь.
Обнаружил прелюбопытнейших глюк. Допустим я генерю SELECT динамически, как это показано в прошлом примере. Этот SELECT вставляется в форму, которая в свою очередь расположена в таблице. Так вот, если тэг формы находится где-то внутри таблицы, то генерируемый налету SELECT (да и любой другой элемент формы) не попадает в форму. То есть, при субмите в массив $_POST (или $_GET) не попадают данные с этого SELECT'а. Удивительно!
Допустим, что вам необходимо сделать такую кобинацию выпадающих списков: список 1 — области, список 2 — города. Но так, что при выборе области из списка 1, в списке «Города» отображаются только города соответствующей облести. Как это сделать на jQuery?
СКРИПТЫ:
1. $(document).ready(function() {
2. $("#region").change(function(){
3. id = $(this).attr('value');
4. $.post("data_city.php",{id:id},AfterRegion);
5. });
6. });
7. function AfterRegion (data){
8. $("#city").empty();
9. $("#city").append(data);
10. }
HTML-код:
11. < div id=region> 12. < select> 13. < option value=63>Самарская область 14. < option value=77>Московская область 15. < option value=23>Краснодарский край 16. < /select> 17. < /div> 18. < div id=city> 19. < /div>
ПОЯСНЕНИЯ:
1. DIV с выпадающим списком городов изначально вообще пуст, так как он будет заполнятся динамически после выбора значения в списке областей.
2. После изменения значения в списке областей (строчка 2), мы узнаем код выбранной области (строчка 3) и вызывает процедуру data_city.php (строчка 4), которой передаем это код в виде параметра. Процедура data_city.php должа в качестве результата выдавать (echo или print) SELECT с требуемыми значениями.
После отработки процедуры, ее результат передается в функцию AfterRegion, которая очищает DIV с городами (вначале он и так пуст, но потом старые данные нужно затирать), и вставляет в него сгенерированный фунцией data_city.php выпадающий список.
3. Все.
Дано: два поля input type=text. В первом необходимо указать клиента, а во втором выбрать домашнее животное, принадлежащее этому клиенту. Обычный использовать нельзя, ибо клиентов много и лазить по списку совсем не хочется.
Да и не нужно, есть ведь отличный плагин Autocomplete для JQuery.
Что нужно сделать, чтобы все заработало:
Вначале создает HTML-код:
<input type=text id=client taborder=1> здесь будет фамилия клиента
<input type=hidden id=client_id name=forma[client_id]> а здесь будет код клиента
<input type=text id=pet taborder=2> здесь будет кличка питомца
<input type=hidden id=pet_id name=forma[pet_id]> здесь будет код питомца
Теперь определяем обработчики для поля с клиентами:
$(document).ready (function (){
$(«#client»).autocomplete («data_clients.php», {});
}
data_clients.php выглядит следующим образом:
Подключение к базе опускаю, ибо и так понятно
$q = strtolower ($_GET["q"]);
if (!$q) return;
$rows = $DB->select («select * from clients»);
foreach ($rows as $numRow=>$c){
$id = $rows[$numRow]['id'];
$name=$rows[$numRow]['last_name'].' '.$rows[$numRow]['first_name'];
$name = Win1251toUTF8 ($name);
echo «$name|$id\n»;
}
?>
Обратите внимание, что полученные из базы данные нужно обязательно сконвертить в UTF8.
Все. После этого, набрав в поле пару букв, мы получим выпадающий список и подходящими клиентами. Чтобы в скрытое поле попадал код клиента нужно прописать еще вот что:
$(«#client»).result (function (event, data, formatted) {
var hidden = $(«#client_id»);
hidden.val (data[1]);
hidden.click ();
});
Первая часть работы закончилась. Вторая часть более сложная.
Во-первых, нам нужно передать код выбранного клиента. Для этого пишем маленькую JS-процедурку:
function getClientId () {
return document.getElementById ('client_id').value;
}
Затем указываем ее в качестве параметра для автозаполнения:
$(«#pet»).autocomplete («data_pets.php», {
extraParams: {bar: getClientId ()
}
});
PHP-скрипт data_pets.php приводит не буду, так как он почти идентичен скрипту data_clients.php. В SQL запросе пишем условие с учетом переменной $bar.
Вроде все. Но проблема в том, что при выборе клиента и изменении поля с кодом клиента, jQuery это изменение не замечает, так что скрипту data_pets.php передается все время один и тот же изначальный параметр. Нужно вручную указать на изменение. Именно для этого мы в обработчике «$(«#client»).» добавили строку «hidden.click ();». Теперь лишь нужно перезагрузить обработчик pet:
$(«#client_id»).click (function (){
$(«#pet»).attr («value»,'');
$(«#pet_id»).attr («value»,'');
$(«#pet»).unbind ().autocomplete («data_pets.php», {
extraParams: {bar: getClientId ()}
});$(«#pet»).result (function (event, data, formatted) {
var hidden = $(«#pet_id»);
hidden.val (data[1]);
hidden.click (); });
});
Все. Теперь все работает.
Наверняка, многие при разработке интерактивных веб-приложений, сталкивались с проблемой редактирования данных. Например, вот такая тривиальная ситуация. Имеется большая таблица данных. Необходимо предоставить пользователю удобный интерфейс для их редактирования. В идеале это должно выглядеть так: пользователь щелкнул по тексту мышкой, текст преобразовался в форму. Пользователь отредактировал данные, нажал Enter и текст обновился.
Такое решение довольно легко реализовать, если использовать плагин для jQuery – jEditable, который я нашел в блоге Mike Tuupola.
Достаточно добавить на страницу следующий JS-код:
$(document).ready (function () {
$(«.edit»).editable («http://www.example.com/save.php», {
indicator : «Saving...»,
tooltip : 'Click to edit...'
});
});
В результате, любой контейнер (div, td, p и т.д.), помеченный стилем «edit» станет вести себя именно так, как я описал выше.
При всем желании проект TheBroth.com очень трудно отнести к тем ресурсам, которые станут вашим неоценимым помощником в бизнесе. Более того, после посещения этого сайта вы не приобретете новый багаж знаний по философии, истории или другим не менее важным наукам. TheBoth не преследует никаких возвышенных целей, кроме одной — позволить пользователю потратить пару десятков часов в день на полную ерунду — составление мозаики.
Несмотря на многообразие всевозможных органайзеров, ремайндеров и других программ, помогающих привести обилие различных документов, заметок и планов пользователю в порядок, обычные бумажные стикеры до сих пор пользуются завидной популярностью. Желтенькие (есть, конечно, стикеры и других цветов, но желтенький – это все-таки фирменный цвет) бумажки, обладающие минимальной функциональностью (написал, приклеил, выкинул) являются наглядным доказательством справедливости тезиса о том, что удобство превыше всего.
Похоже на то, что агрегаторы различного медийного контента, становятся чуть ли не самыми востребованными сервисами в Сети. Формирование персонального информационно канала с выборкой поставщиков контента — это единственный способ хоть как-то не дать себе утонуть в гигабайтах разных сведений, и в тоже время не упустить главного и нужного.
Английское слово «monkey» можно перевести не только русским словом «обезьяна», хотя это и самое распространенное его значение. «Monkey» — слово многогранное, которое обозначает и тележку для подъемного крана, и купюру в пятьсот долларов, и закладную, и даже овцу (в Австралии). Кроме того, это же слово употребляют, когда хотят сказать, что кто-то неумело обращается с какой-нибудь вещью или лезет не в свое дело.
В качестве предисловия: я влюблен в инструкции, переведенные на русский язык китайскими переводчиками. «Нога — корень здоровья» или «дутьручка» — такие перлы повышаю настроение на весь день. Когда я услышал, что китайский сервис Anothr.com русифицирован, то у меня закрались сильные подозрения, что нам опять достанется новая порция незабываемых лексических построений. Я не ошибся. Самая первая фраза, которая встречает пользователя: «приветствовать использовать сервис на русском языком», уже говорит о многом. А какие сложные ассоциативные связи привели переводчика к мысли о том, что английское «Tips» нужно переводить словом «медсестра», остается только догадываться. Кстати, я не вполне понимаю природу подобного явления. Неужели так трудно попросить любого русского студента привести текст в порядок! Причем, русскому студенту вовсе не обязательно для этого быть филологом. Обещаю, если владелец Anothr.com обратится ко мне, то я ему обязательно помогу (хотя я тоже, конечно, не Розенталь, но, думаю, смогу придумать, что-нибудь поприличнее, чем «вы уже удачны удалить все»). Однозначно — сервис вполне достоин более качественной русификации.