Индивидуальный шаблон страницы – убираем сайдбар. Sidebar в автозагрузке: что это за процесс, можно ли его отключить
Сайдбары хороши в двух случаях: если на них расположено что-то настолько важное, что они должны всегда быть перед глазами (взять, к примеру, любой почтовый клиент, да хотя бы и Gmail) или если нужно иметь возможность это самое важное спрятать для экономии места (опять же, как в Gmail, но уже в мобильной версии). Браться за создание сайдбаров с нуля – задача не для средних умов, да и вообще бессмысленно. Для такой задачи лучше употребить соответствующий фреймворк. Об одном из таких примеров мы сегодня и поговорим.
Коротко о Webix Прежде чем перейти непосредственно к коду, давайте обмолвимся коротко, что это за библиотека такая. Итак, Webix представляет из себя библиотеку UI компонентов разной сложности, от простой кнопки до Spreadsheet Widget , с помощью которого можно создавать онлайн таблицы в стиле Excel. Помимо собственно компонентов, в наличии механизм обработки событий , поддержка оффлайн-режима , интеграция с jQuery, AngularJS, Vue.js, Backbone.js, online инструменты: Skin builder , Form builder . Заявлена совместимость с Angular 2.Nuget install Webix
Или если вы предпочитаете Bower :
Bower install webix
Все вышеперечисленное относится непосредственно к Webix. Для того, чтобы получить возможность создавать сайдбары, нам понадобится еще парочка файлов . Доступ к ним же через CDN:
Сайдбар на примере e-mail клиента Поскольку мы уже заговорили об e-mail клиентах, не будем отступать от этой темы и создадим в качестве примера именно такое приложение. С помощью компонента DataTable я взял вот такой вот просмотрщик имейлов, к которому мы и будем добавлять сайдбар:
Поскольку обзор DataTable не входит в наши планы, подробно останавливаться на нем я не буду, исходный код примера можно будет посмотреть ниже.
Начнем с основ. Для того, чтобы добавить в приложение определенный компонент, в Webix используется свойство view . Например, мы хотим создать кнопку:
View: "button"
Для инициализации Webix-приложения нам понадобится следующий код:
// опционально. код выполнится после загрузки страницы
webix.ready(function(){
// конструктор
webix.ui({
// описание приложения
view: "button",
});
});
Код выше создаст страницу, состоящую из одной кнопки. Поскольку наше приложение состоит из нескольких компонентов, нам нужно задуматься о создании лэйаута. Для этого используются свойства rows
и cols
, которые служат для создания рядов и колонок.
Например:
Webix.ui({
cols: [
{ view: "button"},
{ view: "button"}
]
});
Создаст уже две колонки, по одной кнопке в каждой. Комбинируя эти свойства, добавляя вложенные колонки и ряды, меняя их размеры, например, с помощью свойства gravity
можно создать лэйаут необходимой сложности.
Теперь мы можем перейти к сайдбару. Он основан на компоненте Tree и также использует формат JSON для описания своей структуры. Для удобства лучше хранить такое описание в отдельной переменной.
Наш сайдбар будет состоять из следующих пунктов меню:
Var menu_data = [
{id: "inbox", icon: "envelope", value: "Inbox"},
{ /* прочие пункты */ },
{id: "tags", icon: "tags", value:"Tags", data:[
{ id: "friends", value: "Friends"},
{ id: "work", value: "Work"},
{ id: "news", value: "News"}
]}
],
Каждый элемент должен иметь уникальный ID. value
определяет, каким будет текст пункта меню, а icon
– иконку. Webix использует набор иконок Font Awesome . Обратите внимание на пункт Tags. Он содержит вложенные подменю, которые будут открываться по клику.
Итак, суммируя все вышесказанное, мы можем перейти к нашему приложению:
Webix.ui({
cols:[
/* первая колонка, сайдбар */
{
view: "sidebar",
data: menu_data,
},
/* вторая колонка */
{ /* dataview component */ }
]
});
В принципе, это все, что требуется для создания базового сайдбара: указать, что именно этот компонент мы хотим создать, а также выбрать источник данных о его структуре.
В результате мы получили вот такой сайдбар:
Пример кода и демку можно посмотреть .
Добавляем кнопку для скрытия сайдбара Если мы хотим сэкономить немного места или просто не хотим, чтобы сайдбар мозолил глаза, можно добавить в приложение кнопку-гамбургер, знакомую нам по мобильным (и не только) приложениям. Для этого необходимо добавить к приложению верхний тулбар, что немного усложнит наш лэйаут. Теперь он будет состоять из двух рядов. В первый из них, верхний ряд мы и поместим тулбар. Второй, нижний, останется без изменений и будет состоять их просмотрщика с сайдбаром:Webix.ui({
rows:[
{ /* здесь будет тулбар */},
{cols:[
{ /* сайдбар */ },
{ /* наши имейлы */ }
]}
]
});
Давайте разберемся с кодом, который нам понадобится для создания заголовка. Как и было сказано, тип создаваемого компонента определяется значением свойства view
. В данном случае этим значением будет toolbar. Его содержимое определяется значением свойства elements
. В нашем случае мы поместим на тулбар следующие элементы: кнопку-гамбургер, заголовок и несколько иконок-уведомлений:
{view: "toolbar", elements: [
/* кнопка-гамбургер */
{ view: "button", type: "icon", icon: "bars",
width: 37, align: "left", css: "app_button",
click: function(){
$$("$sidebar1").toggle()
}
},
/* заголовок */
{ view: "label", label: "Webix E-Mail CLient"},
{ /* добавляем пустое пространство */ },
/* уведомление 1 */
{ view: "button", type: "icon", icon: "envelope-o",
width: 45, css: "app_button", badge:4},
/* уведомление 2 */
{ view: "button", type: "icon", icon: "bell-o",
width: 45, css: "app_button", badge:10}
]
},
Свойства type: "icon
" и icon: «icon-name»
создают кнопки-иконки. Свойство click
позволяет определить функцию, которая будет вызываться по клику. В данном случае, она переключает состояния сайдбара. К двум последним кнопкам мы добавили свойство badge
, которое позволяет использовать оранжевые бейджи с номерами, соответствующими значению свойства.
Вот что получилось в итоге:
В свернутом виде остаются видимыми иконки меню сайдбара. Наведя на них курсор, можно посмотреть содержимое меню и выбрать один из пунктов.
Раскрытый сайдбар имеет уже привычный нам вид:
И да, обратите внимание на значки уведомления справа вверху. Именно ради этих оранжевых кружочков мы и использовали свойство badge .
Попробовать этот пример и поиграть с кодом можно по этой
Привет Друзья! Как и обещал, составил тему о сайдбарах WordPress . Это маленькое руководство по использованию и настройке сайдбаров на сайтах WordPress.
В данной теме я хочу раскрыть небольшой секрет всем разработчикам шаблонов: сайдбары всегда являлись важной составляющей системы WordPress и за несколько последних лет были значительно усовершенствованы.
Принимая во внимание последние разработки, я собираюсь показать пошаговый процесс создания и использования боковых панелей для тем WordPress.
Что такое сайдбар WordPress?На самом деле термин ‘сайдбар (sidebar)’ может означать два абсолютно не связанных понятия в системе WordPress:
В большинстве случаев, простые шаблоны имеют динамичный сайдбар, которые загружают все размещённые виджеты из админ панели. Этот процесс может проходить и по другому алгоритму, но чаще всего именно по этой схеме. Всё же важно понимать, что динамичный сайдбар и шаблон боковой панели – это две разные вещи. Все премиум , в основном работаю с Sidebar template.
Обычно, термин ‘сайдбар’ используют по отношению к динамичной боковой панели, о которой и пойдет речь в данной статье. Однако я буду затрагивать и шаблон боковой панели.
Больше всего во время просмотра многих тем меня разочаровало то, что разработчики не в полной мере используют преимущества наиболее мощных функций системы WordPress. Большинство тем имеют только один сайдбар, в лучшем случае два. Но ведь эти темы создадут огромные страницы с набором опций, которые спокойно можно обработать с помощью виджетов, а их содержание поместить прямо в шаблон. Я предпочитаю использовать много сайдбаров в теме, для создания гибкого многофункционального сайта.
Регистрируем, добавляем и создаём сайдбар WordPress
Многие темы часто не соответствуют стандартам качества, поэтому, если Вы разработчик шаблонов, давайте убедимся, что Вы относитесь к этому вопросу серьёзно. Создание соответствующего динамичного сайдбара WordPress
– наиболее важная часть процесса, потому что то, что Вы в нем установите, будет связано со всеми другими функциями боковой панели.
Чтобы создать один или несколько сайдбаров, Вам придёться регистрировать их через файл functions . php Вашей темы, у каждой темы существует свой файл, который содержит все настройки шаблона. В файл functions . php Вы можете дописывать или удалять настройки темы.
Код, представленный ниже, демонстрирует, как можно создать сайдбар в системе WordPress, воспользовавшись функцией register_sidebar () . В данном случае мы будем создавать боковую панель под названием ‘primary’, которая станет примером для дальнейшей работы.
