На этом шаге мы рассмотрим работу со списком и стилизацию элементов.
Материал этого шага базируется на 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' });
На следующем шаге мы закончим изучение этого вопроса.