Создание нового стиля виджета
Вы можете создать собственный индивидуальный стиль для виджета, если вы желаете настроить его внешний вид.
Предположим, вы захотели добавить пользовательский стиль в виджет Slideshow. Просто перейдите в папку /widgets/slideshow/styles, скопируйте существующий стиль, который вы хотели бы настроить и укажите ему уникальное имя.
В менеджере Widgetkit вы должны иметь возможность для выбора вновь созданного стиля.
А теперь детально рассмотрим файлы template.php, style.css, rtl.css и config.xml, расположенные в папке с новым стилем.
Настройка стиля
Файл config.xml расширяет стандартную конфигурацию виджета. Он определяет название стиля, доступное содержимое полей для стиля и все пользовательские настройки стиля.
Определите имя
Во-первых, укажите для нового стиля уникальное имя. В данном случае мы назовем его my_style.
<?xml version="1.0" encoding="utf-8"?>
<style name="my_style" label="My Style">
...
</style>
Определите содержание полей
<?xml version="1.0" encoding="utf-8"?>
<style name="my_style" label="My Style">
<fields>
<field type="title" name="title" label="Title" description="" />
<field type="html" name="content" label="Content" description="" />
<field type="textarea" name="caption" label="Caption" description="" class="small" />
</fields>
</style>
Каждое поле имеет определенный тип, например текстовый или текстовая область(textarea). Далее приведен список самых полезных из этих типов:
- title - Это специальное поле для ввода, которое всегда должно использоваться для названия элемента.
- html - Это текстовая область для отображения HTML разметкиЮ которая загружает WYSIWIG редактрор, если таковой доступен.
- textarea - Простая текстовая область.
- text - Просто поле для ввода.
- location - Позволяет вам вводить координаты для отображения карт Google.
Определите новые параметры
<?xml version="1.0" encoding="utf-8"?>
<style name="my_style" label="My Style">
<fields>
<field type="title" name="title" label="Title" description="" />
<field type="html" name="content" label="Content" description="" />
<field type="textarea" name="caption" label="Caption" description="" class="small" /></fields>
</fields>
<settings>
<setting name="captions" label="Captions" type="radio" default="1">
<option value="1">Show</option>
<option value="0">Hide</option>
</setting>
</settings>
</style>
- list - простое окно для выбора из перечня заданных опций
- radio - переключатели, характеризующие выбор одного из двух вариантов параметра
- text - простое поле ввода
Шаблоны
Файл template.php содержит всю логику и генерирует разметку для вашего стиля. Вы можете получить доступ ко всем полям и настройкам, которые вы определили в файле config.xml.
Так как же получить доступ к этим полям и настройкам? Вы можете ознакомиться с примером кода, который должен делать это.
<?php $widget_id = $widget->id.'-'.uniqid();
$settings = $widget->settings; ?>
<div id="slideshow-<?php echo $widget_id; ?>" class="mystyle">
<?php foreach ($widget->items as $key => $item) : ?>
<article>
<?php echo $item['content']; ?>
<?php if($settings['captions']): ?>
<div class="caption"><?php echo $item["caption"];?></div>
<?php endif;?>
</article>
<?php endforeach; ?>
</div>
<script type="text/x-widgetkit" data-widget="slideshow" data-element="#slideshow-<?php echo $widget_id; ?>">
<?php echo json_encode($settings); ?>
</script>
Вы всегда будете получать доступ к объекту $widget, который содержит всю необходимую информацию для генерации разметки.
Стиль css
Файлы style.css и rtl.css будут загружаться Widgetkit-ом, если они существуют в папке стиля. В файле style.css вы можете определять собственные правила CSS для HTML разметки вашего стиля. Файл rtl.css должен содержать все резервные определения параметров для правосторонних языков (языки типа "справа-налево").
Вы должны всегда давать уникальные имена классам в вашем пользовательском стиле, например как указано ниже:
<div class="mystyle"> ... <div>
Таким образом, вы можете переопределять стили для элементов виджета специально для вашего пользовательского стиля виджета без образования конфликта с другими стилями одно и того же виджета.