На этом шаге мы рассмотрим работу со списком и стилизацию элементов.

    Материал этого шага базируется на http://it-route.ru/jeditable_manual_ru/.

    Можно использовать раскрывающийся список, установив значение параметра type в значение select. Список строится из массива, закодированного в формате JSON. Этот массив может быть взят из параметра data или получен с внешнего источника, указанного в loadurl. Значение ключей массива — это значения тэгов <option>. Значение элементов массива — элементы списка.

    Закодированный массив в формате JSON выглядит примерно так:

{'Classic Rock':'Classic Rock',
  'Hard Rock':'Hard Rock',
  'Blues Rock':'Blues Rock', 
  'selected': 'Hard Rock'}

    Обратите внимание на последний элемент. Он специальный — указывает Jeditable, какой параметр по умолчанию указывается как выбранный. Давайте рассмотрим два простых примера. В первом примере мы рассмотрим передачу данных через параметр data.

$(".editable_select").editable("../cgi-bin/echo.php", { 
    indicator : '<img src="images/loading.gif">',
    data   : "{'Classic Rock':'Classic Rock','Hard Rock':'Hard Rock',
             'Blues Rock':'Blues Rock', 'selected': 'Hard Rock'}",
    type   : "select",
    submit : "OK"
  });

Рис.1. Результат работы скрипта

    А что если Вам необходимо получать динамический список? Тогда можно получить его с внешнего url. Предположим, что мы имеем такой скрипт PHP:

<?php
$array['C_Rock'] = 'Classic Rock';
$array['H_Rock'] = 'Hard Rock';
$array['B_Rock'] = 'Blues Rock';
$array['selected'] = 'H_Rock';
print json_encode($array);
?>

    Затем вместо параметра data воспользуемся параметром loadurl:

$(".editable_select").editable("../cgi-bin/echo.php", { 
    indicator : '<img src="images/loading.gif">',
    loadurl : "http://www.example.com/json.php",
    type   : "select",
    submit : "OK",
    style  : "inherit"
  });

    Но некоторые обеспокоены лишними запросами к серверу. Есть еще один вариант: объединить два способа. Давайте выведем массив прямо в код JavaScript:

<!--?php  
$array['C_Rock'] = 'Classic Rock';
$array['H_Rock'] = 'Hard Rock';
$array['B_Rock'] = 'Blues Rock';
$array['selected'] = 'H_Rock';
?-->

$('.editable').editable('../cgi-bin/echo.php', {
     data : '<!--?php print  json_encode($array); ?-->',
     type   : 'select',
     submit : 'OK'
 });

    Вы можете стилизовать элемент ввода, используя параметры cssclass и style. Параметр cssclass предполагает наличие класса в файле CSS. Параметр style может содержать любое валидное определение стиля. Вот примеры:

$('.editable').editable('http://www.example.com/save.php', {
     cssclass : 'someclass'
 });
 
 $('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type    : 'select',
     submit  : 'OK',
     style   : 'display: inline'
 });

    Оба параметра могут иметь специальное значение inherit. Установленное в параметре cssclass, оно указывает форме наследовать класс родительского элемента. Установленное в параметре style, оно указывает форме наследовать одноименный атрибут (style) родительского элемента.

    Следующий пример сделает из слова ipsum раскрывающийся список. Этот список унаследует стиль от элемента <span>. Это будет display: inline.

Lorem <span style="display: inline;">ipsum</span> dolor sit amet.

$('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type    : 'select',
     submit  : 'OK',
     style   : 'inherit'
 });

    На следующем шаге мы закончим изучение этого вопроса.

Предыдущий шаг Содержание Следующий шаг