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

jqGrid Часть III: Расширенные возможности

TRAHOMOTO — Sun, 23 May 2010 15:26:04 +0000

Введение
Я рад приветствовать вас, дорогие читатели в третьей статье цикла, посвященного плагину jqGrid. Прошу прощения за столь долгое отсутствие, сейчас все свободное время отдаю изучению и освоению другого монстра – ExtJS.
Напомню, что в предыдущей статье (jqGrid Часть II: Базовые возможности) мы перешли от basic к advanced уровню использования этого замечательного плагина. Но прежде чем мы начнем я хотел бы сообщить, что jqGrid обновилась до версии 3.6.5 и соответственно и мы будем использовать новую версию.

Итак план работ на эту статью:

I.jqGrid и «деревья»

1) Краткие сведения о деревьях
Конечно здесь речь пойдет не о садово-огородных работах, а об представлении древовидных структур данных. В очередной раз обратимся за определением к Википедии:

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

В принципе более или менее сносное определение, несмотря на то, что оно навивает академическую скуку я все же настоятельно рекомендую ознакомиться с материалом по древовидным структурам. Поверьте моему не большому опыту, абсолютно каждый программист рано или поздно станет перед необходимостью использовать дерево, и тут одним из помошников может стать jqGrid. Плагин может работать с двумя самыми распространенными в вычислительной технике типами деревьев: на основе «вложенных множеств» (Nested Sets) и «матрицы смежностей» (adjacency matrix). Вообще говоря тема деревьев очень серьезна, это один из разделов теории графов на изучение которых отводится не одна лекция в ВУЗах, но от себя посоветую те материалы которые мне в свое время очень помогли. Столкнувшись впервые с проблемой хранения деревьев я наткнулся на материал по подходу вложенных множеств (Хранение древовидных структур в Базах данных) и сразу же остановился на нем, наверное потому что для работы с таким деревом существует готовый PHP класс. Но в процессе написания статьи я все же прочел статью Работа с «MySQL. Деревья» в которой рассматривается подход матрицы смежностей.

Думаю здесь общие сведения следует закончить и перейти к практическому рассмотрению.

2) jqGrid и SQL деревья
Для того, чтобы jqGrid могла работать с древовидными структурами, она должна быть загружена с модулем Tree Grid. Плагин может работать с обоими типами деревьев, упомянутых в предыдущем пункте. При этом jqGrid может работать с деревьями подгрузив все дерево за один раз или же подгружая ветви и листья по мере необходимости. Собственно загрузку дерева за один раз я рассматривать не буду, не интересно, а вот автоподгрузку мы разберем детально. И на этой ноте давайте перейдем к просмотру ДЕМО3.1, ссылка для скачивания

$(function(){
     $('#table_nested').jqGrid({
                     treeGrid: true,
                     treeGridModel: 'nested',
                     ExpandColumn: 'title',
                     ExpandColClick: true,
                     url: 'p3e1_n.php',
                     datatype: "json",
                     mtype: "POST",
                     colNames:["id","Раздел"],
                     colModel:[
                                   {name:'cid',index:'cid', width:1, hidden:true, key:true},
                                   {name:'title',index:'title', width:180}
                                  ],
                     treeIcons: {plus:'ui-icon-folder-collapsed',minus:'ui-icon-folder-open',leaf:'ui-icon-document'},
                     height: 'auto',
                     caption: 'вложенныe множества',
                     hidegrid: false
     });

     $('#table_adjacency').jqGrid({
                     treeGrid: true,
                     treeGridModel: 'adjacency',
                     ExpandColumn: 'title',
                     ExpandColClick: true,
                     url: 'p3e1_a.php',
                     datatype: "json",
                     mtype: "POST",
                     colNames:["cid","Раздел"],
                     colModel:[
                                   {name:'cid',index:'cid', width:1, hidden:true, key:true},
                                   {name:'title',index:'title', width:180}
                                   ],
                     treeIcons: {plus:'ui-icon-circle-plus',minus:'ui-icon-circle-minus',leaf:'ui-icon-person'},
                     height: 'auto',
                     caption:'матрица смежностей',
                     hidegrid: false
    });
});

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

treeGrid: true – самый главный параметр, указывает что jqGrig будет работать с древовидной структурой, а не с простыми табличными данными
treeGridModel: ‘adjacency’ / ‘nested’ – это свойство определяет какой алгоритм дерева использовать
ExpandColumn: ‘title’ – определяет при клике по какому столбцу происходит открытие и(или) загрузка ветви
ExpandColClick: true – необходимо, чтобы открытие ветви происходило при клике на колонку, а не на иконку
colModel:[... key:true},...] – свойство key в массиве colModel позволяет указать данные какого столбца следует использовать как уникальный идентификатор записи при запросе данных с сервера. Т.е. благодаря этому свойству, можно переопределить идентификатор. Но только в одном столбце может быть указан key. Плагин будет использовать первый, найденный столбец как ключевой.
treeIcons: – позволяет переопределить стандартные ({plus:’ui-icon-triangle-1-e’,minus:’ui-icon-triangle-1-s’,leaf:’ui-icon-radio-off’}) иконки листьев и ветвей.

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

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

После получения данных, серверный скрипт выполняет запрос данных из БД и сроит и выводит результат в следующих форматах.

Ядро (ридеры) jqGrid разбирают ответ и вставляют данные в таблицу. Вот теперь серверные скрипты будут более-менее понятны.

Вложенные множества (p3e1_n.php)(опущены подключение к БД и вывод результата)

// Получаем параметры от таблицы
    # ВНИМАНИЕ!!!
    # Данный код не имеет проверок запрашиваемых данных
    # что может стать причиной взлома! Обязательно проверяйте все данные
    # поступающие от клиента

    $node  = intval($_POST['nodeid']);
    $left  = intval($_POST['n_left']);
    $right = intval($_POST['n_right']);
    $level = intval($_POST['n_level']);

// Настраиваем условие для выбора ветки
    $WHERE = '';
    if($node > 0) {
       $level = $level + 1;  // нужно выбрать следующий уровень
       $WHERE = " AND cleft > ".$left." AND cright < ".$right." AND clevel = ".$level;
    }else{
       $level = 0;
    }

// Выбираем подразделы
    $query = "SELECT cid, title, clevel, cleft, cright FROM tree_nested_sets WHERE cleft BETWEEN cleft AND cright ".$WHERE." GROUP BY title ORDER BY cleft;";
    $result = mysql_query($query);

// Формируем результат
    $response->page = 1;
    $response->total = 1;
    $response->records = 1;

    $i = 0;
    while($row = mysql_fetch_assoc($result)) {
        //-------------------------------------
        // Определяем является ли выбранный узел "листом"
        if($row['cright'] == $row['cleft']+1)
            $leaf = 'true';
        else
            $leaf='false';
        //-------------------------------------

        if($level == $row['clevel']){
            $response->rows[$i]['cell'] = array($row['cid'], $row['title'], $row['clevel'], $row['cleft'], $row['cright'], $leaf, 'false');
        }
        $i++;
    }

Матрица смежностей(p3e1_a.php)(опущены подключение к БД и вывод результата)

// Выбираем все разделы без подразделов (листья)
    $query_feafs = "SELECT t1.cid FROM tree_adjacency_matrix AS t1 LEFT JOIN tree_adjacency_matrix AS t2 ON t1.cid = t2.id_parent WHERE t2.cid IS NULL";
    $sql_leafs = mysql_query($query_feafs);

    while($row = mysql_fetch_assoc($sql_leafs)) {
       $leafs[] = $row['cid']; // Массив для хранения "листьев"
    }
    unset($row);

// Получаем параметры от таблицы
    # ВНИМАНИЕ!!!
    # Данный код не имеет проверок запрашиваемых данных
    # что может стать причиной взлома! Обязательно проверяйте все данные
    # поступающие от клиента

    $level  = intval($_POST['n_level']);
    $node   = intval($_POST['nodeid']);

// Настраиваем условие для выбора ветки
    if($node > 0) {
       $level = $level + 1;            // нужно выбрать следующий уровень
       $WHERE = 'id_parent ='.$node;
    } else {
       $WHERE = 'id_parent IS NULL';   // выбрать корень(ни)
    } 

// Выбираем подразделы
    $query  = "SELECT cid, title, id_parent FROM tree_adjacency_matrix WHERE ".$WHERE;
    $result = mysql_query($query);

// Формируем результат
    $response->page      = 1;
    $response->total     = 1;
    $response->records   = 1;

    $i = 0;
    while($row = mysql_fetch_assoc($result)) {
       //-------------------------------------
       // Определяем ID родителя этого узла
       if(!$row['id_parent'])
           $parent = 'NULL';
       else
          $parent = $row['id_parent'];
       //-------------------------------------
       // Определяем является ли выбранный узел "листом"
       if(in_array($row['cid'], $leafs))
           $is_leaf = 'true';
       else
           $is_leaf = 'false';
       //--------------------------------------

       $response->rows[$i]['cell'] = array($row['cid'], $row['title'], $level, $parent, $is_leaf, FALSE);

       $i++;
    }

Я считаю комментировать в этих листингах особо нечего, кроме того что данные поступающие с сервера не ограничиваются по кол-ву записей и не сортируются. А практически все остальное является повторением примеров из предыдущих статей или специфическими вещами при работе с деревьями, описанными в статьях приложенных выше. Также обращу ваше внимание на то, что пример работы с Nested Set Model описанный в документации разработчиком не хотел работать, пришлось его доводить, за что мне большое спасибо .

3)jqGrid и статические деревья
Название статические деревья оносительно, того что мы делали немного ранее. Безусловно данные «загруженные» таким способом могут быть построены и скриптом динамически, но все же бывают такие задачи, когда дерево уже есть необходимо лишь вывести его в дружественной для пользователя форме как в ДЕМО3.2 . Не правда ли что-то напоминает? Да! это меню из демо jqGrid от разработчика.

Листинг клиентской части:

  $('#table').jqGrid({
            url: "tree.xml",
            datatype: "xml",
            height: "auto",
            pager: false,
            loadui: "disable",
            colNames: ["id","Items","url"],
            colModel: [
                {name: "id",width:1,hidden:true, key:true},
                {name: "menu", width:150, resizable: false, sortable:false},
                {name: "url",width:1,hidden:true}
            ],
            treeGrid: true,
                    caption: "jqGrid Demos",
            ExpandColumn: "menu",
            width: 200,
            rowNum: 200,
            ExpandColClick: true,
            treeIcons: {leaf:'ui-icon-document-b'}
 });

Полностью идентичные параметры плагина, за исключением того, что я отключил обработчик события onSelectRow.
Из листига должно стать понятно, что таблица запрашивает статичный(оносительно) файл tree.xml, который выглядит так



    1
    1
    1
    1Loading Data0110falsefalse
    2XML Dataxmlex.html123truetrue
    3JSON Datajsonex.html145truetrue

...

Т.е. jqGrid просто разбирает данные из этого файла и строит TreeGrid.

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

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

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

Это весьма полезная опция у этого плагина. На ДЕМО3.3 обратите внимание на крестик в крайнем правом столбце таблицы. При клике на нем под выбранной строкой распахивается «карман» в котором находится небольшая табличка с названиями городов и прочей «рыбой». Вот пример группировки. Теперь давайте перейдем к листингам.

$('#table').jqGrid({
       url:'p3e3.php',
       datatype: 'json',
       mtype: 'POST',
       colNames:['Код страны','Cтрана',''],
       colModel :[
          {name:'country_code', index:'country_code', width:80, hidden: true},
          {name:'country_name', index:'country_name', width:60},
          {name:'description', width:200, sortable: false}
          ],
       pager: $('#tablePager'),
       rowNum: 100,
       scroll: true,
       viewrecords: true,
       sortname: 'country_name',
       sortorder: 'asc',
       width: 700,
       height: 400,
       subGrid: true,
         subGridUrl: 'p3e3.php?get=subgrid',
         subGridModel:[{
                     name :  [' ','Город', 'Широта', 'Долгота'],
                     width:  [40, 200, 150, 150],
                     align:  ['center','left','right','right'],
                     params: ['country_code','country_name']
                 }]
});

Как видите, абсолютно обыкновенный jqGrid, но в «настройках» есть несколько интересных моментов:

subGrid: – в строке 19. Эта опция позволяет использовать подтаблицу.
subGridUrl: – указывает путь к скрипту, который должен вернуть данные для построения подтаблицы. В данном случае происходит запрос к тому же скрипту, который «обслуживает» и таблицу-родителя при этом передав ему параметр get со значением subgrid
subGridModel: – свойство которое задает параметры подтаблицы. Аналогично colModel таблицы-родителя

subGridModel: – представляет из себя массив с объектом, у которого есть свои параметры. name, width и align уверен их имена говорят сами за себя, это тексты заголовков столбцов, ширины соответствующих столбцов и выравнивание в них соответственно. Более интересным будет свойство params. Оно позволяет передать значения из каких то ячеек родительской таблицы на сервер при запросе подтаблицы. Иными словами, когда вы нажмете на крестик , открывающий подтаблицу, происходит запрос к серверу которому передается клоч (id) записи (в нашем случае это country_code) и плос к этим данным можно передать дополнительные (в нашем случае серверу будет передан еще и country_name). А вот на сервере получив значения нужных параметров (в этом примере серверный скрипт просто игнорирует значение параметра country_name) вы выполняем запрос к БД и выводим JSON объект с данными.

...
$get = $_REQUEST['get'];  // Параметр указывающий на то
                                    //  что мы запросили информацию для подтаблицы
...
switch ($get){
    case 'subgrid':
        // Выбрать города запрошенной страны
        $id =$_REQUEST['id'];

        // Запрос данных
        $query = "SELECT id, country_code, region_code, city, latitude, longitude, nbip FROM cities  WHERE country_code LIKE '".$id."'";

        $result = mysql_query($query);
        if(mysql_num_rows($result) >= 1){
            // Строки данных для таблицы
            $i = 0;
            while($row = mysql_fetch_assoc($result)) {
                $data->rows[$i]['cell'] = array($i+1,''.$row['city'].'',$row['latitude'],$row['longitude']);
                $i++;
            }
        }
        break;

    default:
        // Выбрать названия стран и сосчетать города
        ...

}
// Вывести результат
...

Серверный скрипт особо ничем не отличается от рассмотренных в предыдущих примерах. При этом он разбит на две части оператором switch. Который по умолчанию выполняет «стандартную» обработку и вывод данных для главной таблицы. А вот если этот скрипт запустить передав ему параметр get (я выбрал такое имя только ради наглядности) тогда будет выполнена выборка данных для подтаблицы. Ну и если у вас чешутся руки поковырять пример, вы можете скачать его.

Подтаблицы это замечательный инструмент, который позволяет очень элегантно организавать данные, но при этом имеет один существенный недостаток – подтаблица «не живая». Т.е. данные в подтаблице не могут сортироваться, нет возморжности реализовать поиск и т.д. А это очень критично если в подтаблице будет выводиться много записей. Однако это ограничение отпадает само собой при использовании jqGrid как подтаблицы.

2)jqGrid как subgrid
Итак начнем с промотра ДЕМО3.4. Как видите все тот же «родной» jqGrid с названиями стран, и кол-вом городов в этой стране, но при этом подтаблица теперь представляет из себя самую настоящую jqGrid со всеми свойствами и методами. Согласитесь, что так работать намного приятнее и удобнее.

А вот здесь самое интересное – клиентский код (в листинге опущены все настройки родительской таблицы, кроме одного свойства):

...
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
    var subgrid_table_id;
    subgrid_table_id = subgrid_id+'_t';

    $('#'+subgrid_id).html('
');
    $('#'+subgrid_table_id).jqGrid({
        url: 'p3e4.php',
        datatype: 'json',
        mtype: 'POST',
        postData: {'get':'subgrid', 'id':row_id},
        colNames: ['Город', 'Широта', 'Долгота'],
        colModel: [
            {name: 'city', index: 'city', width:130},
            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
            ],
        height: 'auto',
        autowidth: true,
        rownumbers: true,
        rownumWidth: 40,
        rowNum: 10,
        sortname: 'city',
        sortorder: 'asc',
        pager: $('#'+subgrid_table_id+'_pager'),
        rowNum:10,
        rowList:[10,20,50,100]
    });
}
...

Настройки таблицы-родителя идентичные предыдущему примеру, но при этом появилось новое свойство subGridRowExpanded. Думаю самые догадливые поняли, а самые любопытные прочли в документации в секции Subgrid, что subGridRowExpanded не просто свойство, а событие.

Безусловно существуют еще события, о которых вы можете узнать из документации. А мы пока пробежимся по листингу. Итак когда пользователь «тыцнул» на крестик, открывается контейнер и выполняется функция. Которая получает 2 параметра subgrid_id и row_id. Далее в строке 5 создаем строковое значение для атрибута id и в 6й строке используем метод jQuery, который вставляет в «карман» (кстати сказать что это обыкновенный DIV) html разметку таблицы и DIV’a. А далее идет бональная инициализация jqGrid для только что созданной разметки. Т.е. фактически мы просто напросто динамически создали разметку и создали jqGrid! В этот момент я воскликнул «Тааак!» и потер руки. Почему? Да потому, что зная id объекта (

…

) с помощью jQuery можно сотворить с ним все что угодно. Но прежде чем мы перейдем к следующему примеру я приведу ссылку на раздаточный материал по теме – это пример который только что расмотрели.
А теперь зная id контейнера давайте, еще добавим наглядности нашему примеру со странами и городами, например как на ДЕМО3.5. Как видите все эта же, скучная таблица со странами, но теперь при клике на крестик открывается подробная информация и флаг выбранной строки. Под которой свернутая jqGrid таблица с перечнем городов. Этот пример вы можете скачать перейдя по этой ссылке. Внутри архива все скрипты, но наибольший интерес представляет клиентский код. Я условно разделю его на 2 части, первая (нижняя) часть:

$('#table').jqGrid({
          ...
          subGrid: true,
          subGridRowExpanded: function(subgrid_id, row_id) {
                       getCountryDetails(subgrid_id, row_id);
                   }

});

Это таблица из предыдущего примера, но теперь при возникновении события subGridRowExpanded будет выполнена пользовательская функция getCountryDetails(), которая и является 2 половиной клиентского скрипта:

function getCountryDetails(container, countryCode){
    $.ajax({
            type: 'post',
            url: 'p3e5.php',
            data: ({'id': countryCode, 'get': 'details'}),
            dataType: 'json',
            success: function(server){
                $('#'+container).html('Столица: '+server.capital+'
Дата независимости: '+server.independence_date+'
Официальные языки: '+server.off_lng+'
Форма правления: '+server.government+'
Глава правительства: '+server.president+'
Валюта: '+server.currency+'
Интернет-домены: '+server.domains+'
Телефонный код: '+server.dialing_code+'
Часовой пояс: '+server.time_zone+'');

                var subgrid_table_id = container+'_t';

                $('#'+container).append('
');
                $('#'+subgrid_table_id).jqGrid({
                          caption: 'Города',
                          hiddengrid: true,
                          url: 'p3e4.php',
                          datatype: 'json',
                          mtype: 'POST',
                          postData: {'get':'subgrid', 'id':countryCode},
                          colNames: ['Город', 'Широта', 'Долгота'],
                          colModel: [
                            {name: 'city', index: 'city', width:130},
                            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
                            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
                          ],
                          height: 'auto',
                          autowidth: true,
                          rownumbers: true,
                          rownumWidth: 40,
                          rowNum: 10,
                          sortname: 'city',
                          sortorder: 'asc',
                          pager: $('#'+subgrid_table_id+'_pager'),
                          rowNum:10,
                          rowList:[10,20,50,100]
                });
            }
    });
}

В теле этой функции выполняется AJAX запрос, передающий серверному скрипту 2 параметра методом POST:

id – идентификатор записи, в нашем случае это сокращенный код страны
get – этот параметр указывает, что мы хотим получить с сервера детальную информацию по выбранной стране

После того как запрос будет успешно выполнен (см. строку 8), в открывшийся под выбранной строкой контейнер будет помещена какая-то HTML разметка с полученными с сервера данными. В данном примере такая разметка представлена не нумированным списком в картинкой – флагом страны. После этого в этот же контейнер помещается разметка для дочерней таблицы и производится инициализация дочерней таблицы.

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

Как вы понимаете в контейнер для подтаблицы можно помещать не только какую-то примитивную разметку, но и формы, флеш, другие «вкусные» и полезные вещи.

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

Однако не всегда можно сгруппировать данные и засунуть их в подтаблицу. Иногда данные могут быть полностью самостоятельными и при этом иметь некую связь. Например однажды передо мной стала задача вывести пользователю перечень счетов и платежей по этим счетам, и при этом обеспечить возможность просмотра счетов, платежей и платежей по выбранному счету. И тут то мне очень помогла методика «ведущий-ведомый». Работа которой проиллюстрирована в ДЕМО5.6.

Имеется две jqGrid, отображающие страны и города, которые можно менять местами благодаря плагину sortable. Также в верхней части документа есть checkbox который включает функцию фильтрации содержимого ведомой (нижней) таблицы, на основе выбранной записи в ведущей (верхней) таблице. При этом вся фильтровка осуществляется на стороне сервера, с этого и начнем разбор примера. Для удобства две таблицы запрашивают данные у двух отдельных серверных скриптов, один для городов, другой для стран.
Скрипт для таблицы «Города» (т.к. основная структура скрипта «стандартна» я привожу лишь основные моменты):

// Получение параметров page, rows и т.д.
...
if($_REQUEST['filterBy'] != 'null')  // Фильтр
    $WHERE = " WHERE country_code = '".$_REQUEST['filterBy']."' ";
else
    $WHERE = '';
...
// Запрос подсчета суммарного кол-ва записей
$result = mysql_query("SELECT COUNT(*)AS count FROM cities".$WHERE);
...
// Запрос выборки данных
$result = mysql_query("SELECT city, latitude, longitude FROM cities ".$WHERE." ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit);

В данном случае клиентский код при запросе данных с сервера помимо «стандартных» параметров, отправляет еще и дополнительный параметр filterBy, который по сути и определяет критерий по которому нужно выбрать записи из БД и вернуть клиенту. Что и проиллюстрировано в последующих запросах.

Скрипт для таблицы «Страны»:

// Получение параметров page, rows и т.д.
...
if($_REQUEST['filterBy'] != 'null'){
     $country = @mysql_fetch_array(mysql_query("SELECT country_code FROM cities WHERE id = ".$_REQUEST['filterBy']));
     $WHERE = " WHERE country_code = '".$country['country_code']."' ";
}else{
     $WHERE = '';
}
...
// Запрос подсчета суммарного кол-ва записей
$result = mysql_query("SELECT COUNT(*)AS count FROM countries ".$WHERE);
...
// Запрос выборки данных
$result = mysql_query("SELECT * FROM countries ".$WHERE." ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit);

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


Связать таблицы

Если не обращать внимание на ужасно длинные inline-стили, то разметка достаточно проста. Сначала идет код checkbox’a с меткой, а следом контейнер всего интерфейса, внутри которого два дочерних контейнера, по одному для каждой таблицы.

И наконец клиентский скрипт:

//-------------------------------------------------------------------
// Функция-обработчик
function stickTogether(){
    if($('#link').is(':checked')){
        // Флаг "Связать таблицы" утановлен
        var masterId        = $('#interfaceBody > DIV:first').attr('id');                //Определяем ID контейнера "ведущей таблицы"
        var masterPostData  = $('#table_'+masterId).jqGrid('getGridParam','postData');   //Получаем весь объект postData "ведущей таблицы"
        var selId    = $('#table_'+masterId).jqGrid('getGridParam','selrow');            //Получаем id записи в выделенной строке
                                                                                         //не путайте с rowIndex
        // Проверяем какое текущее значение фильтра ведущей таблицы, он должен быть сброшен (например null)
        if(masterPostData.filterBy){
            $('#table_'+masterId).jqGrid('setGridParam',{'postData':{'filterBy':null}}); //Сбрасываем значение фильтра
            $('#table_'+masterId).trigger('reloadGrid');                                 //Перезагружаем данные в таблицу
        }

        var slaveId  = $('#interfaceBody > DIV:last').attr('id');                        //Определяем ID контейнера "ведомой таблицы"
        $('#table_'+slaveId).jqGrid('setGridParam',{'postData':{'filterBy':selId}});     //Применяем в качестве фильтра ведомой таблицы
                                                                                         //id выбранной записи в ведущей таблице
        $('#table_'+slaveId).trigger('reloadGrid');                                      //Перезагружаем данные в таблицу
    }else{
        // Флаг "Связать таблицы" не утановлен
        var coutriesT       = $('#table_countries');
        var countriesPost   = coutriesT.jqGrid('getGridParam','postData');

        if(countriesPost.filterBy){ //Сбрасываем фильтр т.к. ничего не нужно фильтровать
            coutriesT.jqGrid('setGridParam',{'postData':{'filterBy':null}})
            coutriesT.trigger('reloadGrid');
        }
        //-----------------------
        var citiesT       = $('#table_cities');
        var citiesPost    = citiesT.jqGrid('getGridParam','postData');

        if(citiesPost.filterBy){ //Сбрасываем фильтр т.к. ничего не нужно фильтровать
            citiesT.jqGrid('setGridParam',{'postData':{'filterBy':null}})
            citiesT.trigger('reloadGrid');
        }
    }
}
//-------------------------------------------------------------------
// Настройка плагинов
var tcountries = $('#table_countries').jqGrid({
                          caption: 'Страны',
                          hidegrid: false,
                          url:'p3e6_countries.php',
                          postData: {'filterBy':null},
                          datatype: 'json',
                          mtype: 'POST',
                          colNames:['Код страны','Cтрана','Столица','Домены'],
                          colModel :[
                                    {name:'country_code', index:'country_code', width:80, hidden: true},
                                    {name:'country_name', index:'country_name', width:60},
                                    {name:'capital', index:'capital', width:60},
                                    {name:'domains', index:'domains', width:60}
                                    ],
                          pager: $('#table_countriesPager'),
                          rowNum: 100,
                          scroll: true,
                          viewrecords: true,
                          sortname: 'country_name',
                          sortorder: 'asc',
                          height: 200,
                          autowidth: true,
                          onSelectRow: stickTogether
                });

var tcities = $('#table_cities').jqGrid({
                          caption: 'Города',
                          hidegrid: false,
                          url: 'p3e6_cities.php',
                          postData: {'filterBy':null},
                          datatype: 'json',
                          mtype: 'POST',
                          colNames: ['Город', 'Широта', 'Долгота'],
                          colModel: [
                            {name: 'city', index: 'city', width:130},
                            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
                            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
                          ],
                          height: 200,
                          autowidth: true,
                          rownumbers: true,
                          rownumWidth: 40,
                          rowNum: 100,
                          sortname: 'city',
                          sortorder: 'asc',
                          pager: $('#table_citiesPager'),
                          scroll: true,
                          viewrecords: true,
                          onSelectRow: stickTogether
                });

$("#interfaceBody").sortable({
        connectWith: '.grid',
        placeholder: 'ui-state-error',
        opacity: 0.7,
        stop: stickTogether
});

//-------------------------------------------------------------------
// Назначаем обработчик на событие
$('#link').change(stickTogether);

При всем своем объеме код достаточно груб и прост. Начнем пожалуй с назначения обработчика на изменение checkbox’a, самая последняя строка в листинге. Как видите при изменении checkbox’a будет вызвана функция stickTogether. В теле которой происходит проверка состояния флажка и если он не установлен, то произойдет сброс всех «фильтров» таблиц и перезагрузка данных в таблице.
Но самое интересное это код в «положительной» ветке if’а, когда флажок установлен. Мы знаем, что ведущая таблица расположена вверху, значит для начала узнаем какая же таблица в данный момент находится там. Для этого получаем значение атрибута id первого контейнера (строка 6). Теперь зная какая таблица ведущая – получаем объект postData, который, напомню, содержит все параметры и их значения для отправки серверу. В 7й строке получим Id записи в выделенной строке ведущей таблицы. Далее проверив значение фильтра ведущей таблицы, при необходимости сбросим его. Это необходимо если пользователь поменял таблицы местами.
В строке 16 узнаем id контейнера ведомой таблицы. И применяем фильтр, записав id выделенной строки в ведущей таблице, и перезагружаем данные.
У данного скрипта есть один недостаток – расплата за универсальность. Из-за того что на событие onSelectRow: в обоих таблицах определен один и тот же обработчик stickTogether, при выделении строки в ведомой таблице, происходит постоянное обновление ее записей. Но уверен что те кому потребуется такой функционал jqGrid без труда смогут это исправить.

Заключение
Подведя итоги проделанной работы можно сказать, что в данной статье мы рассмотрели практически все варианты расширенного использования плагина. Научились работать с древовидными данными и подтаблицами, а также попробовали управлять содержимым ведомой таблицы посредством данных из ведущей. В следующей части я рассмотрю еще одну экзотическую интересную опцию jqGrid – «drag’n'drop записей между jqGrid’ами».
Ну и как всегда если у вас возникли вопросы задавайте их на форуме ну а комментарии используйте для предложений и пожеланий.

Итак приблизительный план работ на следующий выпуск:

Расширенные возможности jqGrid
- drag’n'drop записей между jqGrid’ами
Поиск данных в jqGrid
- «inline» поиск
- поиск с использованием встроенной формы
- расширенный поиск с использованием встроенной формы
- поиск с использованием внешней формы

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]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.

jQuery UI – плагин Droppable

Gennady — Tue, 06 Oct 2009 05:25:13 +0000

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

А теперь разберемся, как это сделать самостоятельно.

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

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

Сначала мы подключили файл стилей css/trontastic/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагинов Droppable и Draggable (ведь прежде, чем «сбросить» элемент, его надо переместить).

Пример HTML-разметки:


Drag me to my target


Drop here

Элемент с идентификатором #draggable будет у нас перемещаемым, элемент с идентификатором #droppable – целевым, в него можно будет «сбросить» перемещаемый элемент. Наконец, элемент с идентификатором #result будет служить для придания наглядности примеру.

Теперь смотрим javascript-код:

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(){
      $("#result").append("Dropped!");
    }
  });
});

Мы сразу же определили callback-функцию в опции drop. Это сделано в первую очередь для наглядности. Как только перемещаемый блок div будет «сброшен» в целевой блок div, в элемент с идентификатором #result будет добавлен соответствующий текст.

Но попробуем передать плагину еще пару каких-либо опций.

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    activeClass: "active",
    hoverClass: "hover",
    drop: function(){
      $("#result").append("Dropped!");
    }
  });
});

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

Плагин Droppable может принимать семь опций:
accept – в опции может быть указан селектор или функция. Все перемещаемые элементы, которые будут выбраны этим селектором, получат возможность быть «сброшенными» в элемент, к которому применена функциональность плагина Droppable. Если в этой опции определена функция, то она будет вызываться для каждого перемещаемого элемента на странице (передаваемого в функцию как первый аргумент), с целью применения пользовательского фильтра. Функция должна будет возвратить true, если элемент должен получить возможность быть «сброшенным». По умолчанию – *.
activeClass – если в этой опции определить имя класса, то он будет добавлен к целевому элементу в момент начала перемещения элемента, который должен быть «сброшен». По умолчанию – false.
addClasses – по умолчанию опция имеет значение true. Если установить false, то это предотвратит добавление класса с именем ui-droppable. Это может потребоваться в целях оптимизации при вызове .droppable() для нескольких сотен элементов.
greedy – если для этой опции установлено значение true, это предотвращает всплывание события, т.е. если «сброс» был выполнен во внутренний элемент, в то время как его родитель тоже может принимать «сбрасываемый» элемент, события drop для элемента-родителя не произойдет. По умолчанию опция имеет значение false.
hoverClass – если в этой опции определить имя класса, то он будет добавлен к целевому элементу в тот момент, когда перемещаемый элемент окажется над целевым элементом. По умолчанию – false.
scope – по умолчанию эта опция имеет значение ‘default’ и применяется в дополнение к опции accept. В опции может быть определено любое значение в виде строки и все перемещаемые элементы, с таким же значение соответствующей опции, будут иметь возможность «сброса» в целевой элемент.
tolerance – опция определяет, в какой момент необходимо произвести «сброс» элемента, при нахождении его над целевым элементом. По умолчанию имеет значение ‘intersect’, что определит «сброс» в тот момент, когда перемещаемый элемент перекрыл целевой как минимум на 50%. Другие возможные значения: fit – перемещаемый элемент должен полностью войти в целевой элемент; pointer – указатель мыши должен войти в целевой элемент; touch – перемещаемый элемент должен перекрыть целевой элемент на любую самую малую величину;

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

Опция activate – событие dropactivate происходит в момент начала движения перемещаемого элемента.
Опция deactivate – событие dropdeactivate происходит в момент окончания движения перемещаемого элемента, независимо от того, был ли он «сброшен» в целевой элемент или нет.
Опция over – событие dropover происходит в момент входа перемещаемого элемента в пределы целевого элемента.
Опция out – событие dropout происходит в момент выхода перемещаемого элемента за пределы целевого элемента.
Опция drop – событие drop происходит в момент «сброса» перемещаемого элемента в целевой элемент.

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

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

И теперь познакомимся с некоторыми из методов на примере:

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui){
      $("#result").append(event.type);
    }
  });
  $("#disable").click(function(){
    $("#droppable").droppable("disable");
  });
  $("#enable").click(function(){
    $("#droppable").droppable("enable");
  });
  $("#destroy").click(function(){
    $("#droppable").droppable("destroy");
  });
});

С кнопками, имеющими идентификаторы #disable, #enable и #destroy связаны обработчики события click, которые вызывают одноименные методы плагина.
Используя .droppable(«disable») можно временно удалить функциональность плагина из выбранного элемента, а с помощью .droppable(«enable») – восстановить ее. Использование .droppable(«destroy») приведет к окончательному удалению функциональности. Восстановить ее можно будет только перезагрузкой страницы.

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

jQuery UI – плагин Draggable

Gennady — Mon, 05 Oct 2009 11:27:16 +0000

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

А теперь посмотрите, насколько легко это реализовать….
Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Draggable и видим, что вместе с ним отметился чекбокс UI Core. Работа плагина Draggable зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку 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 и плагина Draggable (на самом деле для использования в примерах этой статьи там содержится еще и функциональность плагинов Droppable и Sortable).

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


  Drag me

Связываем функциональность плагина Draggable с выбранным элементом:

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

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

$(function(){
  $("#draggable").draggable({
    cursor: "move",
    revert: true,
    revertDuration: 3000
  });
});

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

addClasses – по умолчанию эта опция имеет значение true. Если установить значение false, то это предотвратит добавление класса ui-draggable к перемещаемым элементам. Это может потребоваться из соображений оптимизации при вызове .draggable() например, для нескольких сотен элементов.
appendTo – по умолчанию эта опция имеет значение ‘parent’. В ней можно передать селектор jQuery или элемент, который будет использован в качестве контейнера для объекта, представляющего перемещаемый элемент во все время его перемещения.
axis – вынуждает перетаскиваемый элемент перемещаться только по оси x или только по оси y. Значение по умолчанию false, что позволяет элементу перемещаться свободно.
cancel – по умолчанию эта опция имеет значение ‘input, option’. Если эти элементы находятся внутри перемещаемого элемента, то перемещаемый элемент нельзя захватить, при нахождении указателя мыши над определенными в этой опции элементами. Для выбора элементов используется селектор jQuery.
connectToSortable – разрешает «сброс» перемещаемых элементов в сортируемый (sortable) список. При этом «сброшенный» элемент становится частью списка. В качестве значения указывается селектор jQuery. По умолчанию имеет значение false. Для корректной работы необходимо дополнительно использовать опцию helper со значением ‘clone’.
containment – ограничивает перемещение внутри определенного элемента или области. В качестве значения может принимать селектор jQuery, элемент, строку или массив. Примеры возможных значений: ‘parent’, ‘document’, ‘window’, [x1, y1, x2, y2].
cursor – строка, в которой может быть передано css значение, определяющее значок для курсора в процессе перетаскивания элемента. По умолчанию – auto.
cursorAt – при перемещении элемента устанавливает курсор в определенную позицию. Например, значение {left: 5, top: 10}, при перемещении установит курсор в 10 пикселах от верхнего края и 5 пикселах от левого края.
delay – отсрочка начала времени перемещения элемента в миллисекундах. Опция используется для того, чтобы предотвратить нежелательное перемещение элемента во время случайного щелчка по нему. По умолчанию имеет значение 0.
distance – расстояние в пикселах, на которое должен переместиться курсор при удерживаемой в нажатом положении левой клавиши мыши прежде, чем начнется перемещение элемента. Опция используется для того, чтобы предотвратить нежелательное перемещение элемента во время случайного щелчка по нему. По умолчанию имеет значение 1.
grid – заставляет перетаскиваемый элемент перемещаться дискретно, по сетке, определяемой массивом передаваемых в опцию значений. Значение по умолчанию false, что позволяет элементу перемещаться свободно. Пример передаваемого значения – [10, 10].
handle – в этой опции можно определить элемент, находящийся внутри перемещаемого элемента, при нахождении над которым указателя мыши будет возможен захват перемещаемого элемента. Для выбора элементов можно использовать селектор jQuery.
helper – возможные значения опции – ‘original’, ‘clone’, Function. По умолчанию установлено значение ‘original’ – визуально наблюдается перемещении самого элемента. При использовании значения ‘clone’ перемещаться будет клон элемента, а сам элемент при этом остается на своей позиции. В опции можно определить функцию. Функция обязательно должна возвращать DOM элемент.
iframeFix – по умолчанию установлено значение false. Если установить значение true, будет предотвращен перехват события mousemove во время перемещения элемента при прохождении указателя мыши над iframe. В качестве значения может быть использован селектор jQuery – при этом предотвращение перехвата будет производиться только при прохождении указателя мыши над выбранными iframe. Опция бывает полезна при использовании совместно например с cursorAt.
opacity – устанавливает значение css-свойства opacity для элемента, находящегося в процессе перемещения. По умолчанию установлено значение false, что соответствует полной непрозрачности.
refreshPositions – по умолчанию используется значение false. При значении true позиция «сброса» элемента будет пересчитываться при каждом событии mousemove. Использовать с осторожностью! Такой подход может помочь создать очень динамичное приложение, но безусловно снизит производительность.
revert – значение по умолчанию – false. Если установить значение true, то элемент возвратится на свою исходную позицию после окончания перетаскивания. Также можно передать значения в виде строки. Возможные значения – ‘valid’ или ‘invalid’. Эти значения используются в случае, если перемещаемый элемент будет «сброшен» в какой-либо целевой элемент. При использовании значения ‘valid’ перемещаемый элемент возвратится в предыдущую позицию только в том случае, если был «сброшен» в целевой элемент. При использовании значения ‘invalid’ не возвратится в предыдущую позицию только в том случае, если он был «сброшен» в целевой элемент.
revertDuration – длительность эффекта возвращения элемента на исходную позицию, в миллисекундах. По умолчанию имеет значение 500. Опция игнорируется, если опция revert имеет значение false.
scope – значением этой опции является строка. По умолчанию установлено значение ‘default’. Перемещаемые элементы, имеющие в опции scope точно такое же значение, как и значение опции scope для элементов с функциональность droppable, будут приниматься этими элементами. По сути, дополняет опцию accept плагина Droppable.
scroll – по умолчанию установлено значение true – при перемещении элемента к краю области просмотра, она автоматически прокручивается бесконечно. Если установить значение false, эта возможность будет запрещена.
scrollSensitivity – число, определяющее расстояние в пикселах от края области просмотра, после которого она начинает прокручиваться. Расстояние определяется относительно указателя мыши, а не перемещаемого элемента. По умолчанию установлено значение 20.
scrollSpeed – число, определяющее скорость, с которой прокручивается область просмотра при приближении указателя мыши к ее краю на расстояние определенное в опции scrollSensitivity. По умолчанию установлено значение 20.
snap – по умолчанию установлено значение false. Если установить значение true (что эквивалентно ‘.ui-draggable’, поскольку значение может определяться также селектором jQuery), то перемещаемый элемент будет «прилипать» к краям выбранных элементов при прохождении около них.
snapMode – опция определяет, как именно перемещаемый элемент будет «прилипать» к выбранным элементам. Например, только к внешним или только к внутренним сторонам элементов. Возможные значения ‘inner’, ‘outer’, ‘both’. Любое значение игнорируется при snap: false. По умолчанию установлено значение ‘both’.
snapTolerance – расстояние в пикселах от перемещаемого элемента до выбранного, при котором произойдет «прилипание». По умолчанию установлено значение 20. Любое значение игнорируется при snap: false.
stack – объект, с помощью которого осуществляется автоматический контроль за свойством z-index определенной группы перемещаемых элементов, всегда помещая перемещаемый элемент поверх остальных. Значение свойства ‘group’ определяет jQuery селектор. Дополнительно можно определить свойство ‘min’, число ниже которого значение z-index опуститься не сможет. Например: $(‘.selector’).draggable({ stack: { group: ‘.selector’, min: 50 } });
zIndex – число, определяющее значение свойства z-index перемещаемого элемента. По умолчанию false.

Кроме возможности гибкой настройки плагина Draggable, есть возможность заставить его реагировать на некоторые события. Вот пример:

$(function(){
  $("#draggable").draggable({
    cursor: "move",
    stop: function(event, ui) {
  	  alert("Событие: " + event.type +
  	        "\n\ntop: " + ui.offset.top +
  	        " px\nleft: " + ui.offset.left +
  	        " px");
  	}
  });
});

Мы определили в опции stop callback-функцию. Функция принимает два аргумента – объекты event и ui. На простом примере показано, каким образом можно обратиться к свойствам этих объектов. В итоге, при окончании перемещения элемента, в окне предупреждения мы увидим информацию о типе наступившего события – dragstop, и текущее абсолютное положение элемента на странице.

Опций, связанных с событиями только три:
Опция start – событие dragstart наступает каждый раз при начале перемещения элемента.
Опция drag – событие drag наступает все время, пока элемент находится в процессе перемещения.
Опция stop – событие dragstop наступает каждый раз при завершении перемещения элемента.

Любая callback-функция, определенная в опциях start, drag или stop принимает два аргумента – event и ui. Объект event – это объект события, а объект ui – это специальный объект, в свойствах которого содержится следующая информация:
ui.helper – объект, характеризующий элемент, находящийся в процессе перемещения;
ui.position – объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента;

Нам осталось познакомиться с методами плагина Draggable. Но для этого нам понадобится добавить в HTML-разметку пару кнопок. Вот так:

В следующем примере продемонстрировано как получать и устанавливать значения опций плагина после его инициализации:

$(function(){
 $("#draggable").draggable({
  cursor: "move"
 });
 $("#getOption").click(function(){
  alert($("#draggable").draggable("option","grid"));
 });
 $("#setOption").click(function(){
  $("#draggable").draggable("option","grid",[50,50]);
 });
});

Мы связали с кнопками Get Option и Set Option событие click. При щелчке на кнопке Get Option мы вызовем метод option, название которого указываем в первом аргументе, а во втором аргументе передаем название опции, значение которой мы хотели бы получить. В итоге мы увидим окно предупреждения, в котором будет показано значение false, поскольку при инициализации эта опция не была определена, а по умолчанию она имеет именно такое значение.
Попробуйте перетаскивать элемент с помощью мыши – он будет плавно перемещаться в любых направлениях.

Сделаем щелчок на кнопке Set Option, снова вызывая метод option, но теперь мы передаем три аргумента. Первый – название метода, второй – название опции, значение которой мы хотим изменить, и третий аргумент – новое значение опции. Таким образом, передав опции grid значение [50,50] мы заставим элемент перемещаться дискретно, вдоль сетки с шагом 50х50 пикселей.

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

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

Как использовать виджет Accordion в качестве меню?

Gennady — Tue, 18 Aug 2009 07:27:35 +0000

Что такое Accordion наверное все знают, но если кто не знает, тому лучше сначала прочитать статью jQuery UI – виджет Accordion, в ней довольно подробно все рассказано. А сегодняшняя статья написана благодаря довольно многочисленным вопросам и моему обещанию рассказать, как, используя accordion, сделать на его основе меню для сайта. Естественно, что при переходе по ссылке открытая секция аккордеона должна оставаться открытой и активный пункт меню должен быть как-то выделен….

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

Итак, сначала мы делаем все в точности так же, как написано в статье jQuery UI – виджет Accordion. Т.е. подключаем необходимые файлы к HTML-странице. Здесь же внесем первое дополнение. Для того, чтобы иметь возможность запоминать состояние секций аккордеона, нам потребуется подключить еще один небольшой, но весьма полезный плагин – jQuery Cookie.

Поиметь свежую версию этого плагина можно на http://plugins.jquery.com/project/Cookie.

Теперь приведу пример HTML-разметки меню-аккордеона.


  Секция 1
  
    Пункт меню 1-1
    Пункт меню 1-2
    Пункт меню 1-3
  
  Секция 2
  
    Пункт меню 2-1
    Пункт меню 2-2
    Пункт меню 2-3
  
  Секция 3
  
    Пункт меню 3-1
    Пункт меню 3-2
    Пункт меню 3-3
  
  Секция 4
  
    Пункт меню 4-1
    Пункт меню 4-2
    Пункт меню 4-3

Ничего загадочного тут и вовсе нет. Что еще? Добавим немного стилей, чтобы выделять активный пункт меню. Например так:

a.open { color: #f00;}

т.е. в примере просто выделяем текст ссылки в меню красным цветом.

А теперь самое интересное – javascript-код:

И здесь ничего сложного! Отыскали нужный элемент по идентификатору #accordion, применили к нему возможности плагина. Из опций передали только одну, но в нашем случае необходимую опцию navigation, которой присвоили значение true. Это обеспечит нам открытие нужной секции аккордеона при переходе по ссылке.

На следующем шаге необходимо обрабатывать щелчок мышкой по пункту меню, чтобы поставить соответствующую куку. Что мы и делаем – находим все элементы a внутри li, внутри нашего аккордеона, связываем с ними событие click, по которому будет вызвана функция-обработчик.

Тут нам пригодятся возможности плагина jQuery Cookie. Мы устанавливаем куку с именем openItem, и значением, которое получаем из атрибута href той ссылки, по которой был совершен клик.

И последний шаг – при загрузке страницы мы должны прочитать куку (если она конечно есть) и в соответствии с ее значением «подсветить» нужный пункт меню. Делаем это – ищем нужный пункт меню выбирая элемент a внутри li аккордеона. Но не просто, а значение атрибута href которого соответствует значению, сохраненному в куке.

Если такая ссылка будет найдена, то с помощью метода addClass мы добавим ей класс open, что заставит ее «покраснеть».

Собственно это все, больше тут рассказывать не о чем…

jQuery UI – виджет Datepicker

Gennady — Thu, 02 Jul 2009 04:58:09 +0000

jQuery UI – надстройка над JavaScript-библиотекой jQuery. Она поможет создавать по настоящему интерактивные веб-приложения. Сегодня мы познакомимся с виджетом Datepicker.

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

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

Сначала мы подключили файл стилей одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки и файл, в котором заключена функциональность UI Core и виджета Datepicker. И наконец, последний файл обеспечивает локализацию виджета для нужного языка. Найти его можно в полученном архиве, в папке /development-bundle/ui/i18n

Из разметки потребуется минимум – просто элемент input:

Кстати, если Вы хотите, чтобы календарь не появлялся по щелчку в элементе input, а был всегда виден – просто используйте обычный элемент div:

Связываем виджет Datepicker с нашей HTML-разметкой:

Отлично! С настройками по умолчанию все понятно, но нам хотелось бы иметь календарь на русском языке (или, к примеру, на украинском). Давайте это сделаем:

Приведенный в примере код обеспечит поддержку русского языка, а если Вы замените ru на uk (интересно, почему не на ua?) то получите календарь уже на украинском языке.

Но вероятно Вам понадобится изменить какие-то настройки, чтобы использовать Datepicker для решения своих задач. Давайте попробуем это сделать.

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

altField – jQuery селектор для другого поля, которое должно быть обновлено, как только будет выбрана дата в Datepicker. Формат даты в этом дополнительном поле устанавливается с помощью опции altFormat.

altFormat – формат даты, который будет использоваться для опции altField. Эти настройки позволяют показывать пользователю один формат даты, тогда как для вычислений может использоваться другой формат. Полный список возможных форматов можно найти на
http://docs.jquery.com/UI/Datepicker/formatDate

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

buttonImage – адрес картинки, которая будет отображаться на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’. Если был определен текст в опции buttonText, он становится значением атрибута alt картинки.

buttonImageOnly – если для этой опции установить значение true, то картинка, адрес которой определен в опции buttonImage, будет отображаться не на кнопке, а сама по себе.

buttonText – текст, отображающийся на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’.

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

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

closeText – эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опции closeText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

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

currentText – эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опция currentText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

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

http://docs.jquery.com/UI/Datepicker/formatDate

dayNames – массив, содержащий полные названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

dayNamesMin – массив, содержащий 2-хбуквенную аббревиатуру названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

dayNamesShort – массив, содержащий 3-хбуквенную аббревиатуру названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

defaultDate – устанавливает дату, которая будет подсвечена при первом открытии, если поле выбора даты пустое. Опция может быть определена через объект Date, либо как количество дней от текущего для (например +7 или -15), либо как строка значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’), и наконец как null для текущего дня.

duration – длительность эффекта анимации при открытии (закрытии) календаря. Может принимать значения в виде строки – ‘fast’, ‘normal’ (по умолчанию), ’slow’ или в виде числа в миллисекундах. Если передать пустую строку, календарь будет открываться и закрываться без эффекта анимации.

firstDay – опция устанавливает первый день недели: воскресенье – 0, понедельник – 1,… Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

gotoCurrent – если установить значение опции в true, то кнопка «Сегодня» (доступная при showButtonPanel: true) будет указывать на выбранную дату взамен текущей.

hideIfNoPrevNext – если Вы ограничиваете диапазон доступных дат с помощью опций minDate и maxDate, то при достижении края диапазона, стрелки «Назад» и «Вперед» становятся неактивными. Но их можно и совсем скрывать, передав в опции hideIfNoPrevNext значение true.

isRTL – для этой опции необходимо установить значение true, если используется язык с написанием справа налево. Определяется в файле локализации, если он используется.

maxDate – устанавливает максимальную возможную для выбора дату через объект Date или как число дней от текущего (например +7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1y +1m’), или null для отсутствия ограничения.

minDate – устанавливает минимальную возможную для выбора дату через объект Date или как число дней от текущего (например -7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘-1y -1m’), или null для отсутствия ограничения.

monthNames – массив, содержащий полные названия месяцев. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

monthNamesShort – массив, содержащий 3-хбуквенную аббревиатуру названия месяцев. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

navigationAsDateFormat – по умолчанию опция имеет значение false. Если установить значение true, функция dateFormat будет примерена к значениям опций nextText, prevText и currentText с тем, чтобы отображать при навигации, например предыдущее и следующее названия месяцев.

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

numberOfMonths – эта опция определяет, сколько месяцев сразу нужно показать. Значение опции может быть просто числом или массивом, состоящим из двух элементов, которые определяют соответственно количество строк и столбцов. Например, значение [2, 3] отобразит календарь в две строки по три месяца.

prevText – текст, который отображается в качестве ссылки на предыдущий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.

shortYearCutoff – значение по умолчанию +10. Эта опция используется только при условии использования в dateFormat двузначной записи года и выполняет роль компенсатора для определения века. Если значение передано в виде числа, используется как есть. Если значение передано в виде строки, конвертируется в число и добавляется к текущему значению года. После того как значение определено, все данные, выступающие в качестве значения года, и меньшие и равные ему считаются годами текущего века. Значения большие – считаются годами предыдущего века.

showAnim – определяет тип анимации при открывании календаря. По умолчанию имеет значение show (при закрывании будет использован hide). Без подключения дополнительных файлов могут быть использованы эффекты ’slideDown’ и ‘fadeIn’ (при закрывании соответственно будут использоваться эффекты ’slideUp’ и ‘fadeOut’). Так же возможно использование любых эффектов jQuery UI Effects при условии их дополнительного подключения.

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

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

showMonthAfterYear – по умолчанию используется значение false и в заголовке название месяца идет перед годом. При использовании значения true название месяца будет следовать за годом.

showOn – по умолчанию эта опция имеет значение ‘focus’, что заставляет календарь открываться при щелчке в поле ввода. Другие возможные значения – ‘button’ и ‘both’. Рядом с полем ввода появится кнопка. В первом случае календарь будет открываться по щелчку на кнопке, а во втором случае как по щелчку на кнопке, таки при получении фокуса полем ввода.

showOptions – если Вы используете один из эффектов jQuery UI Effects, с помощью этой опции ему можно передать дополнительные настройки. Например: showOptions: {direction: ‘up’}.

showOtherMonths – по умолчанию имеет значение false. Если использовать true, на календаре будут отображаться дни предыдущего и/или следующего месяца без возможности их выбора.

stepMonths – определяет насколько месяцев сдвигать календарь при щелчке по ссылкам Следующий и Предыдущий. По умолчанию – 1.

yearRange – управление диапазоном лет, отображаемых в выпадающем списке (при использовании опции changeYear). По умолчанию используется значение ‘-10:+10′ относительно текущего года. Возможно использование и абсолютного формата, например ‘1980:2025′.

Перейдем к знакомству с событиями виджета Datepicker:

В примере мы передаем виджету сразу три опции, в которых определены callback-функции. В опции beforeShow определена функция, которая будет вызвана перед отображением календаря. С помощью css-свойства background-color, эта функция установит желтый цвет фона для элемента input. В опции onSelect определена функция, которая будет вызвана в момент выбора какой-либо даты в календаре и передаст пустое значение css-свойству background-color, возвратив его в начальное состояние. И, наконец, в опции onClose определена функция, которая вызывается при закрытии календаря, если никакое значение выбрано не было. Она тоже вернет css-свойство background-color в его начальное состояние.

Но, обратите внимание, все callback-функции принимают некоторые аргументы. С ними стоит познакомиться немного подробнее.

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

В опции onSelect функция принимает два аргумента. Первый аргумент dateText – строка, представляющая собой тот текст, который появится и в элементе input. Второй аргумент – объект datepicker. В том же примере показано, как можно обратиться к некоторым из свойств этого объекта.

Функция, определенная в опции onClose принимает те же два аргумента, что и функция из опции onSelect.

И еще одно важное обстоятельство для callback-функций, определенных в опциях onSelect и onClose – в контексте этих функций ссылка this указывает на объект, характеризующий элемент input.

Ниже приведены описания всех возможных событий для виджета Datepicker.

beforeShow – здесь можно определить функцию, которая будет вызываться перед открытием календаря. Функция принимает в качестве аргумента объект, характеризующий текстовое поле ввода с которым работает виджет.

beforeShowDay – в этой опции можно определить пользовательскую функцию, которая будет принимать в качестве аргумента выбранную дату. Функция должна возвратить массив, где элемент с индексом [0] – true или false показывает, возможен или нет выбор этой даты. Элемент с индексом [1] содержит имя класса (классов) для отображения даты. Элемент с индексом [2] (опционально) – текст всплывающей подсказки для даты. Функция будет вызываться для каждой даты в календаре в момент наведения указателя мыши.

onChangeMonthYear – здесь можно определить функцию, которая будет вызываться при смене месяца или года в календаре. Функция принимает три аргумента. Первые два аргумента – это новые значения года и месяца, третий аргумент – объект datepicker.

onClose – в этой опции определяется функция, которая будет вызвана, когда календарь был закрыт без выбора какой-либо даты.

onSelect – в этой опции определяется функция, которая будет вызвана, когда в календаре выбрана какая-либо дата.

Теперь можно поговорить о методах виджета Datepicker. Давайте добавим в наш HTML-код обыкновенную ссылку:

Открыть в диалоге

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

В приведенном примере мы демонстрирует работу метода dialog. Мы вызываем этот метод при щелчке на ссылке Открыть в диалоге. Первый аргумент – это название метода, второй аргумент textDate – дата на которой по умолчанию будет открываться календарь. Остальные три аргумента необязательные, но мы познакомимся и с ними. В аргументе onSelect можно передать callback-функцию, которая будет вызвана при выборе конкретной даты в календаре. В аргументе settings можно передать объект с новыми настройками виджета, которые будут применены к календарю, который будет открыт в диалоговом окне. И, наконец, последний аргумент pos – здесь можно задать координаты, в которых будет появляться календарь. Координаты можно задавать числами, но если передать в функцию, вызываемую по щелчку на ссылке объект event, то можно будет определить координаты, используя свойства объекта event. Например, использовать event.clientX и event.clientY.

Далее приведены описания всех методов виджета Datepicker.

destroy – .datepicker(‘destroy’) полностью удаляет всю функциональность виджета Datepicker. Возвращает элементы в состояние, предшествующее инициализации.

disable – .datepicker(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .datepicker(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .datepicker(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

dialog – .datepicker(‘dialog’, dateText, [onSelect], [settings], [pos]) открывает виджет Datepicker в режиме диалогового окна. В аргументе dateText передается дата, на которой должен быть открыт календарь. Остальные аргументы необязательные. В аргументе onSelect можно передать функцию, которая будет вызвана в момент выбора даты в календаре, в аргументе settings можно передать объект с новыми настройками виджета, в аргументе pos – координаты, в которых будет открыто диалоговое окно. Здесь можно использовать события мыши, чтобы определить координаты.

isDisabled – .datepicker(‘isDisabled’) метод возвращает значение true, если к виджету был применен метод disable и false в противном случае.

hide – .datepicker(‘hide’, [speed]) скрывает ранее открытый календарь.

show – .datepicker(’show’) открывает календарь.

getDate – .datepicker(‘getDate’) метод возвращает дату, выбранную в календаре.

setDate – .datepicker(’setDate’, date) метод позволяет установить дату в календаре. Значением аргумента date может быть число, определяющее количество дней от текущей даты (например: +7 или -14) или строка, определяющая период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’). Значение null установит текущую дату.

Вот и все. Разве что сказать, что для управления календарем можно использовать горячие клавиши:
- page up/down – предыдущий/следующий месяц;
- ctrl+page up/down – предыдущий/следующий год;
-ctrl+home – выбор текущего месяца или открытие календаря после того как он был закрыт;
- ctrl+left/right – предыдущий/следующий день;
- ctrl+up/down – предыдущая/следующая неделя;
- enter – выбор отмеченной даты;
- ctrl+end – закрытие и удаление даты из поля ввода;
- escape – закрытие календаря без выбора даты;

jQuery UI – виджет Tabs

Gennady — Wed, 01 Jul 2009 05:00:40 +0000

jQuery UI – надстройка над JavaScript-библиотекой jQuery. Она поможет создавать по настоящему интерактивные веб-приложения. Сегодня мы познакомимся с виджетом Tabs.

Виджет Tabs помогает разделить информационное наполнение между несколькими вкладками. Это может быть полезно при дефиците свободного места на веб-странице. Информационное наполнение вкладок может быть загружено с помощью ajax-запроса.

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

Сначала мы подключили файл стилевого оформления виджета, затем файл библиотеки jQuery. В третьем подключенном файле объединена функциональность ядра UI и виджета Tabs. Четвертый файл понадобится в том случае, если Вам необходимо использовать cookies. Найти его можно в папке архива development-bundle/external/cookie/.
Дальше знакомимся с требованиями виджета Tabs к HTML-разметке.


  
    Nunc tincidunt
    Proin dolor
    Aenean lacinia
  
  
    Tab 1 content
  
  
    Tab 2 content
  
  
    Tab 3 content

Ярлыками вкладок являются элементы li, в атрибутах href которых содержится идентификаторы соответствующих им элементов div, которые представляют собой область информационного наполнения вкладки. Внутри элементов div содержимое может быть практически любым. Ну и все это заключено в элемент div с идентификатором #tabs.

Теперь привяжем функциональность виджета к HTML-разметке.

Все. С настройками по умолчанию виджет уже работает. Теперь будем передавать ему свои настройки:

В этом примере мы заставили виджет Tabs переключать вкладки по событию mouseover (взамен установленного по умолчанию click) и открывать при инициализации третью вкладку (отсчет ведется от 0).

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

и собственно пример установки cookies

Мы установили cookie с именем startTab сроком на 7 дней. Щелчок по кнопке с идентификатором getCookie приведет к тому, что в окне предупреждения мы увидим имя установленной cookie и срок, на который она была установлена. Не забывайте, что для использования этой возможности необходимо подключать дополнительный файл плагина jQuery Cookie.

Мы научились передавать виджету различные опции, а их описания приведены ниже:

ajaxOptions – опции ajax-запроса, которые используются для загрузки удаленного содержимого в область информационного наполнения. По умолчанию используется значение null.

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

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

cookie – запоминает последнюю выбранную вкладку в cookie. В дальнейшем используется для определения вкладки, открываемой по умолчанию (если не используется опция selected). Требует подключения плагина cookie. Возможно присвоение имени cookie через опцию name.

disabled – массив, содержащий индексы вкладок (отсчет ведется от 0), которые должны быть недоступными при инициализации виджета. Например, disabled: [1, 2] сделает недоступными вторую и третью вкладки.

event – тип события, которое используется для переключения вкладок. По умолчанию используется значение ‘click’. Второе возможное значение ‘mouseover’.

fx – устанавливает анимационные эффекты при открытии/закрытии вкладок. Например: fx: { opacity: «toggle», duration: «slow» }

panelTemplate – HTML-шаблон из которого создается новая область информационного наполнения вкладки в случае создания ее с использованием метода add или при создании вкладки «на лету» с использованием ajax-запроса. По умолчанию имеет значение ‘

’.

selected – индекс вкладки, (отсчет ведется от 0) которая должна быть открыта при инициализации виджета. По умолчанию используется значение 0, т.е. открывается первая вкладка. Чтобы сделать невыбранными все вкладки, надо использовать значение -1.

spinner – HTML-код, указанный в этой строке, отображается на ярлыке вкладки во время загрузки удаленного содержимого в область информационного наполнения. Если передать пустую строку, эта возможность будет деактивирована. По умолчанию используется Loading.

tabTemplate – HTML-шаблон из которого создаются новые ярлыки вкладок в случае создания их с использованием метода add. #{href} and #{label} заменяются url’ом и названием вкладки, переданными в аргументах метода add. По умолчанию имеет значение ‘

#{label}

’.

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

Мы определили в опции select callback-функцию, которая будет вызываться в момент наступления события tabsselect, т.е. в тот момент, когда был совершен щелчок по ярлыку вкладки. Callback-функция принимает два аргумента. Первый аргумент – это объект event, второй аргумент – специальный объект ui. Организовав доступ к свойствам этих объектов, можно получить довольно полезную информацию (мы выводим ее в окне предупреждения).

ui.tab – ссылка на активированную в настоящий момент вкладку;
ui.panel – ссылка на элемент, в котором заключено информационное наполнение активированной вкладки ;
ui.index – индекс активированной вкладки (отсчет ведется от 0);

Ниже приведены описания событий виджета Tabs и названия опций, в которых можно определить callback-функции, вызываемые при наступлении события.

select – событие tabsselect происходит в момент щелчка по ярлыку вкладки (при наведении указателя мыши на вкладку, если используется опция event: ‘mouseover’). При щелчке на ярлыке активной вкладки ничего не происходит.

load – событие tabsload происходит, когда в область информационного наполнения вкладки было загружено содержимое из внешнего файла.

show – событие tabsshow происходит в момент отображения содержимого вкладки.

add – событие tabsadd происходит каждый раз, когда добавлена новая вкладка.

remove – событие tabsremove происходит каждый раз, когда удалена какая-либо вкладка.

enable – событие tabsenable происходит в момент, когда ранее недоступная вкладка становится доступной.

disable – событие tabsdisable происходит в момент, когда вкладка становится недоступной.

Осталось разобраться с методами виджета Tabs. Для этого добавим еще пару кнопок в HTML-разметку:

и пример javascript-кода:

При щелчке на кнопке с идентификатором Start Rotate будет применен метод rotate, который заставит виджет самостоятельно переключать вкладки каждые три секунды. При щелчке на кнопке с идентификатором Stop Rotate автоматическое переключение вкладок будет остановлено.

Далее приведены описания всех доступных методов виджета Tabs.

destroy – .tabs(‘destroy’) полностью удаляет всю функциональность виджета Tabs. Возвращает элементы в состояние, предшествующее инициализации.

disable – .tabs(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .tabs(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .tabs(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

add – .tabs(‘add’, url, label, [index]) метод добавляет новую вкладку. Второй аргумент содержит либо идентификатор создаваемой вкладки, (см. требования к разметке) либо является полным url (относительным или абсолютным, но без поддержки кросс-доменной загрузки) при создании вкладки с использованием ajax. Третий аргумент – название вкладки, отображаемое на ее ярлыке. Четвертый – индекс создаваемой вкладки (позиции отсчитываются от 0).

remove – .tabs(‘remove’, index ) удаляет вкладку. Второй аргумент – индекс удаляемой вкладки (позиции отсчитываются от 0).

enable – .tabs(‘enable’, index) делает доступной ранее недоступную вкладку. Чтобы сделать доступными одновременно несколько вкладок сделайте так: $(‘#tabs’).data(‘disabled.tabs’, [ ]);

disable – .tabs(‘disable’, index) делает вкладку недоступной. Активная вкладка не может быть сделана недоступной. Чтобы сделать недоступными одновременно несколько вкладок сделайте так: $(‘#tabs’).data(‘disabled.tabs’, [1, 2, 3]);

select – .tabs(’select’, index) метод позволяет выбрать вкладку так, как будто был сделан щелчок по ее ярлыку. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0). Он же может быть идентификатором вкладки (см. требования к разметке).

load – .tabs(‘load’, index) программно перезагружает содержимое вкладки, используя ajax-запрос. Этот метод всегда загружает содержимое, даже если опция cache имеет значение true. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0).

url – .tabs(‘url’, index, url) изменяет url, откуда с помощью ajax-запроса будет загружаться содержимое. Второй аргумент – индекс нужной вкладки (позиции отсчитываются от 0). Указанный в третьем аргументе url будет использоваться и для дальнейших загрузок.

length – .tabs(‘length’) метод просто возвращает количество вкладок.

abort – .tabs(‘abort’) метод завершает все выполняющиеся ajax-запросы и анимацию.

rotate – .tabs(‘rotate’, ms, [continuing]) метод устанавливает автоматический перебор всех вкладок. Второй аргумент – количество миллисекунд, в течение которых очередная вкладка будет активной. Чтобы остановить перебор вкладок во втором аргументе необходимо передать 0 или null. Третий аргумент определяет логику при выборе вкладки пользователем. Значение true – перебор вкладок будет продолжен. По умолчанию используется false.

Все? Пожалуй, нет. Как можно обойтись без примера, где информационное наполнение загружается с использованием ajax-запросов, верно?

Сделать это несложно, но придется немного поменять HTML-разметку:


  
    Content 1
    Content 2
    Content 3
    Content 4
  
  
    4. Информационное наполнение для вкладки №4.

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

Конечно, надо создать еще и файлы, из которых будет загружаться информация. В нашем примере – это ajax_1.html, ajax_2.html и ajax_3.html. А больше ничего и не потребуется. Что касается javascript-кода, можно использовать даже настройки по умолчанию:

Все. Про стилевое оформление не пишу – планирую отдельную статью про это сразу для всех виджетов.

jQuery UI – виджет Slider

Gennady — Tue, 30 Jun 2009 04:56:32 +0000

jQuery UI – надстройка над JavaScript-библиотекой jQuery. Она поможет создавать по настоящему интерактивные веб-приложения. Сегодня мы познакомимся с виджетом Slider.

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

Мы подключили файл стилевого оформления виджета и файл библиотеки jQuery. В третьем файле объединена функциональность ядра UI и виджета Slider. Дальше познакомимся с требованиями к HTML-разметке.

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

Теперь привязываем функциональность виджета к HTML-разметке. Это тоже проще простого:

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

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

Очень просто. Главное, знать список опций и их возможности. Ниже как раз и приведен такой список:

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

max – максимальное значение шкалы. По умолчанию – 100.

min – минимальное значение шкалы. По умолчанию – 0.

orientation – определяет расположение виджета. Может принимать значения ‘horizontal’ и ‘vertical’. По умолчанию имеет значение ‘auto’. При значении по умолчанию обычно верно определяет нужную ориентацию. Если этого не происходит, можно указать ориентацию принудительно.

range – по умолчанию эта опция имеет значение false. Если установить значение true и при этом используется два бегунка, то между ними шкала будет отображаться иным стилем, нежели основная. Два других возможных значения ‘min’ и ‘max’ при одном бегунке. В первом случае иным стилем будет отображаться часть шкалы слева (или ниже) от бегунка, во втором случае – справа (или выше).

step – позволяет задать шаг изменения значений шкалы между минимальным и максимальным значением. Разность между максимальным и минимальным значением шкалы должна без остатка делиться на значение этой опции. Значение по умолчанию – 1.

value – определяет положение бегунка. При использовании более чем одного бегунка, определяет положение первого. Значение по умолчанию – 0.

values – массив, в котором могут быть переданы значения, определяющие положения бегунков на шкале. Если при этом опция range имеет значение true, длина массива должна быть равна 2. Значение по умолчанию – null.

Разобравшись с настройками виджета, перейдем к знакомству с теми событиями, на которые может реагировать слайдер. Как обычно – на простом примере:

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

ui.value – текущее значение опции value при использовании одного бегунка (при использовании двух и более бегунков – положение первого бегунка);
ui.values – текущее значение опции values при использовании двух и более бегунков;

А в следующем примере показано, каким образом можно получить доступ к свойствам объекта ui.

Далее приведены описания событий виджета Slider и названия опций, в которых можно определять callback-функции, вызываемые при наступлении соответствующих событий.

Опция start – событие slidestart происходит в момент начала перемещения бегунка.

Опция slide – событие slide происходит постоянно во все время перемещения бегунка.

Опция change – событие slidechange происходит при окончании перемещения бегунка или если положение бегунка было изменено программно.

Опция stop – событие slidestop происходит в момент окончания перемещения бегунка.

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

и javascript-код:

При инициализации виджета, мы использовали опции, с помощью которых ограничили диапазон значений от 10 до 200 и установили начальные значения двух ползунков. Для первого – 20, а для второго – 60. Затем мы связали с кнопками событие click. Если теперь щелкнуть по кнопке с надписью Get Option мы увидим окно предупреждения, в котором будет выведены значения, характеризующие текущие значения ползунков. При щелчке по кнопке с надписью Set Option для первого ползунка будет установлено значение 15, а для второго – 195. Если теперь щелкнуть по этой кнопке, то Ваших глазах ползунки изменят свое положение.

Ниже приведены описания всех доступных методов:

destroy – .slider(‘destroy’) полностью удаляет всю функциональность виджета Slider. Возвращает элементы в состояние, предшествующее инициализации.

disable – .slider(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .slider(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .slider(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

value – .slider(‘value’, [value]) с помощью этого метода можно получить или установить значение бегунка (при использовании единственного бегунка).

values – .slider(‘values’, index, [value]) с помощью этого метода можно получить или установить значения бегунков (при использовании двух и более бегунков).

Ну и достаточно… Мы узнали почти все. За исключением приемов стилевого оформления виджета Slider. Но к этой теме я планирую обязательно вернуться.