jQuery и другое... » jQuery

jqGrid Часть II: Базовые возможности

TRAHOMOTO — Sat, 27 Feb 2010 07:37:35 +0000

Итак в предыдущей статье (jqGrid Часть I:Знакомство) мы с вами подготовили платформу для опытов и выполнили «пробный запуск» плагина, с самыми «базовейшими» параметрами. Согласно которым таблица запрашивает данные с сервера в XML разметке, при этом у нас есть возможность сортировать данные в столбцах.

В данной статье мы продолжим эксперименты и прощупаем еще ряд замечательных возможностей jqGrid, вот план действий:

I. Другие способы загрузки данных
1) Загрузка данных в виде JSON объекта

JSON – как и XML является текстовым форматом обмена данными, при этом намного моложе последнего. Является более прогрессивным методом, благодаря большей гибкости своей архитектуры по сравнению с XML. На тему сравнения XML и JSON есть очень хорошая статья (JSON и XML. Что лучше?). Но при генерировании ответа в JSON методами PHP, есть ряд особенностей при работе с кириллицей. Повествование о которых выходит за рамки данной статьи, поэтому я ограничиваюсь лишь упоминанием.

Итак на практике загрузка таких данных требует следующей конфигурации плагина:

$(function(){
                $('#table').jqGrid({
                              url:'p2e1.php',
                  datatype: 'json',
                             mtype: 'GET',
                             colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
                             colModel :[
                                    {name:'country_code', index:'country_code', width:80},
                                    {name:'region_code', index:'region_code', width:80},
                                    {name:'city', index:'city', width:90},
                                    {name:'latitude', index:'latitude', width:60},
                                    {name:'longitude', index:'longitude', width:60},
                                    {name:'nbip', index:'nbip', width:30}],
                            pager: $('#tablePager'),
                            rowNum:10,
                            rowList:[10,20,30,100],
                            sortname: 'city',
                            sortorder: 'asc',
                  caption: 'Загрузка JSON данных',
                  rownumbers: true,
                            rownumWidth: 40
                });
    });

Все изменения я выделил отступами (строки 4, 19-21). Как вы можете видеть в листинге параметру datatype: присвоено значение ‘json’, что говорит плагину о том что от сервера ожидается ответ в виде JSON объекта. Далее я ввел в конфиг таблицы еще три свойства caption, rownumbers, rownumWidth. Что они определяют?

caption – если это свойство не пустое, то у таблицы появляется заголовок с текстом, присвоенным этому свойству.
rownumbers – если это свойство «истина», то первым столбцом таблицы будет столбец с номерами записей по порядку.
- rownumWidth – это свойство зависимо от rownumbers. И определяет ширину столбца с нумерацией.

С данного момента, я ввожу еще одно правило в этот цикл статей. Все свойства-параметры инициализации jqGrid вы будете самостоятельно изучать на странице документации плагина в разделе Options и colModel Options. Но при этом я буду комментировать, то на что следует обратить внимание.

C параметрами клиентской части разобрались, теперь перейдем к серверной. Здесь я привожу листинг только последних строк кода, собственно это момент формирования и вывод ответа сервера.

Пример 1 – используя массив

...
// Начало формирование массива
// для последующего преобразоования
// в JSON объект
$data['page']       = $page;
$data['total']      = $total_pages;
$data['records']    = $count;
// Строки данных для таблицы
$i = 0;
while($row = mysql_fetch_assoc($result)) {
    $data['rows'][$i]['id'] = $row['id'];
    $data['rows'][$i]['cell'][] = $row['country_code'];
    $data['rows'][$i]['cell'][] = $row['region_code'];
    $data['rows'][$i]['cell'][] = $row['city'];
    $data['rows'][$i]['cell'][] = $row['latitude'];
    $data['rows'][$i]['cell'][] = $row['longitude'];
    $data['rows'][$i]['cell'][] = $row['nbip'];
    $i++;
}
// Перед выводом не забывайте выставить header
// с типом контента и кодировкой
header("Content-type: application/json;charset=utf-8");
echo json_encode($data);

Пример 2 – используя объект

...
// Начало формирование объекта
// для последующего преобразоования
// в JSON объект
$data->page       = $page;
$data->total       = $total_pages;
$data->records   = $count;
// Строки данных для таблицы
$i = 0;
while($row = mysql_fetch_assoc($result)) {
    $data->rows[$i]['id'] = $row[id];
    $data->rows[$i]['cell'] = array($row[country_code],$row[region_code],$row[city],$row[latitude],$row[longitude],$row[nbip]);
    $i++;
}
// Перед выводом не забывайте выставить header
// с типом контента и кодировкой
header("Content-type: text/script;charset=utf-8");
echo json_encode($data);

Оба подхода выполняют одни и те же действия, но при этом выбор подхода зависит от ваших предпочтений и уровня мастерства.

Вот ссылка на ДЕМО2.1 и ссылка на архив с примером.
Подытожив, скажу, что как видите в данном способе загрузки данных нет ничего сложного и принцип работы идентичен с загрузкой данных в виде XML, но при этом немного облегчается код серверного скрипта. Также повторюсь, что при кодировании данных в JSON методом PHP следует учитывать особенности работы с кириллицей!

2) Загрузка данных в виде массива

Теперь рассмотрим пример, как можно создать jqGrid используя в качестве источника данных массив. Как вы понимаете для данного примера не понадобится серверный скрипт, а клиентский скрипт будет выглядеть приблизительно так.

$(function(){
$('#table').jqGrid({
  datatype: 'local',
          colNames:['ID','Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
          colModel :[
                        {name:'id', index:'id', width:20},
                        {name:'country_code', index:'country_code', width:80},
                        {name:'region_code', index:'region_code', width:80},
                        {name:'city', index:'city', width:90},
                        {name:'latitude', index:'latitude', width:60},
                        {name:'longitude', index:'longitude', width:60},
                        {name:'nbip', index:'nbip', width:30}
                     ],
          caption: 'Загрузка массива данных'
});
var data = [
            {id: '1', country_code:'AD',  region_code:'02', city:'Canillo', latitude:'42.5667', longitude: '1.6', nbip:'0'},
            {id: '2', country_code:'AD',  region_code:'02', city:'El Tarter', latitude:'42.5833', longitude: '1.65', nbip:'0'},
            {id: '3', country_code:'AD',  region_code:'03', city:'Encamp', latitude:'42.5333', longitude: '1.5833', nbip:'0'},
            {id: '4', country_code:'AD',  region_code:'04', city:'Arinsal', latitude:'42.5667', longitude: '1.4833', nbip:'1'},
            {id: '5', country_code:'AD',  region_code:'04', city:'La Massana', latitude:'42.55', longitude: '1.5167', nbip:'0'},
            {id: '6', country_code:'AD',  region_code:'04', city:'Llorts', latitude:'42.6', longitude: '1.5333', nbip:'0'},
            {id: '7', country_code:'AD',  region_code:'05', city:'Ordino', latitude:'42.55', longitude: '1.5333', nbip:'2'},
            {id: '8', country_code:'AD',  region_code:'06', city:'Sant JuliГ  De LГІria', latitude:'42.4667', longitude: '1.5', nbip:'0'},
            {id: '9', country_code:'AD',  region_code:'07', city:'Andorra La Vella', latitude:'42.5', longitude: '1.5167', nbip:'56'},
            {id: '10', country_code:'AD',  region_code:'08', city:'Engordany', latitude:'42.5167', longitude: '1.55', nbip:'1'},
            {id: '11', country_code:'AD',  region_code:'08', city:'Les Escaldes', latitude:'42.5', longitude: '1.5333', nbip:'0'},
            {id: '12', country_code:'AE',  region_code:'01', city:'Abu Dhabi', latitude:'24.4667', longitude: '54.3667', nbip:'824'},
            {id: '13', country_code:'AE',  region_code:'01', city:'Al Ain', latitude:'24.1917', longitude: '55.7606', nbip:'19'},
            {id: '14', country_code:'AE',  region_code:'03', city:'Deira', latitude:'25.2722', longitude: '55.3111', nbip:'0'},
            {id: '15', country_code:'AE',  region_code:'03', city:'Dubai', latitude:'25.2521', longitude: '55.28', nbip:'7082'},
            {id: '16', country_code:'AE',  region_code:'03', city:'Jumairah', latitude:'25.2097', longitude: '55.2478', nbip:'0'},
            {id: '17', country_code:'AE',  region_code:'04', city:'Fujairah', latitude:'25.1231', longitude: '56.3375', nbip:'1'},
            {id: '18', country_code:'AE',  region_code:'05', city:'Ras Al Khaima', latitude:'25.7911', longitude: '55.9428', nbip:'0'},
            {id: '19', country_code:'AE',  region_code:'05', city:'Ras Al Khaimah', latitude:'25.7911', longitude: '55.9428', nbip:'2'},
            {id: '20', country_code:'AE',  region_code:'06', city:'Dibba', latitude:'25.6167', longitude: '56.2667', nbip:'1'},
            {id: '21', country_code:'AE',  region_code:'06', city:'Sharjah', latitude:'25.3622', longitude: '55.3911', nbip:'297'},
            {id: '22', country_code:'AF',  region_code:'11', city:'Herat', latitude:'34.3469', longitude: '62.1983', nbip:'0'},
            {id: '23', country_code:'AF',  region_code:'13', city:'Kabul', latitude:'34.5167', longitude: '69.1833', nbip:'161'},
            {id: '24', country_code:'AF',  region_code:'23', city:'Iran', latitude:'31.8314', longitude: '65.0689', nbip:'0'},
            {id: '25', country_code:'AF',  region_code:'23', city:'Kandahar', latitude:'31.6125', longitude: '65.7094', nbip:'0'}
           ]
for(var i = 0;i <= data.length; i++){
    $('#table').jqGrid('addRowData',i+1,data[i]);
}
});

Как видите и в этом примере нет ничего «военного», все предельно просто. В качестве datatype: указываем ‘local’. Далее каким-либо образом(в данном примере простым присвоением) создаем массив объектов (каждая строка данных является объектом) и производим добавление данных методом addRowData в цикле (for(var i = 0;i <= data.length; i++)).
На данном этапе мне следует дать небольшой комментарий. Почему я написал «… добавление данных методом …» а при этом вся конструкция выглядит как передача параметра. Т.е. фактически происходит передача названия метода addRowData методу jqGrid() в качестве параметра. Дело все в том, что с версии 3.6 разработчики реализовали новый API для работы с jqGrid, согласно которому запись вида $(‘#table’).jqGrid(‘addRowData’,i+1,data[i]); равноценна $(‘#table’).addRowData(i+1,data[i]); Но будьте внимательны, не все методы могут быть использованы в аннотации нового API, перед использованием методов обязательно ознакомьтесь с документацией по данному методу на странице Methods.

addRowData – добавляет в таблицу новую строку данных. При этом строка данных должна выглядеть следующим образом {имя1: значение1, имя2: значение2…}. В качестве первого параметра методу, addRowData передается id вставляемой строки, а вторым объект данных (addRowData(row_id, row_data)).

Также в свойствах инициализации jqGrid вы не найдете параметров панели-листалки, потому что данные уже загружены и нет необходимости запрашивать их порциями.
Если присмотреться, то можно заметить что данный способ загрузки данных напоминает работу с JSON, но только на стороне клиента. Такой способ может пригодиться если вы по каким-либо причинам не можете сформировать XML или JSON ответ с данными от сервера.
3) Конвертирование простой таблицы в jqGrid
Данный способ создания jqGrid будет полезен во время «страховки» на странице. Т.е. у нас есть страница, на которой есть таблица jqGrid в «нормальном браузере», но как же пользователи у которых браузер не поддерживает JavaScript (Простите но тут обязан быть смайл )? Они не увидят таблицу? И вот тут то и пригодится данное свойство плагина.
План действий таков:

На сервере выполняется скрипт, который выводит в браузер страницу с таблицей и данными.
После загрузки всех элементов страницы выполняется функция преобразования статической таблицы в jqGrid
Ну, а если браузер посетителя-бедолаги не поддерживает JS, то он просто увидит таблицу. Которую кстати можно оформить используя стили jQueryUI CSS Framework.

Вот и листинг





Осваиваем jqGrid с Linkexchanger









// Запрос выборки данных
$query = 'SELECT id, country_code, region_code, city, latitude, longitude, nbip FROM cities LIMIT 30';
$result = mysql_query($query);
// Строим таблицу с данными
echo "";
echo "";
while($row = mysql_fetch_assoc($result)) {
    echo "td>'.$row['latitude'].'";
}
echo "ID Код страны Код региона Город Долгота Широта nbip
'.$row['id'].' '.$row['country_code'].' '.$row['region_code'].' '.$row['city'].' '.$row['longitude'].' '.$row['nbip'].'";
?>

ID	Код страны	Код региона	Город	Долгота	Широта	nbip
'.$row['id'].'	'.$row['country_code'].'	'.$row['region_code'].'	'.$row['city'].'	'.$row['longitude'].'	'.$row['nbip'].'

И ссылка на ДЕМО2.2 (просто кликните на таблицу)
Как видите простейший код, при клике на объект #table собственно таблицу, выполняется функция tableToGrid() которой в качестве параметра передается селектор таблицы которую следует преобразовать в jqGrid.

Использование свойств при конвертировании таблицы в jqGrid
И раз уж мы начали разговор про этот метод инициализации jqGrid, то давайте рассмотрим на примере ДЕМО2.2_1 его работу. А следом и код

var options = {
                    caption: 'Конвертирование таблицы',
                    width: 800,
                    height: 600,
                    colModel :[
                                {name:'ID', width:20},
                                {name:'Код страны', width:80},
                                {name:'Страна', width:100, formatter:'select', editoptions:{value:"AD:Andorra; AE:United Arab Emirates; AF:Afghanistan; AG:Antigua and Barbuda; AI:Anguilla; AL:Albania; AM:Armenia; AN:Netherland Antilles; AO:Angola; AR:Argentina"}},
                                {name:'Код региона', width:80},
                                {name:'Город', width:90},
                                {name:'Долгота', width:60},
                                {name:'Широта', width:60},
                                {name:'nbip', index:'nbip', width:30}
                   ]};
                   tableToGrid("#table",options);

Как видите при использовании этой функции, в качестве второго параметра можно передать объект с параметрами таблицы. Но при этом следует обратить внимание на то, что заголовки столбцов должны иметь такое же имя как и текст в заголовке конвертируемой таблицы. Я думаю вы обратили внимание на дополнительные параметры в строке 8, мы рассмотрим их далее в этой статье.
II. Форматирование данных
1) Форматирование ячеек
Википедия определяет Форматирование как «приведение чего-либо к какому-либо формату». Соответственно в нашем случае это будет преобразование полученных от сервера данных, к другому виду. jqGrid позволяет производить как простое так и сложное форматирование. «Простым форматированием» я условно назвал «Выравнивание» и «Изменением цвета» данных при этом мы «форматируем ячейку».
Давайте посмотрим как это делается на примере ДЕМО2.3

$(function(){
    $('#table').jqGrid({
              datatype: 'local',
              colNames:['ID','Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
              colModel :[
                            {name:'id', index:'id', width:20, align: 'center'},
                            {name:'country_code', index:'country_code', width:80, align: 'right'},
                            {name:'region_code', index:'region_code', width:80, align: 'left'},
                            {name:'city', index:'city', width:90},
                            {name:'latitude', index:'latitude', width:60},
                            {name:'longitude', index:'longitude', width:60},
                            {name:'nbip', index:'nbip', width:30}
                         ],
              caption: 'Простое форматирование',
              width: 600,
              afterInsertRow: function(row_id, row_data){
                                if (row_data.country_code == 'AD') {
                                    $('#table').jqGrid('setCell',row_id,'city','',{'color':'#FF00FF'});
                                }else if(row_data.country_code == 'AE'){
                                    $('#table').jqGrid('setCell',row_id,'city','',{'color':'red'});
                                }else{
                                    $('#table').jqGrid('setCell',row_id,'city','',{'background-color': '#999999'});
                              if(row_data.country_code == 'CZ'){
                                        $('#table').jqGrid('setCell',row_id,'city','',{'color':'#FF00FF', 'font-weight':'bold'},{'title': 'Чехия Ура!'});
                                    }
                                }
                            }
    });
var data = [
            {id: '1', country_code:'AD',  region_code:'02', city:'Canillo', latitude:'42.5667', longitude: '1.6', nbip:'0'},
            {id: '2', country_code:'AD',  region_code:'02', city:'El Tarter', latitude:'42.5833', longitude: '1.65', nbip:'0'},
            {id: '3', country_code:'AD',  region_code:'03', city:'Encamp', latitude:'42.5333', longitude: '1.5833', nbip:'0'},
            {id: '4', country_code:'AD',  region_code:'04', city:'Arinsal', latitude:'42.5667', longitude: '1.4833', nbip:'1'},
            {id: '5', country_code:'AD',  region_code:'04', city:'La Massana', latitude:'42.55', longitude: '1.5167', nbip:'0'},
            {id: '6', country_code:'AD',  region_code:'04', city:'Llorts', latitude:'42.6', longitude: '1.5333', nbip:'0'},
            {id: '7', country_code:'AD',  region_code:'05', city:'Ordino', latitude:'42.55', longitude: '1.5333', nbip:'2'},
            {id: '8', country_code:'AD',  region_code:'06', city:'Sant JuliГ  De LГІria', latitude:'42.4667', longitude: '1.5', nbip:'0'},
            {id: '9', country_code:'AD',  region_code:'07', city:'Andorra La Vella', latitude:'42.5', longitude: '1.5167', nbip:'56'},
            {id: '10', country_code:'AD',  region_code:'08', city:'Engordany', latitude:'42.5167', longitude: '1.55', nbip:'1'},
            {id: '11', country_code:'AD',  region_code:'08', city:'Les Escaldes', latitude:'42.5', longitude: '1.5333', nbip:'0'},
            {id: '12', country_code:'AE',  region_code:'01', city:'Abu Dhabi', latitude:'24.4667', longitude: '54.3667', nbip:'824'},
            {id: '13', country_code:'AE',  region_code:'01', city:'Al Ain', latitude:'24.1917', longitude: '55.7606', nbip:'19'},
            {id: '14', country_code:'AE',  region_code:'03', city:'Deira', latitude:'25.2722', longitude: '55.3111', nbip:'0'},
            {id: '15', country_code:'AE',  region_code:'03', city:'Dubai', latitude:'25.2521', longitude: '55.28', nbip:'7082'},
            {id: '16', country_code:'AE',  region_code:'03', city:'Jumairah', latitude:'25.2097', longitude: '55.2478', nbip:'0'},
            {id: '17', country_code:'AE',  region_code:'04', city:'Fujairah', latitude:'25.1231', longitude: '56.3375', nbip:'1'},
            {id: '18', country_code:'AE',  region_code:'05', city:'Ras Al Khaima', latitude:'25.7911', longitude: '55.9428', nbip:'0'},
            {id: '19', country_code:'AE',  region_code:'05', city:'Ras Al Khaimah', latitude:'25.7911', longitude: '55.9428', nbip:'2'},
            {id: '20', country_code:'AE',  region_code:'06', city:'Dibba', latitude:'25.6167', longitude: '56.2667', nbip:'1'},
            {id: '21', country_code:'AE',  region_code:'06', city:'Sharjah', latitude:'25.3622', longitude: '55.3911', nbip:'297'},
            {id: '22', country_code:'AF',  region_code:'11', city:'Herat', latitude:'34.3469', longitude: '62.1983', nbip:'0'},
            {id: '23', country_code:'AF',  region_code:'13', city:'Kabul', latitude:'34.5167', longitude: '69.1833', nbip:'161'},
            {id: '24', country_code:'AF',  region_code:'23', city:'Iran', latitude:'31.8314', longitude: '65.0689', nbip:'0'},
            {id: '25', country_code:'AF',  region_code:'23', city:'Kandahar', latitude:'31.6125', longitude: '65.7094', nbip:'0'},
            {id: '26', country_code:'CZ',  region_code:'23', city:'Stav', latitude:'50.4667', longitude: '15.4667', nbip:'0'}
           ]
for(var i = 0;i <= data.length; i++){
     $('#table').jqGrid('addRowData',i+1,data[i]);
}
});

Для этого примера я взял код «Загрузки данных из массива». Давайте разберем, то что изменилось. Во-первых для удобства это таблица имеет ширину 600px (width: 600), во-вторых появился обработчик на событие afterInsertRow и в-третьих – в набор данных добавилась строка id 26.
Итак выравнивание текста в ячейке осуществляется простым определением свойства align в модели столбца (colModel).
А вот чтобы раскрасить, а также изменить другие стилевые свойства ячейки, нужно писать пользовательскую функцию, например как та что написал я. Давайте разберемся что же происходит.
Сразу после добавления строки в таблицу возникает событие afterInsertRow (все события вы можете изучить на странице Events), при котором выполняется функция. Функции принимает в качестве параметров (см. описание события) Id строки (row_id) и объект с данными (row_data) текущей строки, вставка которой вызвала событие. Далее смотрим чему равен country_code текущей строки.

Если AD то установить ячейке (setCell) в строке row_id с именем city данные » (пусто – не менять текущие данные) и стиль color:#FF00FF. Последнее действие аналогично записи для «обыкновенной» таблицы.
Если AE – аналогично, но цвет текста в ячейке сделать red.
Иначе всем остальным ячейкам сделать фон #999999 и если попадутся строки с CZ то выделить такие ячейки жирным шрифтом и присвоить атрибуту title текст ‘Чехия Ура!’. Атрибуты ячейки можно выставить передав в качестве 5го параметра функции setCell объект с именами и значениями этих атрибутов.

Как вы понимаете благодаря такому подходу, можно раскрасить таблицу как угодно.
2) Изменение представления данных
Другим мощным инструментом форматирования данных в jqGrid является набор «предопределенных форматтеров» (Predefined Formatter). Это функции, которые выполняются над данными в столбце.
Существует 9 стандартных форматтеров

integer – форматирование целых чисел
number – форматирование любых чисел
currency – форматирование денежных величин
date – форматирование даты/времени
email – форматирование адресов эл. почты
link – форматирование ссылок
showlink – генератор ссылок
checkbox – форматирование данных имеющих два состояния
select - форматирование данных имеющих множество состояний

$(function(){
    $('#table').jqGrid({
      url:'p2e4.php',
      datatype: 'json',
      mtype: 'GET',
      colNames:['id', 'integer', 'number', 'currency','date','email','link','showlink','checkbox','select','ip'],
      colModel :[
        {name:'id', index:'id', width:15},
        {name:'integer', index:'integer', width:50},
        {name:'number', index:'number', width:50},
        {name:'currency', index:'currency', width:60},
        {name:'date', index:'date', width:65},
        {name:'email', index:'email', width:70},
        {name:'link', index:'link', width:300},
        {name:'showlink', index:'showlink', width:130},
        {name:'checkbox', index:'checkbox', width:35},
        {name:'select', index:'select', width:30},
        {name:'ip', index:'ip', width:50}],
      caption: 'Данные в чистом виде',
      autowidth: true
    });
$('#tableFormated').jqGrid({
      url:'p2e4.php',
      datatype: 'json',
      mtype: 'GET',
      colNames:['id', 'integer', 'number', 'currency','date','email','link','showlink','checkbox','select','ip'],
      colModel :[
        {name:'id', index:'id', width:15},
        {name:'integer', index:'integer', width:50, formatter:'integer', formatoptions:{defaultValue: 'n.a.'}},
        {name:'number', index:'number', width:50, formatter:'number',formatoptions:{decimalPlaces: 3}},
        {name:'currency', index:'currency', width:60, formatter:'currency',formatoptions:{prefix: '$', suffix:'p.'}},
        {name:'date', index:'date', width:65, formatter: 'date',formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'F d'}},
        {name:'email', index:'email', width:70, formatter: 'email'},
        {name:'link', index:'link', width:300, formatter:'link',formatoptions:{target: '_blank'}},
        {name:'title', index:'title', width:130, formatter:'showlink',formatoptions:{baseLinkUrl: 'http://www.linkexchanger.su/forum/',showAction: 'viewtopic.php', addParam: '&f=4', idName:'t',target: '_blank'}},
        {name:'checkbox', index:'checkbox', width:35, formatter:'checkbox',formatoptions:{disabled: true}},
        {name:'select', index:'select', width:30, formatter:'select', editoptions:{value:":Все; black:Черный; white:Белый; yellow:Желтый; red:Красный"}},
        {name:'ip', index:'ip', width:50, formatter:long2ip}],
      caption: 'Встроенное форматирование',
      autowidth: true
    });
function long2ip (proper_address) {
        var output = false;
if ( !isNaN( proper_address ) && ( proper_address >= 0 || proper_address <= 4294967295 ) ) {
            output = Math.floor(proper_address / Math.pow( 256, 3 ) ) + '.' +
                Math.floor( ( proper_address % Math.pow( 256, 3 ) ) / Math.pow( 256, 2 ) ) + '.' +
                Math.floor( ( ( proper_address % Math.pow( 256, 3 ) )  % Math.pow( 256, 2 ) ) / Math.pow( 256, 1 ) ) + '.' +
                Math.floor( ( ( ( proper_address % Math.pow( 256, 3 ) ) % Math.pow( 256, 2 ) ) % Math.pow( 256, 1 ) ) / Math.pow( 256, 0 ) );
        }
return output;
    }
});

Работающий код данного примера можно увидеть на ДЕМО2.4. Или если вы хотите скачать его, то вот ссылка на архив, внутри клиентский и серверный скрипты, а также дамп БД.
Давайте разберемся как все это работает. Сам пример выглядит как две таблицы и как написано в заголовках, верхняя – отображает данные с сервера как они есть, а нижняя – применяет собственные методы форматирования. Как вы уже наверное догадались, в этом примере важен только клиентский код, поэтому серверный скрипт я упростил до минимума, поэтому таблица не сортирует данные в столбцах. Все столбцы кроме последнего названы в соответствии с используемым «форматтером». Все «форматтеры» используются одинаково, указывая имя и параметры в colModel таблицы, описания всех параметров доступны на странице Predefined Formatter документации плагина.
Теперь подробнее по применению в данном примере.

formatter:’integer’, formatoptions:{defaultValue: ‘n.a.’} – я переназначил значение по-умолчанию, которое будет отображаться в таблице если сервер не вернул никакого значения (пусто).
formatter:’number’,formatoptions:{decimalPlaces: 3} – для данного типа данных я хочу чтобы после запятой было 3 знака.
formatter:’currency’,formatoptions:{prefix: ‘$’, suffix:’p.’} – для валют нужно ставить вначале $, а в конце р.
formatoptions:{srcformat:’Y-m-d H:i:s’,newformat:’F d’} – для использования этого «форматтера» сначала нужно указать параметру srcformat: маску формата даты в принятом в PHP виде, а затем новый формат newformat:
formatter: ‘email’ – этот «форматтер» не имеет параметров, он всего лишь добавляет mailto: к адресам эл.почты
formatter:’link’,formatoptions:{target: ‘_blank’} – с помощью ‘link’ можно указать target открытия ссылки
formatter:’showlink’,formatoptions:{baseLinkUrl: ‘http://www.linkexchanger.su/forum/’, showAction: ‘viewtopic.php’, addParam: ‘&f=4′, idName:’t', target: ‘_blank’} - а вот с помощью этого «форматтера» можно генерировать ссылки. В нашем примере сервер возвращает название раздела форума linkexchanger в поле showlink в верхней таблице, при этом в нижней таблице вы видите уже готовую ссылку на тему. Это делается указанием следующих параметров:
- baseLinkUrl: – базовая (не изменяющаяся) часть адреса.
- showAction: – имя скрипта или метода сервера, в нашем примере это скрипт, который показывает тему.
- addParam: – дополнительные параметры адреса, в нашем случае это идентификатор ветки форума.
- idName: – какой параметр использовать в качестве имени идентификатора записи, в нашем случае темы форума. А вот сам идентификатор записи (темы на форуме) равен id строки в таблице.
formatter:’checkbox’,formatoptions:{disabled: true} – удобно использовать при отображении булевых данных (данных которые имеют только два значения), намного нагляднее видеть «флажок» вместо 0 или 1 например. При этом «флажок» можно сделать активным (formatoptions:{disabled: false}) и использовать при быстром редактировании (об этом в последующих статьях).
formatter:’select’, editoptions:{value:»:Все; black:Черный; white:Белый; yellow:Желтый; red:Красный»} – этот «форматтер» очень пригодится при отображении данных, имеющих много значений, но при этом все значения известны. В нашем примере замена названий цветов.

На этом Стандартные «форматтеры» закончились, а в последнем столбце используется пользовательский. Он представляет из себя функцию function long2ip (proper_address) полный аналог PHP’шной функции, но написанной на и для JS, которая переводит IP из unsignet int в «человеко-понятный» вид октетов с точками.
Если возникла необходимость создать сложный пользовательский «форматтер» со множеством параметров, то на странице Predefined Formatter можно посмотреть пример расширения jqGrid своим «форматтером».
III. Панели инструментов и дополнительные панели
1) Панель-листалка (Pager)
C этой панелью мы уже знакомы, именно ее мы инициализировали устанавливая свойства pager:, rowNum:, rowList: в предыдущих примерах. В принципе об этой панели рассказывать более нечего, я лишь приведу ссылку на прочие свойства панели Pager, которые возможно понадобятся вам для решения какой-то специфической задачи.
2) Панель инструментов (Navigator)
Данная панель совсем не является панелью это функция, которая позволяет добавлять элементы управления (кнопки) на панель-листалку. Т.е. если вы хотите использовать pager, то вы обязательно должны его объявить при инициализации jqGrid хотя бы со стандартными параметрами, без использования rowNum:, rowList:. После этого уже можно добавлять кнопки, давайте взглянем на ДЕМО2.5. Добавление кнопок стандартных функций.

$(function(){
        var pager = $('#tablePager');
$('#table').jqGrid({
                  url:'p2e1.php',
                  datatype: 'json',
                  mtype: 'GET',
                  colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
                  colModel :[
                    {name:'country_code', index:'country_code', width:80},
                    {name:'region_code', index:'region_code', width:80},
                    {name:'city', index:'city', width:90},
                    {name:'latitude', index:'latitude', width:60},
                    {name:'longitude', index:'longitude', width:60},
                    {name:'nbip', index:'nbip', width:30}],
                  pager: pager,
                  sortname: 'city',
                  sortorder: 'asc',
                  caption: 'Pager в качестве панели инструментов',
                  autowidth: true
         }).jqGrid('navGrid', pager);
});

Итак друзья мы с вами переступили порог начального уровня использования плагина, с этого момента я буду рассказывать о продвинутых функциях jqGrid.
Как вы уже заметили на листалке появились 6 кнопок, при этом 4 «практически не работают», 1 – «практически работает» и 1 работает, давайте разберемся. Листинг выглядит вполне «стандартно», разве что строка var pager = $(‘#tablePager’); может вызвать легкое недоумение у новичков, но это обычная практика программирования JS, а именно кэширование, об этом написан цикл хороших статей, возьмите эту методику на вооружение! Далее вы можете видеть что после инициализации jqGrid я инициализирую панель Navigator используя метод navGrid. Данному методу в качестве первого параметра передается селектор панели листалки, вторым параметром (не указан в листинге) – объект в котором указывается функции (редактировать, добавить и т.п.) которые необходимо задействовать на панели (например {view:true, del:false}), а далее идут объекты с параметрами по каждой из функций в определенном порядке. Давайте я приведу иллюстрацию в виде списка:

pagerSelector
{refresh: true(false), add: true(false), del: true(false), edit: true(false), search: true(false), view: true(false)}
{… параметры редактирования …}
{… параметры добавления …}
{… параметры удаления …}
{… параметры поиска …}
{… параметры просмотра …}

Я уверен, что теперь вам стало ясно почему не работают или не совсем работают задействованные функции, потому что они просто не настроены. Т.к. использование этих функций будет рассмотрена в последующих статьях, я не буду продолжать рассмотрение настроек, а перейду к следующему подпункту Добавление пользовательских кнопок.
jqGrid позволяет добавлять на панель pager пользовательские кнопки и назначать на них функции, ниже приведен листинг ДЕМО2.6

$(function(){
var pager = $('#tablePager');
$('#table').jqGrid({
              url:'p2e1.php',
              datatype: 'json',
              mtype: 'GET',
              colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
              colModel :[
                {name:'country_code', index:'country_code', width:80},
                {name:'region_code', index:'region_code', width:80},
                {name:'city', index:'city', width:90},
                {name:'latitude', index:'latitude', width:60},
                {name:'longitude', index:'longitude', width:60},
                {name:'nbip', index:'nbip', width:30}],
              pager: pager,
              sortname: 'city',
              sortorder: 'asc',
              caption: 'Pager в качестве панели инструментов',
              autowidth: true
     }).jqGrid('navGrid', pager,{add: false, del: false, edit: false, search: false});
$('#table').jqGrid('navSeparatorAdd','#tablePager');
     $('#table').jqGrid('navButtonAdd','#tablePager',{
                                              caption: 'Закрутить ',
                                              title: 'Ключ рожковый, обыкновенный',
                                              buttonicon: 'ui-icon-wrench',
                                              onClickButton: function(){
                                                                 alert('Скрип, скрип, скрип!..');
                                                             },
                                              position:'last'
               }).jqGrid('navButtonAdd','#tablePager',{
                                              caption: 'Замкнуть ',
                                              title: 'Открытый замок',
                                              buttonicon: 'ui-icon-unlocked',
                                              onClickButton: lock,
                                              position:'last'
});
function lock(){
                  alert('Взяли и замкнули что-то...');
              }
});

В данном примере после стандартных кнопок, из которых я оставил только «Обновить», вставлен разделитель (separator) и две кнопки «Закрутить» и «Замкнуть», простите но оригинальнее я не смог ничего придумать. По нажанию на эту кнопку вызываются функции, которые показывают стандартный alert.
Разделитель добавляется методом navSeparatorAdd, первым параметром которого является строка-селектор панели-листалки (pager), а в качестве второго (не указан в листинге) объект с параметрами разделителя.

Вот тут следует немного отвлечся и обратить ваше внимание на небольшой ньюанс, возможно разработчики что-то не доделали или не захотели доделать, но при использовании методов navSeparatorAdd и navButtonAdd в качестве первого параметра должна быть передана именно строка-селектор, но никак не переменная содержащая последний.

Параметры разделителя по-умолчанию:
{sepclass: ‘ui-separator’, sepcontent: »}
Где

sepclass: – класс в CSS ui.jqgrid.css, который определяет стиль разделителя. Можно использовать если захотите изменить внешний вид разделителя.
sepcontent: – контент, который может быть помещен в разделитель.

Кнопка вставляется с помощью метода navButtonAdd
{ caption:’NewButton’, buttonicon:’ui-icon-newwin’, onClickButton:null, position: ‘last’, title:’ ‘, cursor: ‘pointer’}
Где

caption: – надпись на кнопке
title: – атрибут кнопки, используется как подсказка
buttonicon: – название класса иконки из jQuery UI CSS Framework
onClickButton: – функция, которая будет выполнена при клике на кнопке
position: (‘first’ или ‘last’) – добавить кнопку до или после стандартных кнопок
cursor: – CSS свойство, определяющее вид курсора при наведении на элемент
id: – с помощью этого свойства можно задать значение атрибуту id контейнеру(TD – обыкновенная ячейка таблицы) в котором находится кнопка.

Однако при всем своем удобстве, у данного подхода к созданию панели инструментов есть ряд недостатков, таких как то что панель находится в нижней части таблицы, мало места для каких-то дополнительных элементов, большого размера и т.п. Для этих целей разработчики добавили еще и возможность создания пользовательских панелей.
3) Пользовательские панели
Вот ДЕМО2.7 листинги которого приведены ниже.
Клиентская часть

$(function(){
       $('#table').jqGrid({
           sortable: true,
                  url:'p2e1.php?userdata=true',
                  datatype: 'json',
                  mtype: 'GET',
                  colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
                  colModel :[
                    {name:'country_code', index:'country_code', width:80},
                    {name:'region_code', index:'region_code', width:80},
                    {name:'city', index:'city', width:90},
                    {name:'latitude', index:'latitude', width:60},
                    {name:'longitude', index:'longitude', width:60, resizable: false},
                    {name:'nbip', index:'nbip', width:30}],
                  pager: $('#tablePager'),
          toolbar: [true,'both'],
                  sortname: 'city',
                  sortorder: 'asc',
                  caption: 'Пользовательские панели инструментов',
                  autowidth: true,
                  loadComplete: function() {
                                    var udata = $('#table').jqGrid('getUserData');
                                    $('#tb_table').css('text-align','right').html(udata.msg+' '+udata.sum_regions_numbers+' '+udata.button);
                                }
    });
$("#t_table").height(60); //Set height of toolbar
    $("#t_table").append('');
    $("#say_hello").click(function(){
            alert("Привет! Спасибо что читаете linkexchanger.su!");
    });
    $('#show_sum').live('click',function(){
        var val = $(this).val();
        alert('Обратите внимание, с сервера мы получили кнопку с сууммой '+val+', а обработчик назначили уже на странице');
    });
   });

И серверная, практически полностью повторяющая пример 2.1

// Начало формирование массива
// для последующего преобразоования
// в JSON объект
$data['page']       = $page;
$data['total']      = $total_pages;
$data['records']    = $count;
// Дополнительная информация с сервера
if($_GET['userdata']){
  $data['userdata']['msg'] = 'Сумма всех чисел в столбце "region_code" равна ';
  $data['userdata']['sum_regions_numbers'] = ''. $row['sum'].'';
  $data['userdata']['button'] = '';
}
// Строки данных для таблицы
$i = 0;
while($row = mysql_fetch_assoc($result)) {
    $data['rows'][$i]['id'] = $row['id'];
    $data['rows'][$i]['cell'][] = $row['country_code'];
    $data['rows'][$i]['cell'][] = $row['region_code'];
    $data['rows'][$i]['cell'][] = $row['city'];
    $data['rows'][$i]['cell'][] = $row['latitude'];
    $data['rows'][$i]['cell'][] = $row['longitude'];
    $data['rows'][$i]['cell'][] = $row['nbip'];
    $i++;
}
// Перед выводом не забывайте выставить header
// с типом контента и кодировкой
header("Content-type: text/script;charset=utf-8");
echo json_encode($data);

Ну а теперь по традиции давайте разберем пример подробнее
jqGrig позволяет создавать две независимые панели инструментов. Для этого стоит свойству toolbar: присвоить массив [true,'both'], элементы которго в данном случае означают, что нужно создать обе(верхнюю и нижнюю) панели инструментов. Вместо ‘both’ также можно указать ‘top’ или ‘bottom’ для верхней и нижней панелей соответственно.
Теперь давайте рассмотрим первый вариант манипуляции с элементами на панелях, начнем с верхней панели. При инициализации плагина с определенным свойством toolbar: jqGrid автоматически выставит атрибут id верхней панели как id=»t_»(«t_table» в нашем случае), а нижнюю id=»tb_» («tb_table» в нашем случае). С помощью этих идентификаторов можно отыскать «тулбары» в DOM и выполнить например такие манипуляции

$("#t_table").height(60); $("#t_table").append(''); ... $("#say_hello").click(function(){ alert("Привет! Спасибо что читаете linkexchanger.su!"); });

Первая строка сделает высоту верхней панели равной 60px, а вторая поместит на нее кнопку, код которой вы видите. После этого определяется функция-обработчик которая выполнится при щелчке по добавленной кнопке. Думаю такая методика использования не вызовет затруднений.
А вот второй, альтернативный вариант манипуляций с элементами на панелях, иллюстрируется на примере нижней панели. Это следующие строки кода

... loadComplete: function() { var udata = $('#table').jqGrid('getUserData'); $('#tb_table').css('text-align','right').html(udata.msg+' '+udata.sum_regions_numbers+' '+udata.button); } ... $('#show_sum').live('click',function(){ var val = $(this).val(); alert('Обратите внимание, с сервера мы получили кнопку с суммой '+val+', а обработчик назначили уже на странице'); }); ...

Работает это следующим образом. После окончания загрузки данных возникает событие loadComplete: и вызывается функция. Эта функция (var udata = $(‘#table’).jqGrid(‘getUserData’); ) получает пользовательские данные из ответа сервера, об этом немного ниже, в виде JSON объекта в данном случае и выводит эти данные на нижнюю панель ($(‘#tb_table’)) в виде HTML выравнивая по правому краю (css(‘text-align’,'right’)). После чего выполняется объявление обработчика используя метод live.
Ну откуда же берутся эти пользовательские данные? С сервера как и все остальные! Вот например как сделал я

$userdata = $_GET['userdata']; // Выполним запрос, который вернет суммарное кол-во записей в таблице $result = mysql_query("SELECT COUNT(*)AS count, SUM(region_code) AS sum FROM cities"); if($userdata){ $data['userdata']['msg'] = 'Сумма всех чисел в столбце "region_code" равна '; $data['userdata']['sum_regions_numbers'] = ''. $row['sum'].''; $data['userdata']['button'] = ''; } // Строки данных для таблицы $i = 0; while($row = mysql_fetch_assoc($result)) { $data['rows'][$i]['id'] = $row[id]; $data['rows'][$i]['cell'][] = $row[country_code]; } echo json_encode($data);

Итак я запрашиваю серверный скрипт (url:’p2e1.php?userdata=true’), который выполняет запрос. После выполнения запроса, вместе с суммарным кол-вом записей получаем сумму всех значений полей region_code. Далее полученные данные помещаем в массив $data и кодируем в формат JSON.
IV. Управление столбцами данных
1) Изменение размера и положения столбцов
На самом деле никаких манипуляций для реализации этих возможностей таблицы делать не придется. Возможно вы заметили что в листинге предыдущего примера есть не рассмотренное свойство sortable: true и если схватить за заголовок любого из столбцов, то можно drag’n'drop’ом переместить его на место другого столбца. Определение этого свойства как true как раз и включает возможность перетаскивать столбцы. Но перед использованием этой опции плагина убедитесь:

Что вы послушали мой совет в первой части и при скачивании архива с прагином в Download Builder вы выставили все галки в том числе jQuiery UI addons.

Что вы подключили к странице jQueryUI,а именно виджет sortable.

При этом можно изменять ширину любых столбцов, в colModel-опциях которых не определено свойство resizable: false как столбец «Широта» в ДЕМО2.7, при условии что вы скачали jqGrid с опцией jQuiery UI addons.
2) Скрываем не нужные или отображаем нужные столбцы данных
Начнем обсуждение с ДЕМО2.8.

Первое что бросается в глаза так это то, что не все столбцы показаны, хотя все объявлены. Эта опция будет полезна если у вас имеется очень много колонок, при этом обычно не все они нужны, но могут понадобится при более детальном рассмотрении каких-то строк. Сделать столбец не видимым при инициализации таблицы можно указав в colModel колонки свойство hidden: true. Но спрятанные колонки нужно как-то показывать при необходимости. Для таких целей можно воспользоваться 2 способами.

Использовать метод setColumns, я предпочитаю этот метод ввиду его простоты, не часто нужно управлять столбцами, но если нужно то этот метод самое оно.

Использовать метод-плагин columnChooser – этот подходя для истинных гурманов эстетов, очень эффектен если подключить соответствующие файлы. Для начала скачиваем плагин UI.MultiSelect и подключаем файлы ui.multiselect.css и ui.multiselect.js как в демо. И снова напомню что для этого метода jqGrid должна быть с модулями jQuiery UI addons.

Послесловие
В данной статье мы рассмотрели очень много вспомогательных возможностей плагина-таблицы jqGrid, при этом мы пересекли черту «начального использования» таблицы, от всей души поздравляю! Мы хорошо потрудились и дальше нас ждет еще больше интересного, а именно:

jqGrid и «деревья»

jqGrid и MySQL деревья

jqGrid и статические деревья

Связывание данных в jqGrid

Простая подтаблица (subgrid)

jqGrid как subgrid

Ведущая и ведомая jqGrid

Перемещение строк данных между таблицами

…

jqGrid Часть I: Знакомство

TRAHOMOTO — Mon, 25 Jan 2010 18:54:10 +0000

- Не робейте -, сказала Черная Королева, – это всего-навсего баранья нога, ни больше ни меньше.
Она вам понравится, уверяю вас.
Познакомьтесь. Алиса, это Баранья Нога.
Баранья Нога, это Алиса.

Предисловие

Весь цикл статей направлен в первую очередь на начинающих разработчиков, которые постигают все прелести jQuery. Которые имеют базовые знания и понимания работы с этой библиотекой. Для разработчиков, которые впервые слышат слово jQuery я бы посоветовал цикл видео уроков Евгений Попова (Уроки 1-4 и Уроки 5-6) или книгу Геннадия Самкова jQuery. Сборник рецептов.

Во всех статьях, я постараюсь максимально подробно охватить материал, чтобы исключить появление примитивных вопросов. Также хочется сразу предупредить, я не буду учить вас программированию на PHP, этот материал как и весь ресурс посвящен в первую очередь jQuery и технологиям AJAX. Поэтому пожалйста не задавайте вопросы «как мне защититься от хакеров?», «как мне сделать авторизацию?» и т.п., на эту тему вы всегда сможете найти массу материала на дружественных сайтах.

Введение

Любой набор данных можно представить в виде двумерного массива – таблицы. Я считаю таблицу одним из фундаментальных элементов представления информации. Благодаря такой структуре организации человек может увидеть, оценить и легко манипулировать данными в такой форме.

В данном цикле статей я постараюсь познакомить вас и вместе с вами сам постигнуть все прелести замечательнейшего плагина для jQuery – jqGrid. Чтобы дать вам почувствовать этого «монстра», да-да именно «монстра», я приведу ссылку на демо-галерею сайта разработчика. Рекомендую посмотреть все примеры работы с таблицей.

Лично я, когда увидел «это» был шокирован и решил разобрать этот плагин. Но сразу же был разочарован, он не заработал! А перепроверив все еще раз я понял, что проблема не в плагине, а во мне. Вот еще одна причина, по которой я сел за этот цикл. Далее меня настигло еще одно разочарование, скрипт вызывал ошибку в IE и отказывался работать. Это было связанно с багом в коде плагина, которую устранили к версии 3.6.1 (На момент написания статьи, последняя версия была 3.6.2). Таким образом я «вляпался» в этот плагин. Уверен вы устали от моей пустой болтовни и следует перейти к делу.

I. Подготовка к установке

Перед началом любых работ нам необходимо заготовить «инструменты» и «материалы».
Инструменты (которые использую я)

Apache/2.2.9

PHP/5.2.6

MySQL-server/5.0.51a-24

Вобщем все стандартные пакеты в репозитории Debian. Если вы предпочитаете Windows, то я могу посоветовать вам Denwer
Материалы

jQuery – скачать с официального сайта или подключить по ссылке Google http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

jQueryUI CSS Framework (проще говоря тема для jQueryUI) – выбирайте и скачивате на официальном сайте

jqGrid Plugin – скачивайте с официального сайта. ВАЖНО! Выберите все модули, т.к. мы пока разбираемся и будем тестировать все возможности jqGrid! В дальнейшей работе, вы можете выбирать только те модули которые вам необходимы.

II. Документ, в котором будет использоваться jqGrid
Аннотация:

Весь материал, который начинается с этого момента я буду осваивать заново, поэтому все ответы на вопросы я буду искать вмести с вами.

Мы будем работать с кириллицей в кодировке UTF-8. Но я дам некоторые рекомендации при использовании плагина с кодировкой Windows-1251(CP1251) .

1) Html – разметка
Итак создадим документ с разметкой следующего вида:

Осваиваем jqGrid с Linkexchanger

Как видите самый незаурядный код чистой страницы, где
это и есть таблица которую вы видели на демо, а
– это элемент таблицы, «статус бар» (status bar), о нем поговорим позже. Здесь следует сказать, что в качестве селектора таблицы лучше использовать именно атрибут ID, почему? Ответ на этот вопрос будет дан по мере изучения плагина.

2) Html + CSS + JS
Далее переходим к подключаем необходимые стили и скрипты. Для начала создадим на сервере, в рабочем каталоге следующую структуру.

css/ – в этом каталоге будут все *.css файлы и прочие файлы относящиеся к визуальному оформлению страницы.

js/ – в этом каталоге будут все *.js файлы

Теперь по каждому каталогу подробнее:

css – в него следует положить
«jqueryUI Theme» – каталог с темой оформления jQueryUI (например flick)

ui.jqgrid.css – дополнительные стили jqGrid (находятся в скачанном в п.I архиве css/ui.jqgrid.css)

js – в него следует положить
jQuery - библиотеку

Каталог i18n – это каталог с локализациями плагина, проще говоря с «языками» (находятся в скачанном в п.I архиве js/i18n) . На этом этапе я остановлюсь подробнее, потому что тут дам обещанный совет по использованию плагина с кирилице кодировки CP1251. Если вы планируете использовать плагин в таких условиях, то вам необходимо в каталоге i18n найти и переконвертировать кодировку файла grid.locale-ru.js из UTF-8 в CP1251. Рассказ о том как это сделать выходит за рамки данной статьи. Также вы можете не загружать все языки, а выбрать только тот, который вам необходим.

jquery.jqGrid.min.js – собственно сам плагин.

Теперь следует перепроверить всю структуру каталога еще раз. Именно на этом этапе я допустил первую ошибку, упоминавшуюся во введении.

/css/

flick/

images/

…

jquery-ui-1.7.2.custom.css

ui.jqgrid.css

/js/

i18n/

grid.locale-ru.js

…

jquery-1.4.min.js

jquery.jqGrid.min.js

Далее необходимо подключить всю эту кухню

Осваиваем jqGrid с Linkexchanger

Как видите в разметке есть еще дополнительный стиль. Этот стиль задает базовые параметры для отступов и самое главное размер шрифта! Если этого не сделать, то при использовании jQueryUI CSS Framework размер шрифта будет «не маленьким» и при этом различным в различных браузерах.

3) MySQL
Как бы мы не хотели, но в данной статье мы никак не сможем обойтись без базы данных. Поэтому я подготовил для вас дамп. Вы можете скачать его по этой ссылке или с моего домашнего сервера и экспортировать в любую БД (MySQL) например используя phpMyAdmin, у данного дампа есть один ньюанс. Аименно у некоторых названий городов «искаверкана» кодировка, т.е. проблема в дампе, но никак не в плагине!
В дампе сохранены 10тыс городов с кодами страны, региона, названием на англ., долготой, широтой, и nbit. Фактически это кусок одной таблицы БД распределения IP адресов в интернете. В принципе нам абсолютно не важно, что это будет за БД и для опытов подойдет и такая.

4) PHP
На данном этапе следует создать PHP скрипт, который будет возвращать таблице, запрашиваемую ею информацию. Вот пример такого скрипта для наших нужд

0 && $limit > 0) { $total_pages = ceil($count/$limit); } else { $total_pages = 0; } // Если по каким-то причинам клиент запросил if ($page > $total_pages) $page=$total_pages; // Рассчитываем стартовое значение для LIMIT запроса $start = $limit*$page - $limit; // Зашита от отрицательного значения if($start < 0) $start = 0; // Запрос выборки данных $query = "SELECT id, country_code, region_code, city, latitude, longitude, nbip FROM cities ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit; $result = mysql_query($query); // Начало xml разметки $s = ""; $s .= ""; $s .= "".$page.""; $s .= "".$total_pages.""; $s .= "".$count.""; // Строки данных для таблицы // Не забудьте обернуть //текстовые данные в while($row = mysql_fetch_assoc($result)) { $s .= ""; $s .= ""; $s .= "". $row[region_code].""; $s .= ""; $s .= "". $row[latitude].""; $s .= "". $row[longitude].""; $s .= "". $row[nbip].""; $s .= ""; } $s .= ""; // Перед выводом не забывайте выставить header // с типом контента и кодировкой header("Content-type: text/xml;charset=utf-8"); echo $s; ?>

5) Инициализация плагина
Последний этап подготовительных работ. Здесь мы должны инициализировать плагин JqGrid. Делается это вызовом метода jqGrid(), который в качестве параметра, принимает объект со свойствами таблицы.
Теперь давайте посмотрим на примере разметки, приведенной выше.

Осваиваем jqGrid с Linkexchanger
Cейчас можно взглянуть результаты наших трудов. Вот ссылка на просмотр ДЕМО1 и на архив с ДЕМО1 (тот же архив на зеркале)
III. Разбор параметров
Остался последний пункт сегодняшней статьи в котором я дам пояснения по каждому из используемых в данном примере свойств плагина.

url – этот параметр указывает URL на скрипт

datatype – тип возвращаемых сервером данных. В данном примере, плагин ожидает данные с сервера в виде XML. Забегая наперед скажу что в следующей статье мы рассмотрим ответ сервера в виде JSON и Offline варианты использования плагина.

mtype – определяет каким методом будут переданы данные серверу

colNames – массив с заголовками столбцов таблицы

colModel – параметр-массив, каждый элемент которого является объектом свойств столбца с данными

name – «имя колонки», используется внутренними механизмами jqGrid

index – «имя колонки», передается серверу при запросах данных

width – ширина столбца в пикселах

pager – определяет элемент, который будет преобразован в «панель-листалку». Может быть как строкой (‘#le_tablePager’) так и объектом jQuery ($(‘#le_tablePager’)). При этом сами разработчики рекомендуют присваивать этому параметру как раз объект jQuery.

rowNum – определяет количество записей запрашиваемых у сервера и отображаемых за «один раз» (я написал именно так, потому что jqGrid может динамически подгружать строки с данными, что будет рассмотрено в последующих статьях) по умолчанию.

rowList - параметр-массив. На основе этого параметра строится выпадающий список, позволяющий изменять кол-во записей выводимых за «один раз»

sortname – определяет index(столбец) по которому будут отсортированы записи

sortorder – определяет направление сортировки. asc – по возрастанию, desc – по убыванию.

Говоря о параметрах (options) следует сказать, что это лишь крохотная их часть. Эти параметры обеспечивают только базовую функциональность таблице. Множество других параметров мы с вами рассмотрим в последующих статьях, а пока поэкспериментируйте с теми что использованы в этом примере.
IV. Содержание следующей статьи

Другие способы загрузки данных

В виде JSON объекта

В виде массива

Конвертирование простой таблицы в jqGrid

Форматирование данных

Встроенные функции форматирования

Пользовательские функции форматирования

Дополнительные панели и панели инструментов

Панель-листалка

Панели инструментов

Пользовательская панель

Управление столбцами данных

Выводы
В данной статье мы познакомились с плагином jqGrid, запустили его в базовой функциональности и создали полигон для будущих примеров.
В ходе работы мы поняли принцип работы плагина. Фактически сам плагин это интерфейс пользователя, который отправляет AJAX запросы серверу и получает от него ответ. Таблица отправляет все необходимые параметры, для выборки данных на стороне сервера, в виде GET запроса, а сервер возвращает в виде набора строк в XML-разметке.
Пожалуйста оставляйте только конструктивные комментария и пожелания, а все вопросы задавайте на форуме!

JavaScript мастер-классы

Gennady — Mon, 25 Jan 2010 06:34:55 +0000

Недавно узнал, что 20-21 февраля в Москве и 27-28 февраля в Санкт-Петербурге пройдут мастер-классы по Javascript, которые будет вести Илья Кантор – создатель сайтов algolist.manual.ru и javascript.ru.

Это мой уважаемый коллега, человек с большим опытом разработки сложных приложений, в прошлом один из разработчиков javascript-фреймворка Dojo Toolkit.

» Профессиональное javascript-программирование
» Сложный AJAX и COMET: тонкости Web 2.0
» Мастер-класс по клиентской оптимизации
» Секреты jQuery

Такие мастер-классы помогут узнать много нового, понять уровень своих знаний, получить новые идеи.

И еще, очень интересно! Принять участие в мастер-классе «Секреты jQuery» можно будет в режиме on-line.

Исходное объявление на javascript.ru »

Для понимания материала необходимо знать javascript на минимальном уровне, писать простые скрипты. Содержание мастер-классов построено так, чтобы максимально глубоко раскрыть темы за короткий срок.

Теперь подробнее о содержании мастер-классов.

«Профессиональное javascript-программирование»

- Javascript, browser tips & tricks.
- Фишки DOM, функции/замыкания, ООП – понятно и в деталях.
- Малоизвестные возможности javascript и браузеров.
- Javascript-фреймворки. Сравнение современных возможностей. jQuery в деталях.
- Полезный инструментарий, который сделает вашу разработку быстрее и качественнее. Гораздо больше, чем Firebug.
- Обмен информацией между окнами с разных доменов
- HTML5: что уже есть, а что нас ждет уже скоро.

Этот мастер класс – отнюдь не об основах javascript, здесь присутствует много информации для профессионалов.
Москва: суббота, 20 февраля, 11.00
Санкт-Петербург: суббота, 27 февраля, 11.00
Продолжительность – 4 часа.

«Клиентская оптимизация»

- Способы и принципы сжатия javascript, что делать, чтобы код сжимался эффективнее.
- Идеальное кеширование. Скрипты и серверная часть.
- Эффективная оптимизация javascript. Подходы, цифры, рецепты.
- Основные приемы оптимизации jQuery.
- Ускорение загрузки страницы через HTTP pipelining.
- Оптимизация с Google Gears и HTML5.
- Google Closure Compiler в деталях
- Удобные инструменты для оптимизации и профайлинга.

Про то, как ускорить страницу, почти ничего не делая, и как серьезно ускорить страницу и сайт, если что-то сделать.
Москва: воскресенье, 21 февраля, 11.00
Санкт-Петербург: воскресенье, 28 февраля, 11.00
Продолжительность – 4 часа.

«Сложный AJAX и COMET: тонкости Web 2.0″

- Асинхронная подгрузка событий с сервера (COMET) – различные варианты, сравнение и примеры реализации.
- Кнопки back-forward, закладки и история с AJAX.
- Cпособы написания чата/оповещающего демона, аспекты производительности и решения.
- Кросс-доменные ограничения, способы их преодоления.
- Асинхронный try..catch. Удобная работа с асинхронностью.
- Инструменты для разработки и отладки сложных AJAX-приложений.
- Специализированный COMET-сервер, установка, расширение, интеграция. Поднимем COMET прямо на мастер-классе.

Мастер-класс сделает современные подходы простыми и понятными для вас, позволит улучшить те приложения, которые есть сейчас, и перейти к качественно новой разработке в будущем.
Москва: суббота, 20 февраля, 16.00
Санкт-Петербург: суббота, 27 февраля, 16.00
Продолжительность – 4 часа.

«Секреты jQuery»

1. Как работает поисковой движок jQuery $(‘…’).
- Внутреннее устройство. Алгоритм поиска. No magic.
- Почему некоторые очевидные запросы тормозят, и как их ускорять.
- Расширение поискового движка, добавление своих фильтров.
2. Система событий в jQuery.
- Внутреннее устройство.
- Слабо- и недокументированные фичи, отсутствующие в обычных javascript-событиях.
- Влияние системы событий на быстродействие и DOM-манипуляции. Что тормозит и почему.
- Обход утечек памяти.
3. Фишки AJAX.
- Особенные фичи AJAX в jQuery, которых нет в других библиотеках и полезные приемы работы с ними.
4. $.изнутри.
- Внутреннее устройство функции $. Что она делает быстро, а что – нет.
- Создание плагинов. Внутренний механизм работы $.fn.plugin.
5. jQuery UI.
- Обзор и устройство jQuery UI.
- Написание собственных виджетов. Объявление, вызов методов и т.п. Примеры.
- Приемы для более удобной работы с виджетами.
6. Профайлинг jQuery-приложения
- Как из каши $(вызовов) получить читаемый профиль.
7. Дополнительно.
- Общий обзор библиотеки jQuery, ее сильных и слабых мест. Сравнение с другими фреймворками. Новое в jQuery 1.4.

Мастер-класс посвящен слабо документированным особенностям и устройству фреймворка jQuery. Это не вводный курс. Знакомство и опыт работы с фреймворком jQuery – обязательны.
Москва: воскресенье, 21 февраля, 16.00
Санкт-Петербург: воскресенье, 28 февраля, 16.00
Продолжительность – 3 часа.
On-line: суббота, 27 февраля, 20.00-21.50 и воскресенье, 28 февраля, 20.00-21.50

Дополнительная информация, запись на мастер-классы »

jQuery. Сборник рецептов

Gennady — Fri, 22 Jan 2010 09:51:08 +0000

Несколько дней назад в интернет-магазинах появилась в продаже книга «jQuery. Сборник рецептов». Книга вышла в издательстве «БХВ-Петербург». Написана она мной – автором этого блога.

Геннадий Самков

jQuery. Сборник рецептов (+ CD-ROM)

Издательство: БХВ-Петербург, 2010 г.

Мягкая обложка, 410 стр.

ISBN 978-5-9775-0495-9

Тираж: 1500 экз.

Формат: 70×100/16

Аннотация:
Книга является сборником решений наиболее часто встречающихся задач при веб-программировании пользовательских интерфейсов с использованием библиотеки jQuery. Рассмотрены практически все методы и вспомогательные функции jQuery, в том числе обеспечивающие взаимодействие jQuery и AJAX. Подробно рассказано о надстройке UI jQuery и приведены описания всех настроек для виджетов, входящих в ее состав, что позволяет использовать книгу в качестве справочника. Приведено большое количество примеров использования наиболее популярных плагинов для jQuery – создание графиков и диаграмм, фотогалерей, навигационных меню, всплывающих подсказок, работа с веб-формами, таймерами и cookies, обработка табличных данных. Компакт-диск содержит примеры, разобранные в книге, файлы библиотеки jQuery версий 1.2.6 и 1.3.2, файлы надстройки UI jQuery, а также файлы рассмотренных в книге расширений сторонних разработчиков.

От себя могу добавить, что книга написана в таком же духе, как и предыдущая: «AJAX. Программирование для Интернета«, т.е. примеры, примеры и еще раз примеры плюс подробные разъяснения….

Полное содержание:

Введение 1

Структура книги 1

Как работать с книгой 2

Источники информации 3

Благодарности 4

ЧАСТЬ I. МЕТОДЫ БИБЛИОТЕКИ JQUERY
5

Глава 1. Выбор элементов
7

1.1. Базовые правила 7

1.2. Выбор элементов с учетом иерархии 14

1.3. Основные фильтры 18

1.4. Фильтрация по содержимому 24

1.5. Фильтры видимых и невидимых элементов 28

1.6. Фильтры атрибутов 29

1.7. Фильтры элементов форм 35

1.8. Фильтры состояния элементов форм 37

1.9. Фильтры элементов-потомков 42

Глава 2. Атрибуты элементов
48

2.1. Управление атрибутами элементов 48

2.2. Работа с атрибутом class 53

2.3. Работа с HTML и текстом 54

2.4. Работа с атрибутом value 57

Глава 3. Визуальные эффекты
64

3.1. Как показывать и скрывать элементы 64

3.2. Эффекты «скольжения» и «затухания» 67

3.3. Создание анимации 71

3.4. Эффекты UI jQuery 76

Глава 4. Работа с CSS-свойствами
81

4.1. Как получать и устанавливать значения CSS-свойств элементов 81

4.2. Ширина и высота элементов 85

4.3. Позиционирование элементов 88

Глава 5. Некоторые методы ядра библиотеки jQuery
92

5.1. Примеры работы с объектом jQuery 92

5.2. Сохранение и извлечение данных 97

Глава 6. Манипуляции над элементами
101

6.1. Изменение содержимого элементов 101

6.2. Как вставлять элементы в DOM 103

6.3. Замена, удаление и копирование элементов 113

Глава 7. Перемещение по элементам
120

7.1. Поиск нужных элементов в DOM 120

7.2. Фильтрация элементов набора 131

7.3. Перемещение по цепочке вызовов 138

Глава 8. События и их обработка
142

8.1. Готовность документа 142

8.2. Назначение, удаление и вызов событий 144

8.3. Взаимодействие с элементами 152

8.4. События 155

Глава 9. Взаимодействие jQuery и AJAX
161

9.1. Самое простое 161

9.2. GET- и POST-запросы 166

9.3. Вспомогательная функция $.ajax(options) 174

9.4. Для чего нужна функция $.ajaxSetup(options) 180

9.5. События AJAX 183

Глава 10. Утилиты jQuery
190

10.1. Некоторые операции с массивами и объектами в jQuery 190

ЧАСТЬ II. РАСШИРЕНИЯ ДЛЯ БИБЛИОТЕКИ JQUERY
201

Глава 11. Меню для веб-сайта
203

11.1. Плагин jQuery Multi Level Menu 203

11.2. Плагин jQuery Drop Line Menu 207

11.3. Плагин jQuery TreeView 210

11.4. Делаем меню похожее на Accordion 216

Глава 12. Работа с таблицами
219

12.1. Плагин jQuery DataTables 219

Глава 13. Графики и диаграммы
229

13.1. Плагин jqPlot 229

Глава 14. AJAX-формы
242

14.1. Плагин jQuery Autocomplete 242

14.2. Плагин jQuery Form 252

14.3. Плагин jQuery Validate 257

14.4. Плагин jQuery Uploadify 264

Глава 15. Фотогалереи для сайта
274

15.1. Фотогалерея FancyBox 274

15.2. Простая фотогалерея 282

Глава 16. Несколько полезных плагинов
286

16.1. jQuery Cookie 286

16.2. jQuery Corner 288

16.3. jQuery Timers 293

16.4. jQuery Cluetip 297

Глава 17. UI jQuery — виджеты
303

17.1. Виджет Accordion 303

17.2. Виджет Datepicker 314

17.3. Виджет Dialog 326

17.4. Виджет Progressbar 334

17.5. Виджет Slider 337

17.6. Виджет Tabs 343

Глава 18. UI jQuery — взаимодействие с элементами страницы
354

18.1. Draggable — перемещение элементов 354

18.2. Droppable — «сброс» элементов 364

18.3. Resizable — изменение размеров элементов 371

18.4. Selectable — выбор элементов 377

18.5. Sortable — сортировка элементов 385

Литература 397

Приложение. Описание компакт-диска 398

Предметный указатель 400

Оглавление

jQuery 1.4

Gennady — Thu, 14 Jan 2010 20:46:02 +0000

Сегодня (по Москве почти в полночь) официально объявлено о выпуске jQuery версии 1.4. Выход новой версии, как и в прошлом году, приурочен к дню рождения библиотеки, которой исполнилось уже 4 года. Собственно, интересующиеся этой тематикой уже могли ознакомиться с релизами jQuery 1.4 Alpha 1 от 4 декабря 2009 года и jQuery 1.4 Alpha 2 от 18 декабря 2009 года. А 12 января появился релиз-кандидат jQuery 1.4rc1. Подробное знакомство с новшествами еще впереди, но я не мог не дать краткий обзор изменений и новых возможностей, которые появились в очередной версии. Начнем знакомство?

Метод .addClass(className) теперь может принимать в качестве аргумента не только имя класса (или классов), но и функцию .addClass(function), которая должна возвратить один или более имен классов, которые должны быть добавлены элементу. Если имен классов более одного, они должны быть разделены пробелами. На примере:

$('ul li:last').addClass(function() { return 'item-' + $(this).index(); });

Аналогичные изменения претерпели методы .removeClass(className) и .toggleClass(className), которые также теперь могут принимать функцию в качестве аргумента.

Похожие изменения внесены в методы .after(content), .before(content), .append(content) и .prepend(content). Все эти методы начиная с версии 1.4 могут принимать в качестве аргумента функцию, которая должна возвращать строку html-кода.

Аналогичным образом дополнены методы .html(htmlString) и .text(textString). Если до версии 1.4 эти методы принимали аргументом соответственно строку html-кода и обычный текст, то теперь аргументом может быть также функция – .html(function) и .text(function). Функции должны возвращать соответственно html-код и текст.

Дополнен метод .val(). Теперь при установке нужного значения можно использовать не только собственно значение, но и функцию, которая должна возвращать требуемое значение.

Дополнен метод .css(). Если раньше для того, чтобы установить значение какого-либо css-свойства мы использовали .css(propertyName, value) или .css(map) для того, чтобы установить значения сразу нескольких css-свойств элемента, то теперь получили возможность использовать во втором аргументе функцию, возвращающую то значение, которое должно быть установлено этому css-свойству .css(propertyName, function).

Чтобы сохранить произвольные данные, связав их с выбранным элементом мы должны были передать методу .data(key, value) соответствующие пары ключ/значение. Теперь аргументом этого метода может быть и непосредственно объект .data(obj). Чтобы получить доступ к сохраненным данным требуется указать .data(key) имя под которым были сохранены эти данные. В дополнение к этому с версии 1.4 можно вызвать метод .data() без аргументов, и в этом случае данные будут возвращены в виде объекта.
Точно также теперь можно поступить и в том случае, если данные, связанные с элементом были сохранены в свойстве data объекта jQuery.

Начиная с версии 1.4 добавлены вспомогательные функции jQuery.isEmptyObject(object) – проверяет, является ли объект пустым (не содержащим свойств)

jQuery.isEmptyObject({}) // вернет true jQuery.isEmptyObject({ foo: "bar" }) // вернет false

и jQuery.isObjectLiteral(object) – проверяет является ли он простым объектом (создан с помощью {} или new Object)

jQuery.isPlainObject({}) // true jQuery.isObjectLiteral("test") // false

Добавлены методы .prevUntil([selector]), .nextUntil([selector]) и .parentsUntil([selector]). Первые два новых метода помогут выбрать все элементы соответственно перед и после, но при этом ДО элемента [selector] указанного в качестве аргумента метода. А метод .parentsUntil([selector]) поможет выбрать всех родителей, но также ДО элемента [selector] указанного в качестве аргумента.

Дополнены методы .wrap(wrappingElement), .wrapAll(wrappingElement) и .wrapInner(wrappingElement). Теперь в качестве аргумента этих методов можно использовать функцию, которая должна возвращать структуру в которую будет обернут каждый выбранный элемент (для wrap), все выбранные элементы (для wrapAll) или внутреннее содержимое выбранного элемента (для wrapInner). Также добавлен новый метод .unwrap(), название которого говорит само за себя – удаляет непосредственных родителей выбранных элементов, оставляя сами элементы без изменений.

Добавлен весьма полезный метод .delay(duration, [queueName]), которые позволяет установить таймер задержки выполнения следующего пункта очереди. На примере:

$('#foo').slideUp(300).delay(800).fadeIn(400);

Здесь метод fadeIn начнет выполняться только через 800 миллисекунд после того, как отработает метод slideUp.

Добавлен метод .detach([selector]), который похож на метод .remove() тем, что также удаляет выбранные элементы из DOM, но, в отличие от .remove() новый метод сохраняет данные, связанные с удаленными элементами, что можно использовать при возврате удаленных элементы обратно в DOM.

Добавлен метод .toArray(), который возвращает в виде массива все DOM-элементы, включенные в набор jQuery. Выполнив

alert($('li').toArray());

увидим что-то вроде

[
,
]

Дополнен метод .replaceWith(newContent) и теперь в качестве аргумента может использоваться функция, которая должна возвращать строку html-кода, которым должен быть заменен выбранный элемент.

Дополнен метод .add(), с помощью которого можно добавлять в существующий набор дополнительные элементы. Если до версии 1.4 в качестве аргумента можно было указать jQuery-селектор, элемент(или элементы) и фрагмент html-кода, то теперь появилась возможность после селектора указать второй аргумент – контекст, в котором будет производится поиск нужного элемента(ов).

Добавлены новые методы .focusin(handler(eventObject)) и .focusout(handler(eventObject)). Методы вызывают обработчики соответственно при получении и потере фокуса выбранным элементом. В качестве аргумента обработчик принимает объект события.

Добавлен метод .has(selector), с помощью которого можно проверить наличие элемента внутри другого элемента. Для разметки

Does the UL contain an LI?

выполним код

$("ul").append('
' + ($("ul").has("li").length ? "Yes" : "No") + '
');

Такой код добавит в список элемент li с текстом Yes.

Дополнен метод .index(element) с помощью которого можно было узнать индекс DOM-элемента в наборе. Теперь может принимать в качестве аргумента селектор jQuery, а также может быть вызван без передачи аргумента. Довольно интересно, чтобы смотреть на примерах.

foo

bar

baz

В качестве аргумента DOM-элемент:

var listItem = document.getElementById('bar'); alert('Index: ' + $('li').index(listItem)); // 1

В качестве аргумента объект jQuery:

var listItem = $('#bar'); alert('Index: ' + $('li').index(listItem)); // 1

И без передачи аргумента:

alert('Index: ' + $('#bar').index(); // 1

т.е. возвращается индекс (считаем от 0) элемента в наборе, в котором присутствуют все сестринские элементы этого уровня.

Дополнен метод .closest(selector), теперь вторым параметром можно передать контекст.

Добавлен новый метод .clearQueue([queueName]), который удаляет из очереди все функции, которые еще не были выполнены. Похож на .stop(true), однако есть отличия.

Дополнен метод .offset(), который позволяет получить координаты выбранного элемента относительно документа. Теперь координаты можно будет устанавливать с помощью передачи этому методу аргумента – .offset(coordinates). Здесь coordinates – объект, содержащий свойства top и left, значениями которых являются числовые значения новых координат. Также в качестве аргумента может выступать функция .offset(coordinates(index,coords)), которая в свою очередь принимает в качестве первого аргумента индекс элемента в наборе, а качестве второго – его новые координаты.

Изменения коснулись и функция jQuery(). Теперь при ее вызове без аргументов будет возвращен пустой набор.

Изменения во вспомогательной функции jQuery.param(obj), которая упорядочивает предоставленный объект или массив, представляя его в форме, пригодной для передачи в URL или Ajax-запросе. Начиная с версии 1.4 можно передавать второй параметр jQuery.param(obj, traditional), где traditional – логическое значение, которое устанавливается в true, если необходимо эмулировать поведение этой функции как в версиях ниже 1.4.

Новая вспомогательная функция jQuery.contains(container, contained), позволяющая проверить существование элемента DOM внутри другого элемента DOM. Здесь container – элемент DOM, который может содержать другой элемент DOM, а contained – элемент DOM, который может находится внутри. На примере:

// true jQuery.contains(document.documentElement, document.body); // false jQuery.contains(document.body, document.documentElement);

Добавлена jQuery.noop() – функция, которая ничего не делает.

Новый метод jQuery.proxy(). Принимает пару аргументов, например так jQuery.proxy(function, scope), где function – функция, область видимости которой будет изменена, а scope – объект в который должна быть установлена область видимости функции. Грандиозно! Еще вариант – jQuery.proxy(scope, name), где scope – то же, а name – имя функции, область видимости которой будет изменена (должно быть свойством объекта ’scope’). На примере:

var obj = { name: "John", test: function() { alert( this.name ); $("#test").unbind("click", obj.test); } }; // 2-й вариант $("#test").click( jQuery.proxy( obj, "test" ) ); // И так тоже работает: // 1-й вариант // $("#test").click( jQuery.proxy( obj.test, obj ) );

Обзор конечно получился краткий, несколько поспешный и насколько я уже понимаю с некоторыми неточностями (не по моей вине ), но для тех, кто хочет сам покопаться и разобраться повнимательнее – новый сайт API jQuery.

P.S. Поздравляю всех с наконец-то окончательно наступившим Новым Годом, jQuery – с четвертым Днем Рождения и выходом очередной версии, а себя – с Днем Рождения своего блога, которому исполнилось два года.

Форуму быть?

Gennady — Mon, 11 Jan 2010 18:20:06 +0000

К началу третьего года существования блога стало окончательно понятно, что его «мощностей» не хватает для удовлетворения растущих потребностей сообщества поклонников jQuery. А посему вопрос встал ребром – быть или не быть форуму?
Вопрос решено вынести на суд сообщества, приведя при этом некоторые аргументы «pro» и «contra» и предоставив возможность решить этот вопрос голосованием.
Итак, аргументы «pro»:
- формат блога неудобен для подробного описания решения проблем, количество комментариев растет с устрашающей скоростью.
- довольно много писем с просьбой сделать наконец-то уже форум.
Однако не менее серьезны аргументы «contra»:
- существование форумов с подобной тематикой. Пример: javascript.ru
- банальная нехватка времени, поскольку кроме собственной работы (семью-то надо кормить) и ведения блога, иногда приходиться еще и спать…

Скажу, что сам склоняюсь к идее создания форума, посвященного исключительно jQuery, но очень хотел бы, чтобы среди читателей блога нашлись люди (знаю, что они есть и их немало), которые были бы не против поучаствовать в администрировании форума (если конечно будет решено его создавать).

Исходя из всего того, что я здесь нагородил призываю не просто голосовать, а (если голосовали «за») еще и активно оставлять в комментариях свои предложения по структуре форума. Да и вообще любые мысли на этот счет весьма приветствуются….

Голосование завершено
Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Галерея LightBox и ее клоны

Gennady — Fri, 27 Nov 2009 06:37:29 +0000

Почему решил написать этот обзор? Во-первых, предыдущая статья про LightBox безнадежно устарела. Во-вторых, мне LightBox нравится. Правда было время, когда разработчики плагина убирали оттуда поддержку ie6, но потом, видимо одумавшись, вернули ее. В общем, всем хорош плагин LightBox, но вот заточен он только под фото. А если приперло вывести видео с YouTube или вообще какой-нибудь контент в iframe? Да, да, знаю, есть галерея FancyBox, сам пользуюсь, но LightBox все равно больше нравится. Поэтому и было решено покопаться среди многочисленных клонов галереи LightBox.

Галерея LightBox

Начинаем, так сказать, с первоисточника и сразу же смотрим демо, замечая при этом нюансы, чтобы потом сравнить с другими галереями.

Ясно, что для использования плагина нужно подключить к веб-странице файл библиотеки jquery-1.3.2.js, файл плагина jquery.lightbox.js и файл стилевого оформления плагина jquery.lightbox.css. Не забудьте, что в папке images полученного архива, хранятся изображения элементов управления, необходимые для работы плагина.

Теперь о том, как собственно организовать галерею. Естественно понадобятся изображения из которых будет состоять галерея – миниатюры и соответствующие им полноразмерные изображения. Общая конструкция такая:

Картинка-миниатюра заключена в тэг а, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – lightbox. Такого кода достаточно, чтобы при клике по миниатюре в отдельном слое открылось большое (именно большое, потому что по умолчанию оно масштабируется, если не помещается в области просмотра) изображение. Текст, содержащийся в атрибуте title тэга a станет комментарием к открывшемуся изображению.

В рассмотренном примере функциональность плагина применена к отдельному изображению, а нам нужно сделать тоже самое для группы. Смотрим следующую разметку:

К ключевому слову lightbox просто добавили произвольный суффикс, в данном случае -tour. Добавляйте какое-то количество таких конструкций в свой код, назначайте им одинаковый суффикс и плагин автоматически объединит изображения в группы. Естественно, в этом случае, кроме комментариев, которые также будут создаваться из содержимого атрибута title, появятся элементы управления для перемещения по галерее.

Если по каким-то причинам Вам нежелательно использовать атрибут rel, можно обойтись и без него. Создать галерею можно используя простой jQuery-код.

$(function(){ $('a.gallery').lightbox(); });

Если этот код использовать с приведенной ниже разметкой, то все элементы а, имеющие класс gallery, получат функциональность плагина, и атрибут rel тут не потребуется.

Плагин LightBox имеет некоторое количество пользовательских настроек, с помощью которых можно переопределить поведение по умолчанию. Обычно jQuery-плагины принимают такие настройки в виде объекта, передаваемого методу в качестве аргумента. Здесь дело обстоит несколько иначе – для настройки вызывается отдельный метод. Ниже приведен пример кода, который создаст галерею из изображений, заключенных в тэг а с классом gallery и передаст плагину некоторые настройки.

$(function(){ $("a.gallery").lightbox(); $.Lightbox.construct({ text: { image: "Фото", of: "из" }, download_link: false, opacity: 0.5, show_linkback: false }); });

Кстати, помимо использования $.Lightbox.construct(); есть другая возможность передать настройки – в строке запроса. Примерно так:

ПРИМЕЧАНИЕ: В плагине подразумевается поддержка IE6 и она включена по умолчанию. Для IE6 передача параметров возможна только в строке запроса (остальные браузеры тоже понимают такой способ). Если попытаться использовать $.Lightbox.construct(); то в IE плагин перестает работать. По крайней мере у меня не получилось.

Ну а теперь немного о возможных опциях, которые можно использовать для настройки LightBox.

show_linkback – по умолчанию true, показывает ссылку на страницу плагина на сайте plugins.jquery.com в правом верхнем углу. Передаем false, чтобы скрыть ссылку.
show_helper_text – по умолчанию true, показывает текст (Click to close) в правом верхнем углу и всплывающую подсказку (Hover to interact) при наведении указателя мыши на этот текст. Используем false, чтобы убрать текст (и подсказку естественно тоже).
show_info – по умолчанию ‘auto’, показывает информацию (текст, содержащийся в атрибуте title) под открывшимся изображением только в том случае, если указатель мыши находится над изображением. Чтобы показывать эту информацию независимо от положения указателя мыши используем значение true.
show_extended_info – по умолчанию ‘auto’, показывает дополнительную информацию (Image 1 of nn) при указатель мыши прошел над область, где показывается основная информация (текст, содержащийся в атрибуте title). Чтобы показывать эту информацию независимо от положения указателя мыши используем значение true.
download_link – по умолчанию true, предоставляет возможность открыть полноразмерное изображение в новом окне (вкладке) браузера, воспользовавшись ссылкой, которой является текст комментария к изображению (текст, содержащийся в атрибуте title). Чтобы запретить использование этой возможности, надо передать false.
auto_resize – по умолчанию true, автоматически изменяет размеры картинки, если она слишком большая и не вписывается в область просмотра. Необходимо передать false, чтобы отменить это поведение.
ie6_support – по умолчанию true, включена поддержка IE6. Чтобы отключить ее, надо передать false.
ie6_upgrade – по умолчанию true, показывает сообщение, призывающее пользователей IE6 проапгрейдить свое ПО (у меня почему-то не сработало).
speed – число, определяющее количество миллисекунд, которые отводятся на переход между двумя изображениями. По умолчанию установлено 400.
baseurl – по умолчанию null, но можно указать url для автоматического подключения файлов, которые использует скрипт (стили, картинки).
files – объект, в свойствах которого можно передать местоположение требуемых файлов (используется, если названия файлов менялись). Можно использовать следующие свойства: js.lightbox, js.colorBlend, css.lightbox, images.prev, images.next, images.blank, images.loading.
text – объект, в свойствах которого можно передать текст частей интерфейса. Используется для перевода на нужный язык. Можно использовать следующие свойства: image, of, close, closeInfo, download, help.close, help.interact, about.text, about.title, about.link.
keys – объект, в свойствах которого можно определить «горячие клавиши» для перемещения по галерее вперед и назад, а также для закрытия галереи. Используются свойства close, prev, next.
opacity – прозрачность слоя, который появляется при просмотре галереи между большими изображениями и основным содержимым страницы. Значение может изменяться от 0 до 1. По умолчанию используется значение 0.9.
padding – по умолчанию null, но можно указать число, которое будет определять отступы вокруг просматриваемого изображения.
rel – по умолчанию ‘lightbox’, определяет значение в атрибуте rel тега а (см. пример html-разметки), исходя из которого плагин автоматически формирует галереи. Можно передать строку, в которой определить любое удобное значение.
auto_relify – по умолчанию true, плагин должен автоматически искать и формировать галереи. Чтобы отменить такое поведение следует передать значение false.

Выводы: Плюсы – неплохое оформление, большинство опций действительно полезны. Минусы – сложности с настройкой плагина с учетом поддержки IE6, не все опции удается использовать так, как заявлено разработчиком, не работает ни с каким другим контентом, кроме фото. Имхо, минусов больше, причем перечислены еще не все.

Галерея NFLightBox

По сравнению с обычным LightBox не имеет таких заморочек с настройкой под все основные браузеры, но точно также работает только с фото. Однако имеет возможность автоматической смены изображений – слайдшоу.

Смотрим демо, замечаем отличия от LightBox…

Подключается просто:

В разделе HEAD надо указать пути к файлу стилевого оформления, файлу библиотеки jQuery и файлу плагина. Требования к разметке точно такие же, как и у LightBox.

Создается галерея с помощью следующего jQuery-кода:

$('a').lightBox({ overlayBgColor: '#363', txtImage: 'Фото', txtOf: 'из', txtPrev: ' Назад', txtNext: ' Вперед', keyToClose: 'q', keyToPrev: 'z', keyToNext: 'c' });

Этот плагин тоже имеет приличное количество настроек. Использование некоторых показано в приведенном выше коде. Довольно полезная опция overlayBgColor – позволяет менять цвет промежуточного слоя между просматриваемым изображением и содержимым веб-страницы. В LightBox для этого пришлось бы править css-файл.

Чуть подробнее про опции, которые можно использовать для настройки.

overlayBgColor – по умолчанию #000 (черный), используется для задания цвета промежуточного слоя.
overlayOpacity – по умолчанию 0.8, задает прозрачность промежуточного слоя. Можно использовать значения от 0 до 1.
imageLoading, imageBtnPrev, imageBtnNext, imageBtnClose, imageBlank, imageBtnBottomPrev, imageBtnBottomNext, imageBtnPlay, imageBtnStop – во всех этих опциях можно передать строку, содержащую путь к файлу изображения соответствующего элемента управления.
containerBorderSize – по умолчанию 10, определяет ширину рамки вокруг просматриваемого изображения.
containerResizeSpeed – по умолчанию 500, время в миллисекундах, за которое будет изменяться размеры области просмотра изображения при переходе от одного изображения к другому.
txtImage, txtOf, txtPrev, txtNext – вполне понятные опции. Например задав значения txtImage: ‘Фото’ и txtOf:’из’ Вы уже будете видеть не Image 1 of 8, а Фото 1 из 8.
keyToClose, keyToPrev, keyToNext – с помощью этих опций можно задать «горячие» клавиши. Например keyToClose:’q’ – при нажатии клавиши ‘q’ просмотр будет прекращен.
slideShowTimer – по умолчанию 5000, т.е.если Вы запустите слайдшоу, то изображения будут меняться каждые 5 секунд.

Выводы: Плюсы – неплохое оформление, большинство опций действительно полезны, есть автоматическая смена фото при просмотре, нет сложностей с настройкой. Минусы – png-файлы для элементов управления не очень здорово выглядят в IE6 (и к сожалению jquery.pngfix.js тут не поможет), не работает ни с каким другим контентом, кроме фото. Имхо, лучше, чем стандартный LightBox, но все же не то, что хочется.

Галерея PrettyPhoto

Так и хочется написать – PrettyPhoto мой выбор! Во-первых, этот плагин позволяет работать не только с фото. В области просмотра можно выводить видео с YouTube, ролики в формате .mov (Apple QuickTime), содержимое во flash-формате и наконец вообще любой контент через iframe. Во-вторых, этот плагин имеет свой API, чего нет в рассмотренных ранее плагинах.
Смотрим демо, отмечаем отличия от других галерей и начинаем разговор про PrettyPhoto.

Сначала необходимо подключить к веб-страницы файл библиотеки jquery-1.3.2.js, файл плагина jquery.prettyPhoto.js и файл стилевого оформления плагина prettyPhoto.css.

Организация галереи (или галерей) почти не отличается от того, как это делается в LightBox.

Картинка-миниатюра заключена в тэг а, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – prettyPhoto. Чтобы создать несколько различных галерей на обной веб-странице, в атрибуте rel следует указать например – prettyPhoto[gallery_easy] для условной первой галереи, prettyPhoto[other_gallery] – для другой и так далее…

С помощью jQuery-кода создаем галерею. Используем настройки, установленные по умолчанию.

$(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });

Опции, которые можно использовать для настройки prettyPhoto:
animationSpeed – по умолчанию ‘normal’. Другие возможные значения – ‘fast’ и ’slow’. Скорость анимации изменения размеров окна просмотра при переходе от одного изображения к другому.
padding – по умолчанию 40. Число, опредяляющее отступы вокруг изображения.
opacity – по умолчанию 0.80, прозрачность промежуточного слоя. Изменяется от 0 до 1.
showTitle – по умолчанию true. Заголовок (содержимое атрибута title тэга а), который отображается в левом верхнем углу над областью просмотра. Чтобы отключить надо использовать значение false.
allowresize – по умолчанию true. По умолчанию полноразмерное изображение масштабируется, если ему не хватает места для отображения в полном размере. Можно отменить это поведение, передав false.
counter_separator_label – по умолчанию ‘/’. Разделитель в счетчика изображений галереи.
theme – по умолчанию ‘light_rounded’. Да! Плагин поддерживает несколько тем оформления. Кроме light_rounded возможны также dark_rounded, light_square, dark_square. Вот только для IE6 принудительно используется тема light_square (светлый фон и нескругленные углы).
hideflash – по умолчанию false. Скрывает все flash-объекты на странице при просмотре галереи, чтобы они не отображались поверх. Если этого не требуется, можно установить значение true.
modal – по умолчанию false. Если установить true, будет использоваться модальный режим, т.е. завершить просмотр галереи можно будет только нажатием на картинку ‘close’.

Еще две полезные опции, в которых можно определить callback-функции, вызываемые при наступлении определенного события.
changepicturecallback – функция, определенная в этой опции, будет вызываться каждый раз при смене изображения галереи.
callback – функция, определенная в этой опции, будет вызываться при завершении просмотра.

Плюс ко всем этим полезным опциям, плагин предоставляет четыре метода.

$.prettyPhoto.open(‘path/to/image’,'Title’,'Description’) – метод позволяет открыть нужную галерею. Пример будет чуть позже.
$.prettyPhoto.changePage(‘next’) – с помощью этого метода можно осуществить переход к следующему изображению галереи.
$.prettyPhoto.changePage(‘previous’) – с помощью этого метода можно осуществить переход к предыдущему изображению галереи.
$.prettyPhoto.close() – с помощью этого метода можно закрыть галерею.

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

В общем эта галерея может удовлетворить наверное все потребности веб-мастеров. Кроме одной – слайд-шоу. Чтобы не было обидно, давайте попробуем немного доработать предыдущий пример. Мы дополнительно подключим плагин jquery.timers.js и воспользуемся тем фактом, что в опциях changepicturecallback и callback можно определить функции. В html-разметке добавим select, откуда можно будет выбирать значения задержки при смене изображений. Что из этого получилось, смотрите демо, там же можно посмотреть и исходный код.

В опции changepicturecallback, пользуясь возможностями плагина jQuery Timers, при смене изображений каждый раз запускаем одноразовый таймер со значением, полученным из выбранной опции в селекте. По срабатыванию таймера вызываем метод $.prettyPhoto.changePage(‘next’) заставляя плагин показывать следующее изображение. В опции callback определяем функцию, которая останавливает таймер, если галерея была закрыта и заодно, с помощью alert благодарим за просмотр.

На самом деле такое решение небезгрешно, но зато сделано «на колене в 5 секунд», поэтому кто имеет желание, может в комментариях предлагать свои идеи по этому поводу.

Все примеры, использованные в этой статье, лежат в этом архиве.

Для тех, кто хочет самостоятельно изучить первоисточники, пожалуйста, ссылки: LightBox, NFLightBox, PrettyPhoto.

Выводы: для себя выбрал именно PrettyPhoto…. по крайней мере пока не появилось что-нибудь еще лучше.

jQuery UI – плагин Sortable

Gennady — Fri, 09 Oct 2009 05:07:24 +0000

Плагин Sortable – один из нескольких плагинов, входящих в состав jQuery UI, с помощью которых можно организовать взаимодействие с элементами веб-станиц. Плагин Sortable предоставляет возможность организовать сортировку элементов, перемещая их с помощью указателя мыши.

Читаем, и пробуем проделать все это самостоятельно.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Sortable и видим, что вместе с ним отметились чекбоксы UI Core и Draggable. Работа плагина Sortable зависит от них, поэтому они необходимы.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве:

Здесь мы подключили файл стилей css/sunny/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Хотите использовать Ваше собственное оформление – пожалуйста, но в примере мы используем готовое. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагинов Sortable и Draggable.

Смотрим HTML-разметку. Пусть у нас она будет выглядеть так:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

и следующий javascript-код, который применит к выбранному элементу функциональность плагина Sortable.

$(function(){ $("#sortable").sortable(); });

Открыть пример в новом окне

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

$(function(){ $("#sortable").sortable({ placeholder: "ui-state-highlight", opacity: 0.6 }); });

Открыть пример в новом окне

Опция placeholder передает плагину имя css-класса, который будет применен к той позиции, откуда элемент начал перемещение (или куда он может быть помещен), а опция opacity устанавливает прозрачность элемента во время перемещения. Значения остальных опций передаются плагину подобным образом.

appendTo – по умолчанию эта опция имеет значение ‘parent’. В ней можно передать селектор jQuery или элемент, который будет использован в качестве контейнера для объекта, представляющего сортируемый элемент во время его перемещения.
axis – в качестве значения используется строка. Доступные значения ‘x’ или ‘y’. По умолчанию установлено false. Если определить эту опцию, сортируемые элементы смогут перемещаться только по вертикали или горизонтали.
cancel – в качестве значения используется селектор jQuery. Предотвращает сортировку, если она начинается на элементе, указанном в это опции. По умолчанию используется значение ‘:input,button’.
connectWith – в качестве значения принимает селектор jQuery, где можно указать другой сортируемый список, в который можно будет перемещать сортируемые элементы, таким образом, что они станут частью другого сортируемого списка.
containment – ограничивает перемещение внутри определенного элемента или области. В качестве значения может принимать селектор jQuery, элемент или строку. Примеры возможных значений: ‘parent’, ‘document’, ‘window’. По умолчанию – false.
cursor – строка, определяющая вид курсора в процессе перемещения элемента. По умолчанию установлено значение ‘auto’.
cursorAt – объект, который определяет положение указателя мыши во время перемещения элемента. Для задания координат используется комбинация одного или двух свойств из четырех возможных – ‘top’, ‘right’, ‘bottom’ и ‘left’. Например: {top: 10, left: 20} или {bottom: 5}. По умолчанию – false.
delay – число, указанное в этой опции, определяет отсрочку начала перемещения элемента. Указывается в миллисекундах. Опция помогает предотвратить нежелательное перемещение элемента во время случайного щелчка мышью. По умолчанию используется значение 0.
distance – число в пикселах, определяющее расстояние, которое должен пройти указатель мыши (с одновременно нажатой левой клавишей), чтобы начался процесс перемещения элемента. Опция помогает предотвратить нежелательное перемещение элемента во время случайного щелчка мышью. По умолчанию используется значение 1.
dropOnEmpty – по умолчанию используется значение true. В этом случае, если один из связанных списков пустой, в него можно перемещать элементы из другого списка. Если установить значение false, эта возможность будет запрещена.
grid – по умолчанию – false. Значением может быть массив из двух чисел, определяющий шаг сетки, по которой будет перемещаться сортируемый элемент. Например: grid: [20,20]
handle – по умолчанию установлено значение false. В качестве значения можно указать селектор jQuery или элемент. В этом случае процесс сортировки можно будет начать только в том случае, если левая клавиша мыши нажата в момент нахождения указателя мыши над элементом, определенным в этой опции.
helper – по умолчанию используется значение ‘original’. В этом случае, при сортировке, перемещаемый элемент представлен самим элементом. Другое возможное значение ‘clone’. В этом случае элемент при перемещении представлен своей копией.
items – в качестве значения используется селектор jQuery. По умолчанию установлено значение ‘> *’. Опция определяет, какие элементы, являющиеся элементами-потомками того элемента, с которым связана функциональность плагина, могут быть сортируемыми.
opacity – значение опции может изменяться от 0.01 до 1 и определяет прозрачность перемещаемого элемента. По умолчанию – false.
placeholder – имя css-класса, который будет применен к той позиции, откуда элемент начал перемещение. Если значение опции не определено «пустая» позиция никак не оформляется.
revert – по умолчанию используется значение false. Если использовать значение true, то при перемещении элемента, после того, как будет отпущена клавиша мыши, элемент переместится на свою новую позицию с использованием плавного анимационного эффекта.
scroll – по умолчанию установлено значение true – при перемещении элемента к краю области просмотра, она автоматически прокручивается бесконечно. Если установить значение false, эта возможность будет запрещена.
scrollSensitivity – число, определяющее расстояние в пикселах от края области просмотра, после которого она начинает прокручиваться. Расстояние определяется относительно указателя мыши, а не перемещаемого элемента. По умолчанию установлено значение 20.
scrollSpeed – число, определяющее скорость, с которой прокручивается область просмотра при приближении указателя мыши к ее краю на расстояние определенное в опции scrollSensitivity. По умолчанию установлено значение 20.
tolerance – по умолчанию эта опция имеет значение ‘intersect’. При этом элемент, перемещаемый во время сортировки должен перекрыть любой другой сортируемый элемент как минимум на 50%, чтобы тот «освободил» занимаемое место. Другое возможное значение – ‘pointer’. При этом над сортируемым элементом должен оказаться только указатель мыши.
zIndex – число, которое определяет значение css-свойства z-index для элемента в момент его сортировки.

Настало время познакомиться с событиями, на которые умеет реагировать плагин Sortable. Пример использования одного из возможных событий плагина приведен в следующем примере:

$(function(){ $("#sortable").sortable({ placeholder: "ui-state-highlight", opacity: 0.6, stop: function(event, ui) { alert(event.type); } }); });

Открыть пример в новом окне

Здесь мы использовали только опцию stop, в которой определили функцию, которая будет вызвана в момент окончания сортировки. Функция может принимать два аргумента. Первый аргумент – объект события, второй – специальный объект ui, в свойствах которого можно обнаружить разнообразную полезную информацию. Но в приведенном примере мы используем только свойство type объекта события, чтобы вывести в окне предупреждения название события, вызвавшего нашу функцию.

А вот пример того, как можно использовать специальный объект ui:

$(function(){ $("#sortable").sortable({ placeholder: "ui-state-highlight", opacity: 0.6, helper: "clone", change: function(event, ui) { ui.helper.css("color","#f00"); } }); });

Открыть пример в новом окне

Мы использовали опцию change, чтобы вызвать функцию в момент изменения положения сортируемого элемента. Внутри функции мы обращаемся к одному из свойств объекта ui – к свойству helper. Это свойство является объектом, который представляет перемещаемый элемент во время сортировки. Используя метод css(name,value) мы устанавливаем красный цвет шрифта на перемещаемом элементе. Но, как только этот элемент займет свое новое место в списке, цвет шрифта вернется к исходному значению. Догадались почему? Если нет, то обратите внимание на опцию helper. Установив значение clone в этой опции, мы использовали во время перемещения не сам исходный объект, а его копию.
Кстати, helper – это не единственное полезное свойство объекта ui, есть и другие:

ui.helper – объект, характеризующий элемент, находящийся в процессе перемещения;
ui.position – объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента;
ui.item – объект, представляющий сортируемый элемент;
ui.placeholder – объект, представляющий место, откуда был перемещен сортируемый элемент (или куда он будет перемещен);
ui.sender – объект, который представляет элемент-контейнер для сортируемых элементов, откуда сортируемый элемент был перемещен (при использовании связанных списков);

Ниже перечислены опции, связанные с событиями плагина Sortable, их довольно много:
Опция start – событие sortstart наступает в момент начала сортировки.
Опция sort – событие sort наступает постоянно в течение сортировки.
Опция change – событие sortchange наступает во время сортировки, но только в том случае, если изменилось положение сортируемого элемента в объектной модели документа.
Опция beforeStop – событие sortbeforeStop наступает в момент сортировки, перед ее окончанием (когда отпущена левая клавиша мыши).
Опция stop – событие sortstop наступает в момент окончания сортировки.
Опция update – событие sortupdate наступает в момент окончания сортировки, но только в том случае, если порядок сортируемых элементов был изменен.
Опция receive – событие sortreceive наступает, когда связанный сортируемый список принимает элемент из другого списка.
Опция remove – событие sortremove наступает, когда элемент покидает один связанный список, и перемещается в другой.
Опция over – событие sortover наступает, когда сортируемый элемент перемещен в связанный список.
Опция out – событие sortout наступает, когда сортируемый элемент перемещен из связанного списка.
Опция activate – событие sortactivate наступает при использовании связанных списков, для каждого связанного списка при начале процесса сортировки.
Опция deactivate – событие sortdeactivate наступает при использовании связанных списков, для каждого связанного списка при окончании процесса сортировки.

А теперь – методы плагина. С помощью методов можно управлять плагином после инициализации. Сначала добавим кнопочку в HTML-разметку:

и небольшой пример:

$(function(){ $("#sortable").sortable({ placeholder: "ui-state-highlight", opacity: 0.6 }); $("#cancelSort").click(function(){ $("#sortable").sortable("cancel"); }); });

Открыть пример в новом окне

Метод .sortable(«cancel») использованный в примере, один из самых полезных методов плагина. Он позволяет отменить результат последней операции сортировки и вернуть элементы к предшествующему состоянию.
Обратите внимание на элемент button с идентификатором #cancelSort. С кнопкой связан обработчик события click, по которому и вызывается метод соответствующий метод.
Если Вы попробуете переместить один из элементов с писка на новое место, а затем нажать на кнопку cancelSort, список вернется в предыдущее состояние.

Но конечно, этот метод не единственный. Вот другие:
destroy – .sortable(‘destroy’) полностью удаляет всю функциональность плагина Sortable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .sortable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .sortable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .sortable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.
serialize – .sortable(’serialize’, [option]) упорядочивает значение атрибутов id элементов сортируемого списка в строку, которую можно передать на сервер с помощью ajax-запроса. Предъявляет требования к формату записи значения атрибута id. Допустимые форматы: id=’name_number’ или id=’name-number’. В этом случае вид строки получается ‘name[]=number& name[]=number’. Вторым, необязательным параметром, можно передать объект. Возможные значения: ‘key’ – заменит часть ‘name[]‘ на необходимую Вам, ‘attribute’ – попробует получить значения из атрибута, отличного от id, ‘expression’ – можно использовать свое регулярное выражение.
toArray – .sortable(‘toArray’) упорядочивает значение атрибутов id элементов сортируемого списка в массив.
cancel – .sortable(‘cancel’) отменяет результат последней операции сортировки и возвращает элемент в состояние, предшествующее этой операции. Метод полезен при использовании в callback-функциях, связанных с событиями stop или receive.

Ну, и «на сладкое» – конечно обязательно надо дать пример использования связанных списков.

$(function(){ $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable", tolerance: "pointer" }); });

Открыть пример в новом окне

Я привел пример только javascript-кода, поскольку в HTML-коде страницы ничего особенного нет – просто два ненумерованных списка #sortable1 и #sortable2. С помощью javascript-кода мы сделаем их сортируемыми, указав их идентификаторы в селекторе jQuery и связав с ними функциональность Sortable. Самое главное заключается в использовании опции connectWith. Здесь мы указываем имя класса для того списка, который хотим сделать связанным с другим списком.
Обратите внимание, что атрибут class со значением connectedSortable мы присвоили обоим спискам и добились того, что элементы могут перемещаться не только из первого списка во второй, но и наоборот. Если бы мы захотели организовать только «одностороннее движение», скажем из первого списка во второй, мы бы присвоили класс connectedSortable только второму списку.

Теперь сортируемые элементы можно переносить из одного списка в другой и элемент, перемещенный из одного списка в другой, становится частью другого списка.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.

jQuery UI – плагин Selectable

Gennady — Thu, 08 Oct 2009 05:23:17 +0000

Плагин Selectable – один из нескольких плагинов, входящих в состав jQuery UI, с помощью которых можно организовать взаимодействие с элементами веб-станиц. Он дает возможность выбора элементов с помощью передвижения указателя мыши с удержанием в нажатом состоянии ее левой клавиши или комбинации щелчка мышью с нажатием и удержанием клавиши Ctrl (Meta), подобно тому, как это делается в традиционных приложениях.

Сделаем сами?

Идем на страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Selectable и видим, что вместе с ним отметился чекбокс UI Core. Работа плагина Selectable зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве.

Подключили файл стилей css/le-frog/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Конечно, свое собственное оформление лучше, но для изучения примеров воспользуемся готовым оформлением. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагина Selectable.

Опыты будем ставить над списком ol, пункты которого нам предстоит сделать выделяемыми. Вот пример HTML-разметки:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

и пример javascript-кода, который связывает с подопытным списком функциональность плагина:

$(function(){ $("#selectable").selectable(); });

Открыть пример в новом окне

Это был пример, где все возможные настройки устанавливались по умолчанию. Не будем с этим мириться и попробуем передать какие-нибудь настройки самостоятельно.

$(function(){ $("#selectable").selectable({ distance: 30 }); });

Открыть пример в новом окне

В примере мы передали плагину значение 30 в опции distance, и этим определили расстояние в пикселах, которое должен пройти указатель мыши (с одновременно нажатой левой клавишей), прежде, чем начнется выделение указанных элементов. Значения для остальных опций можно передать плагину подобным образом. Опций у этого плагина немного, всего шесть:

autoRefresh – по умолчанию установлено значение true, что определяет пересчет положения и размеров области выделения при попадании туда очередного элемента. Если таких элементов очень много, может понадобиться отключить пересчет. Для этого следует установить значение false. При необходимости можно будет использовать для пересчета метод .selectable(‘refresh’).
cancel – опция принимает в качестве значения селектор jQuery. Предотвращает начало выбора элементов, если при начале выбор указатель мыши находится над указанными элементами. По умолчанию установлено значение ‘:input,option’.
delay – в опции указывается число, устанавливающее время в миллисекундах, определяющее задержку начала выбора элементов. По умолчанию – 0.
distance – в опции указывается число, устанавливающее расстояние в пикселах, которое должен пройти указатель мыши до начала выбора элементов. По умолчанию – 0.
filter – в качестве значения опции указывается селектор jQuery. По умолчанию используется значение ‘*’. В этой опции можно указывать элементы-потомки, которые будут сделаны выбранными (при условии, если они могут быть таковыми).
tolerance – опция принимает в качестве значения строку. По умолчанию используется значение ‘touch’. Возможные значения ‘touch’ и ‘fit’. При использовании значения ‘touch’ выбор элемента производится, когда область выбора перекрывает элемент какой-либо частью. При использовании значения ‘fit’ выбор элемента производится, только когда область выбора перекрывает элемент полностью.

Посмотрим теперь, на какие события может реагировать плагин Selectable. Таких событий всего шесть. Для начала разберем простенький пример:

$(function(){ $("#selectable").selectable({ stop: function(event, ui) { alert(event.type); } }); });

Открыть пример в новом окне

Callback-функция, которую мы определили в опции stop, может принимать два аргумента. Первый аргумент – объект события. Мы используем его внутри функции, обращаясь к свойству type, чтобы вывести в окне предупреждения название события, вызвавшего функцию.

В следующем примере используем еще пару опций, связанных с событиями и заодно опробуем объект ui:

$(function(){ $("#selectable").selectable({ start: function(event) { $("#result").empty().append("Событие: " + event.type); }, selected: function(event, ui) { $("#result").append("Событие: " + event.type + " для " + ui.selected.innerHTML); }, stop: function(event) { $("#result").append("Событие: " + event.type); } }); });

Открыть пример в новом окне

В этом примере мы использовали опции start, selected и stop. В опциях start и stop определяются callback-функции, которые вызываются при начале и окончании выбора элементов. В опции selected можно определить callback-функцию, которая вызывается для каждого выбранного элемента по окончании выбора.

selected – событие selected наступает по окончании выбора для каждого выбранного элемента.
selecting – событие selecting наступает в процессе выбора для каждого выбранного элемента.
start – событие selectablestart наступает при начале процесса выбора.
stop – событие selectablestop наступает при окончании процесса выбора.
unselected – событие unselected наступает по окончании выбора для каждого элемента не попавшего в выбор по сравнению с предыдущим состоянием.
unselecting – событие unselecting происходит в процессе выбора, когда какой-либо элемент, присутствовавший в выборе, удаляется из него.

Еще плагин Selectable имеет несколько методов, с помощью которых можно управлять им после инициализации. Для того, чтобы испытать методы, добавим несколько кнопок в HTML-разметку:

и используем вот такой javascript-код:

$(function(){ $("#selectable").selectable(); $("#disable").click(function(){ $("#selectable").selectable("disable"); }); $("#enable").click(function(){ $("#selectable").selectable("enable"); }); $("#destroy").click(function(){ $("#selectable").selectable("destroy"); }); });

Открыть пример в новом окне

Мы используем три кнопки с идентификаторами #disable, #enable и #destroy, связывая с ними события click. При нажатии на кнопки вызываем соответствующий метод плагина Sortable, временно запрещая использование функциональности плагина, вновь восстанавливая эту функциональность, и удаляя ее окончательно, возвращая элементы в состояние, предшествующее инициализации.

destroy – .selectable(‘destroy’) полностью удаляет всю функциональность плагина Selectable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .selectable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .selectable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .selectable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.
refresh – .selectable(‘refresh’) этот метод обычно используется, если для опции autoRefresh установлено значение false. С помощью него можно пересчитать положение и размеры области выделения.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.

jQuery UI – плагин Resizable

Gennady — Wed, 07 Oct 2009 05:12:13 +0000

Плагин Resizable – один из нескольких плагинов, входящих в состав jQuery UI, с помощью которых можно организовать взаимодействие с элементами веб-станиц. Плагин Resizable позволяет изменять размеры выбранных элементов с помощью перемещения указателем мыши. Посмотрите на примере:

А сделать это не так сложно как кажется на первый взгляд. Конечно, если делать с помощью jQuery.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Resizable и видим, что вместе с ним отметился чекбокс UI Core. Работа плагина Resizable зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

В разделе HEAD веб-страницы необходимо подключить несколько файлов, которые есть в архиве:

Сначала подключаем файл стилей css/start/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Вероятно, Вы будете использовать свое собственное оформление, но для изучения примеров лучше воспользоваться готовым оформлением. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагина Resizable.

Для примера возьмем следующую HTML-разметку:

Resizable

И javascript-код, который «привяжет» возможности плагина Resizable к выбранному элементу:

$(function(){ $("#resizable").resizable(); });

Открыть пример в новом окне

И больше ничего! По крайней мере для того, чтобы использовать все настройки по умолчанию этого вполне хватит. Но мы попробуем передать плагину несколько опций:

$(function(){ $("#resizable").resizable({ animate: true, ghost: true }); });

Открыть пример в новом окне

Мы передали плагину две опции – animate и ghost. В обоих случаях передали логическое значение true. Но, что же мы этим смогли добиться?
Передав значение true в опции animate, мы добились того, что теперь при изменении размеров элемента будет использоваться анимационный эффект.
В случае с ghost: true при изменении размеров элемента будут отображаться его полупрозрачные контуры.
Остальные опции, как Вы понимаете, используются таким же образом – главное знать, за что какая отвечает…

alsoResize – по умолчанию имеет значение false. Может принимать селектор jQuery, объект jQuery или элемент. Элементы, определенные в этой опции также меняют свои размеры.
animate – по умолчанию установлено значение false. Если установить значение true, при изменении размера будет использоваться анимация.
animateDuration – в качестве значения опция принимает строку с предопределенными значениями – ’slow’, ‘normal’, ‘fast’ или число в миллисекундах, определяющее длительность анимационного эффекта при изменении размера элемента.
animateEasing – опция принимает строку с названием анимационного эффекта. Большое количество разнообразных эффектов можно использовать при условии подключения дополнительного плагина jQuery Easing. По умолчанию имеет значение ’swing’.
aspectRatio – по умолчанию имеет значение false. Если установить true, при изменении размеров элемента будет сохраняться пропорция в соотношении сторон. Возможно также, передавать значения в виде 16/9 или 0.75. В этом случае пропорции в соотношении сторон будут установлены в соответствии с указанным значением.
cancel – в качестве значения указывается селектор jQuery. Предотвращает изменение размеров для элементов, указанных в этой опции. По умолчанию имеет значение ‘:input,option’.
containment – ограничивает изменение размеров внутри элемента определенного в этой опции. Значением может быть строка (например ‘parent’, ‘document’), элемент DOM или селектор jQuery. По умолчанию установлено значение false.
delay – в этой опции можно указать число в миллисекундах, определив задержку старта изменения размеров элемента. По умолчанию установлено значение 0. Эта опция помогает предотвратить случайное изменение размеров элемента при щелчке мышью.
distance – по умолчанию установлено значение 1. Опция определяет количество пикселей, на которое переместиться указатель мыши, прежде, чем начнется изменение размеров элемента. Эта опция помогает предотвратить случайное изменение размеров элемента при щелчке мышью.
ghost – по умолчанию установлено значение false. Если установить true, при изменении размеров элемента будут видны его полупрозрачные контуры.
grid – в качестве значения принимает массив элементов [x, y], где x и y – числа, определяющие шаг сетки. Изменение размеров будет происходить дискретно, в соответствии с заданными значениями. По умолчанию установлено значение false.
handles – принимает строку в качестве значения. По умолчанию установлено значение ‘e, s, se’. Можно использовать любые из следующих обозначений ‘n, e, s, w, ne, se, sw, nw, all’ или их комбинации.
helper – по умолчанию опция имеет значение false. Принимает строку с названием css-класса, который добавляется к области, демонстрирующей во время перемещения размеры, в которые установится элемент.
maxHeight – число, определяющее максимальную высоту, до которой можно изменять размеры элемента. По умолчанию – null.
maxWidth – число, определяющее максимальную ширину, до которой можно изменять размеры элемента. По умолчанию – null.
minHeight – число, определяющее минимальную высоту, до которой можно изменять размеры элемента. По умолчанию – 10.
minWidth – число, определяющее минимальную ширину, до которой можно изменять размеры элемента. По умолчанию – 10.

Плагин Resizable, как и остальные плагины из UI jQuery, может реагировать на события. Он имеет три опции, в которых можно определить callback-функции, вызываемые при наступлении соответствующего события.

Опция start – событие resizestart наступает при начале изменения размеров элемента.
Опция resize – событие resize наступает постоянно во время изменения размеров элемента.
Опция stop – событие resizestop наступает при окончании изменения размеров элемента.

Однако на примере все равно лучше:

$(function(){ $("#resizable").resizable({ ghost: true, stop: function(event, ui) { alert("Событие " + event.type); } }); });

Открыть пример в новом окне

В этом примере мы определили в опции stop callback-функцию, которая будет вызвана в момент окончания изменения размеров элемента. Функция может принимать два аргумента. Первый аргумент – это объект события, к свойству type которого можно легко обратиться. Теперь, при окончании изменения размеров выбранного элемента мы получим окно предупреждения, в котором будет выведено название события, вызвавшего эту функцию.
Что касается второго аргумента, то это объект, в свойствах которого содержится весьма полезная информация. Как можно обратиться к некоторым свойствам этого объекта показано в следующем примере:

$(function(){ $("#resizable").resizable({ ghost: true, stop: function(event, ui) { alert("Начальные размеры: " + ui.originalSize.width + "x" + ui.originalSize.height + "px\nКонечные размеры: " + ui.size.width + "x" + ui.size.height + "px"); } }); });

Открыть пример в новом окне

Здесь мы обращаемся к свойствам объекта ui originalSize и size. Оба свойства также представляют собой объекты, в свойствах width и height которых сохраняются значения ширины и высоты начальных размеров элемента (originalSize) и его конечных размеров (size).

Перечислим основные свойства специального объекта ui:
ui.helper – объект, представляющий изменяемый элемент;
ui.size – объект, в свойствах width и height которого сохраняются текущие ширина и высота элемента;
ui.originalSize – объект, в свойствах width и height которого сохраняются ширина и высота элемента до изменения его размеров;
ui.position – объект, в свойствах top и left которого сохраняется текущее положение элемента;
ui.originalPosition – объект, в свойствах top и left которого сохраняется положение элемента до изменения его размеров;

Кроме перечисленных выше возможностей, плагин имеет несколько методов, с помощью которых можно управлять им уже после инициализации. Добавим в HTML-разметку пару кнопок:

и попробуем использовать метод .resizable(‘option’, optionName, [value]):

$(function(){ $("#resizable").resizable({ animate: true, ghost: true, animateDuration: 500 }); $("#getter").click(function(){ alert($("#resizable").resizable("option", "animateDuration")); }); $("#setter").click(function(){ $("#resizable").resizable("option", "animateDuration", 3000); }); });

Открыть пример в новом окне

Используем кнопки с идентификаторами #getter и #setter с которыми свяжем событие click. При щелчке мышью на кнопке #getter будем вызывать метод .resizable(‘option’, optionName, [value]) с двумя аргументами, получая, таким образом, текущее значение опции animateDuration. А при щелчке мышью на кнопке #setter вызовем тот же самый метод .resizable(‘option’, optionName, [value]), но уже с тремя аргументами. В качестве третьего аргумента передадим значение, которое мы хотим установить для опции animateDuration.

Все доступные методы плагина Resizable:
destroy – .resizable(‘destroy’) полностью удаляет всю функциональность плагина Resizable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .resizable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .resizable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .resizable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.

Введение	1
Структура книги	1
Как работать с книгой	2
Источники информации	3
Благодарности	4
ЧАСТЬ I. МЕТОДЫ БИБЛИОТЕКИ JQUERY	5
Глава 1. Выбор элементов	7
1.1. Базовые правила	7
1.2. Выбор элементов с учетом иерархии	14
1.3. Основные фильтры	18
1.4. Фильтрация по содержимому	24
1.5. Фильтры видимых и невидимых элементов	28
1.6. Фильтры атрибутов	29
1.7. Фильтры элементов форм	35
1.8. Фильтры состояния элементов форм	37
1.9. Фильтры элементов-потомков	42
Глава 2. Атрибуты элементов	48
2.1. Управление атрибутами элементов	48
2.2. Работа с атрибутом class	53
2.3. Работа с HTML и текстом	54
2.4. Работа с атрибутом value	57
Глава 3. Визуальные эффекты	64
3.1. Как показывать и скрывать элементы	64
3.2. Эффекты «скольжения» и «затухания»	67
3.3. Создание анимации	71
3.4. Эффекты UI jQuery	76
Глава 4. Работа с CSS-свойствами	81
4.1. Как получать и устанавливать значения CSS-свойств элементов	81
4.2. Ширина и высота элементов	85
4.3. Позиционирование элементов	88
Глава 5. Некоторые методы ядра библиотеки jQuery	92
5.1. Примеры работы с объектом jQuery	92
5.2. Сохранение и извлечение данных	97
Глава 6. Манипуляции над элементами	101
6.1. Изменение содержимого элементов	101
6.2. Как вставлять элементы в DOM	103
6.3. Замена, удаление и копирование элементов	113
Глава 7. Перемещение по элементам	120
7.1. Поиск нужных элементов в DOM	120
7.2. Фильтрация элементов набора	131
7.3. Перемещение по цепочке вызовов	138
Глава 8. События и их обработка	142
8.1. Готовность документа	142
8.2. Назначение, удаление и вызов событий	144
8.3. Взаимодействие с элементами	152
8.4. События	155
Глава 9. Взаимодействие jQuery и AJAX	161
9.1. Самое простое	161
9.2. GET- и POST-запросы	166
9.3. Вспомогательная функция $.ajax(options)	174
9.4. Для чего нужна функция $.ajaxSetup(options)	180
9.5. События AJAX	183
Глава 10. Утилиты jQuery	190
10.1. Некоторые операции с массивами и объектами в jQuery	190
ЧАСТЬ II. РАСШИРЕНИЯ ДЛЯ БИБЛИОТЕКИ JQUERY	201
Глава 11. Меню для веб-сайта	203
11.1. Плагин jQuery Multi Level Menu	203
11.2. Плагин jQuery Drop Line Menu	207
11.3. Плагин jQuery TreeView	210
11.4. Делаем меню похожее на Accordion	216
Глава 12. Работа с таблицами	219
12.1. Плагин jQuery DataTables	219
Глава 13. Графики и диаграммы	229
13.1. Плагин jqPlot	229
Глава 14. AJAX-формы	242
14.1. Плагин jQuery Autocomplete	242
14.2. Плагин jQuery Form	252
14.3. Плагин jQuery Validate	257
14.4. Плагин jQuery Uploadify	264
Глава 15. Фотогалереи для сайта	274
15.1. Фотогалерея FancyBox	274
15.2. Простая фотогалерея	282
Глава 16. Несколько полезных плагинов	286
16.1. jQuery Cookie	286
16.2. jQuery Corner	288
16.3. jQuery Timers	293
16.4. jQuery Cluetip	297
Глава 17. UI jQuery — виджеты	303
17.1. Виджет Accordion	303
17.2. Виджет Datepicker	314
17.3. Виджет Dialog	326
17.4. Виджет Progressbar	334
17.5. Виджет Slider	337
17.6. Виджет Tabs	343
Глава 18. UI jQuery — взаимодействие с элементами страницы	354
18.1. Draggable — перемещение элементов	354
18.2. Droppable — «сброс» элементов	364
18.3. Resizable — изменение размеров элементов	371
18.4. Selectable — выбор элементов	377
18.5. Sortable — сортировка элементов	385
Литература	397
Приложение. Описание компакт-диска	398
Предметный указатель	400
Оглавление