Перейти к содержанию
Invision byte
  • Регистрация

  1. ips.ui.truncate

    Виджет усечения используется в тех случаях, когда нужно сделать анонс - короткий текстовый блок. Виджет может как удалить 'лишний' текст, так и скрыть текст под кнопку 'Читать далее'. Так же виджет умеет работать с блоками текста, насыщенными медиа-файлами (видео, изображения и т.д.).
    Использование
    Атрибут виджета data-ipsTruncate должен быть добавлен в элемент, оборачивающий контент, который необходимо усечь:
    <div data-ipsTruncate> <p>Здесь слишком длинный текст...</p> </div> Параметры
    1. type (Строка; необязательный; по умолчанию - 'remove')
    Определяет как должен усекаться текст. remove удаляет лишний текст полностью. hide оставляет лишний текст на странице, но скрывает его под кнопку  'читать далее'.
    Пример использования:
    <div data-ipsTruncate data-ipsTruncate-type="hide" data-ipsTruncate-size="35"> Лишний текст будет скрыт под кнопку </div> <div data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='2 lines'> Лишний текст будет удалён со страницы </div> 2. size (Смешанный; необязательный; по умолчанию - 100)
    Определяет размер усечённого текста; избыточный текст удаляется или скрывается. Параметр может принимать три значения:
    Селектор, например #someElementID
    Если указан селектор, высота элемента виджета будет установлена на размер внешней высоты первого найденного указанного селектора.
    Строка, например 3 строки
    Текст будет усечён до указанного количества строк текста, с учётом текущего форматирования текста (Внимание: данное значение может быть только во множественном числе).
    Число, например 100
    Простое числовое значение, соответствующее числу пикселей, на которое будет усечён текст.
    Пример использования:
    <div data-ipsTruncate data-ipsTruncate-size='4 lines' data-ipsTruncate-type='remove'> Текст, расположенный ниже 4 строки будет удалён </div> <div data-ipsTruncate data-ipsTruncate-type="hide" data-ipsTruncate-size="#elReportPanel"> Лишний текст будет скрыт на высоту селектора #elReportPanel </div> {truncate="$topic->mapped('title')" length="60"} <!-- Текст переменной будет в длину 60 символов --> 3. expandText (Строка; необязательный; по умолчанию - 'Read more')
    Данный параметр может быть использован только с type = hide. С помощью данного параметра можно переопределить стандартную кнопку 'Читать далее'.
    События, вызываемые виджетом ips.ui.truncate
    Вызываемые виджетом события применяются к элементу, содержащему в себе атрибут data-ipsTruncate.
    contentTruncated
    Вызывается когда контент в элементе усечён.
    Данные события:
    type (Тип используемого усечения, полное удаление или скрытие) contentExpanded
    Вызывается, когда пользователь указывает свой текст кнопки виджета, когда тип - скрытие.
     

  2. ips.ui.sideMenu

    Виджет SideMenu работает с разметкой стандартного бокового меню и делает его интерактивным и функциональным при посещении пользователем страниц сайта с мобильного устройства. В большинстве случаев, боковое меню должно быть построено с использованием стандартных CSS классов. После чего к оболочке меню добавляется соответствующий атрибут данных.
     
    Делаем боковое меню адаптивным
    Когда виджет должен быть использован адаптивным, его заголовок должен быть в элементе с классом ipsSideMenu_mainTitle; а ссылка внутри заголовка должна иметь атрибут data-action='openSideMenu':
    <div class='ipsSideMenu' data-ipsSideMenu> <h3 class="ipsSideMenu_mainTitle ipsAreaBackground_light ipsType_medium"> <a href="#modcp_menu" class="ipsPad_double" data-action="openSideMenu"> <i class="fa fa-bars"></i>  Название меню <i class="fa fa-caret-down"></i> </a> </h3> <!-- Здесь содержание меню --> </div>
     
    Боковое меню с пунктами выбора
    Боковое меню может быть использовано в том числе и для предоставления возможности пользователям выбирать один и представленных пунктов меню на лету, или в качестве радиокнопок (то есть выбор только одного пункта меню), или как меню с чекбоксами (то есть мультивыбор). Это достигается путём установки атрибута data-ipsSideMenu-type в меню и указание атрибута data-ipsMenuValue к списку пунктов меню:
    <ul class="ipsSideMenu_list ipsSideMenu_withRadios" data-ipsSideMenu data-ipsSideMenu-type="radio"> <li> <a href='#' class='ipsSideMenu_item ipsSideMenu_itemActive' data-ipsMenuValue='one'> <input type="radio" name="type" value="one" checked> <label>Один</label> </a> </li> <li> <a href='#' class='ipsSideMenu_item' data-ipsMenuValue='two'> <input type="radio" name="type" value="two"> <label>Два</label> </a> </li> </ul> Примечание: радиокнопки и чекбоксы могут быть встроены внутрь пунктов меню, как показано на примере выше. Они будут автоматически скрыты с помощью CSS кода при выборе пользователем одного из пунктов. Это позволяет боковому меню быть частью формы.

     
    Параметры
    responsive
    (Boolean; необязательный; по умолчанию true)
    Определяет, будет ли применяться к меню адаптивность. Это достигается путём скрытия меню и отображения ссылки для ручного открытия по требованию.
     
    type
    (Строчный; необязательный; по умолчанию 'radio')
    Определяет тип  Determines the type of selectable behavior the menu uses. By default, only one menu item can be selected; others will be deselected when a new one is clicked. This is radio behavior. In contrast, check will allow multiple items to be selected at once.
     
    group
    (String; optional)
    Determines whether the above setting applies to the whole menu (when this option is false), or whether each group within the menu is treated as an individual menu for the purposes of the radio selection.

  3. ips.ui.dialog

    Диалоговый виджет отображает всплывающее окно на странице, загружая его из удалённого источника.
     
    Использование
     
    Диалоговое окно определяется простым включением ключа виджета как атрибута в элемент триггер. Рекомендуется, чтобы элемент триггер был ссылкой или кнопкой, таким образом, если у пользователя в браузере отключён javascript, ему отобразится полнотекстовая версия диалогового окна.
    <a href='...' data-ipsDialog data-ipsDialog-url='...'>Вызвать диалоговое окно</a> Диалоговые окна предлагают специальный функционал для форм, находящихся в этом окне, что позволяем им быть автоматически проверенными и отправлять их с помощью AJAX, если используется помощник форм из IPS4 PHP фреймворка. Смотрите параметры remoteVerify и remoteSubmit ниже.
    Получение ссылки на диалоговое окно
    Если вам необходимо программно контролировать диалоговое окно, вы можете сделать это сперва получив ссылку на него. Чтобы сделать это, вызовите метод getObj, передав элемент, в котором было создано окно в качестве параметра:
    // HTML <div id='elementWithDialog' data-ipsDialog> ... </div> // Javascript var dialog = ips.ui.dialog.getObj( $('#elementWithDialog') ); Возвращённая ссылка на экземпляр окна может быть использована для вызова методов, описанных ниже.
     
    Программное создание диалогового окна
     
    Диалоговые окна могут быть созданы программно контроллерами, вместо создания для отдельных элементов. Для этого вызывается метод create:
    var dialog = ips.ui.dialog.create( object options ); Параметр options должен быть объектом, содержащим ключи для параметров, описанных ниже. Этот метод возвращает ссылку на экземпляр диалогового окна, на котором вы можете вызывать методы для контроля диалогового окна, например:
    dialog.show(); dialog.hide();  
    Методы экземпляра
     
    show( boolean initOnly )
    Инициализирует и отображает диалоговое окно. Если initOnly имеет значение true, то диалоговое окно инициализируется, но не сразу.
     
    hide()
    Скрывает диалоговое окно.
     
    remove( boolean hideFirst )
    Удаляет окно из DOM модели. Если hideFirst имеет значение true, то диалоговое окно вызывает hide() и удаляет себя после того, как завершится анимация.
     
    setLoading( boolean loading )
    Если loading имеет значение true, показывается пользователю, что что-то загружается (то есть показывается иконка загрузки в окне). Если loading имеет значение false, удаляется статус загрузки. Обратите внимание: этот метод не очищает контент окна. Вызовите instance.updateContent('') вручную, если необходимо.
     
    updateContent( string newContent )
    Обновляет контент диалогового окна на новый из newContent. Новые контроллеры/виджеты инициализируются автоматически после обновления.
     
    Параметры
     
    url
    (Строка; необязательно)
    Если указано, контент диалогового окна будет загружен путём вызова этого URL-адреса, когда диалоговое окно загружено.
     
    content
    (Селектор; необязательно)
    Если контент окна уже загружен в DOM модель, этот параметр должен указать селектор, который содержит контент.
     
    modal
    (Логическое; необязательно; по умолчанию true)
    Если значение true, бэкграунд страницы будет затемнённым, не позволяя пользователю взаимодействовать со страницей, пока не закрыто диалоговое окно.
     
    title
    (Строка; необязательно)
    Задаёт заголовок, который будет отображён в окне. Если не указан, окно будет отображено без заголовка.
     
    size
    (Строка; необязательно)
    Если указано, будет установлен специальный класс, изменяющий размер размер окна. В настоящее время может принять значения narrow, medium, wide и fullscreen. Если не указан, будет использована стандартная ширина окна, заданная в CSS.
     
    close
    (Логический; необязательно; по умолчанию true)
    Определяет, должно ли диалоговое окно быть с закрывающей кнопкой.
     
    fixed
    (Логический; необязательно; по умолчанию false)
    Определяет, будет ли окно фиксировано. Фиксированное диалоговое окно крепится к области просмотру, не к странице. Его высота также будет фиксированной, с прокручиваемым контентом внутри, если необходимо. Если значение параметра равно false, окно будет прокручиваться вместе со страницей, и будет расширяться для включения всего отображаемого контента, независимо от длины.
     
    remoteVerify
    (Логический; необязательно; по умолчанию true)
    Когда окно содержит какую-либо форму, построенную с использованием помощника форм IPS4 PHP фреймворка, этот параметр указывает окну на автоматическую проверку введённых данных и отображает любые ошибки пользователю.
     
    remoteSubmit
    (Логический; необязательно; по умолчанию false)
    Когда окно содержит какую-либо форму, построенную с использованием помощника форм IPS4 PHP фреймворка, этот параметр указывает окну на отправку введённых данных с помощью AJAX. Если параметр remoteVerify также имеет значение true, отправляются два отдельных AJAX запроса; первый проверяющий значения формы, и если успешно, форма отправляется вторым запросом.
    Если параметр remoteSubmit имеет значение true, после успешной отправки данных формы окно автоматически закрывается. Если существует параметр flashMessage, то будет отображено флэш-сообщение.
    По умолчанию remoteSubmit имеет значение false, что означает, что форма будет отправлена обычной перезагрузкой страницы.
     
    callback
    (Функция; необязательно)
    Задаёт callback-функцию, которая будет выполнена после загрузки в окно удалённого контента. Обратите внимание: этот параметр не может быть предоставлен через данные API, и доступен только при работе с ips.ui.dialog напрямую. 
     
    forceReload
    (Логический; необязательно; по умолчанию false)
    По умолчанию, как только в диалоговое окно загружен контент, он не будет снова загружаться, даже если окно перезапущено. Если установить этому параметру значение true, то окно будет вызывать URL-адрес при каждом открытии. Этот параметр вступает работоспособен только при использовании URL-адреса контента окна.
     
    События, вызванные ips.ui.dialog
     
    openDialog
    Срабатывает, когда отображено диалоговое окно.
    Данные события:
    elemID - ID элемента, который вызвал окно. dialogID - ID элемента окна. dialog - Ссылка на элемент окна. contentLoaded - Булево значение, указывающее на то, загружен ли контент в окно (может быть false, если используется удалённый контент).  
    hideDialog
    Срабатывает при скрытии окна.
    Event data:
    elemID - ID элемента, вызвавшего окно. dialogID - ID элемента окна. dialog - ссылка на элемент окна.  
    dialogContentLoaded
    Срабатывает при загрузке удалённого контента и встраивании его в окно.
    Данные события:
    elemID - ID элемента, вызвавшего окно. dialogID - ID элемента окна. dialog - ссылка на элемент окна. contentLoaded - Булево значение, указывающее на то, загружен ли контент в окно (всегда будет true).  
    События, на которые реагирует ips.ui.dialog
     
    closeDialog
    Закрывает окно.
    Данные события:
    dialogID (обязательный) - идентификатор диалогового окна, которое необходимо закрыть (событие игнорируется, если ID не соответствует ID текущего окна).  

  4. Контроллеры

    Controllers are special modules that handle specific functionality on specific pages. They are not necessarily reusable in different contexts, although some may be. A controller is initialized on an individual element, and that element becomes the controller's scope. A controller responds to user events (such as click) and events triggered by UI widgets or sub-controllers, and manipulates its scope element accordingly.

  5. ips.ui.menu

    Виджет меню добавляет интерактивность к элементам меню, созданным с помощью HTML и CSS. Меню презентует список доступных опций пользователю в виде всплывающего окна, и прикреплено к элементу триггеру.
     
    Использование
    Виджет меню не создаёт сам элемент меню. Оно должно существовать на странице в виде HTML-элемента с соответствующими CSS классами, уже добавленными в него (это сделано для того, чтобы меню было доступно без включенного javascript). Атрибуты для для инициализации меню должны быть добавлены к элементу триггеру - то есть к тому элементу, который отобразит меню по клику пользователя. Обычно это ссылка или кнопка.
    Элемент меню должен иметь тот же ID, что и у элемента триггера, но с суффиксом _menu; например, если триггер имеет ID 'trigger', то ID элемента меню должен быть такой 'trigger_menu'. Иначе триггер не отобразит меню.
    <!-- Триггер --> <a href='#elMyMenu_menu' id='elMyMenu' data-ipsMenu>Открыть меню</a> <!-- Меню --> <ul id='elMyMenu_menu' class='ipsMenu'> ... </ul>  
    Переназначение URL-адресов из пунктов меню
    Виджет меню имеет механизм тестирования адресов пунктов меню с помощью AJAX, вместо перехода по прямой ссылке из меню. Чтобы воспользоваться этим поведением, укажите атрибут данных data-action к элементу из пунктов меню:
    <li class='ipsMenu_item' data-action='ipsMenu_ping'><a href='...'>Пункт меню</a></li>  
    Указание значений в меню
    С помощью указания атрибута data-ipsMenuValue у пункта меню, вы можете предоставить значение, которое будете передано событием, и будет использовано обработчиком события для идентификации пункта меню:
    <li class='ipsMenu_item' data-ipsMenuValue='itemID'><a href='...'>Пункт меню</a></li>  
    Параметры
    className
    (Строка; необязательный; по умолчанию 'ipsMenu')
    Указывает базовый класс меню, который будет использоваться виджетом. По умолчанию это стандартный класс ipsMenu, но при передаче другого имени класса, могут быть созданы другие стили меню.
     
    closeOnClick
    (Логический - boolean; необязательный; по умолчанию true)
    Определяет, будет ли меню закрываться при клике по элементу.
     
    closeOnBlur
    (Логический - boolean; необязательный; по умолчанию true)
    Определяет, будет ли элемент меню закрываться, когда происходик клик вне меню или от меню переходит фокус куда-либо.
     
    appendTo
    (Селектор; необязательный)
    По умолчанию, элемент меню перемещён и применён к глобальному контейнеру (обычно body). Используя данный параметр, вы можете контролировать куда будет добавлено меню - полезно использовать при создании меню внутри всплывающего окна, например.
     
    activeClass
    (Строка; необязательный)
    Задаёт имя класса, который будет применён к элементу триггеру при открытии меню.
     
    selectable
    (Смешанный; необязательный; по умолчанию false)
    Определяет, будет ли меню иметь функционал выбора пунктов. Если передаваемый параметр 'radio', только один пункт может быть выбран в рамках меню. Если параметр 'checkbox', могут быть выбраны несколько пунктов. Обратите внимание, что меню должно иметь правильные CSS для корректной работы.
     
    withStem
    (Логический - boolean; необязательный; по умолчанию true)
    Определяет, имеет ли меню стрелку, указывающую на принадлежность меню элементу триггеру.
     
    stemOffset
    (Число; необязательный; по умолчанию 15)
    Значение, указывающее на смещение стрелки, то есть расстояние от края до центральной точки стрелки. Редко когда приходится изменять этот параметр, если CSS классы не кардинально изменены.
     
    stopLinks
    (Логический - boolean; необязательный; по умолчанию false)
    Отменяет стандартное действие браузера перехода по ссылке путём вызова стандартного метода браузера - preventDefault.
     
    above
    (Логический - boolean; необязательный; по умолчанию false)
    По умолчанию, меню открывается под триггером. Установка этого параметра в true, меню будет открываться сверху элемента триггера.
     
    События ips.ui.menu
    menuOpened
    Вызывается при открытии меню пользователем путём клика по триггеру.
    Данные события:
    elemID - Идентификатор элемента триггера, к которому принадлежит это меню. originalEvent - оригинальное событие клика (используется для вызова originalEvent.preventDefault() для предотвращения стандартного браузерного действия). menu - ссылка на элемент меню.  
    menuClosed
    Вызывается при закрытии меню.
    Данные события:
    elemID - Идентификатор элемента триггера, к которому принадлежит это меню.  
    menuPingSuccessful
    Вызывается при закрытии меню.
    Нет данных о событии.
     
    menuItemSelected
    Вызывается, когда пользователь выбирает элемент в меню.
    Данные события:
    triggerElem - Ссылка на элемент триггер. triggerID - Идентификатор элемента триггера. menuElem - Ссылка на элемент меню. originalEvent - Необработанный объект события javascript от клика. selectedItemID - Строка, содержащая значение выбранного пункта меню, если указан атрибут data-ipsMenuValue. selectedItems - Объект, содержащий ссылки на отмеченные пункты, когда пункты меню выбираемые.  
    Ответы ips.ui.menu на события
    closeMenu
    Может быть запущен у меню или триггера для закрытия меню.

  6. ips.ui.sticky

    Виджет sticky предназначен для автоматического прилипая элементов к окну браузера при прокрутке страницы, таким образом элемент всегда находится в области видимости. Применение этому находится в закреплении рекламных блоков или блоков с какими-либо инструментами. 
     
    Использование
    Атрибут ключа виджета должен быть указан у элемента, который нужно зафиксировать при прокрутке страницы.
    <div id='elWrapper'> <div id='elStickyElement' data-ipsSticky> ... </div> </div> Элемент #elWrapper представляет элемент, который будет визуально будет содержать плавающий элемент. Виджет по умолчанию просто использует родительский элемент плавающего.
    Виджет пытается позиционировать и установить размеры элемента, когда он находится в плавающем режиме, однако в зависимости от ситуации и места применения, может потребовать ручной настройки с использованием CSS.
     
    Параметры
     
    stickyClass
    (Строка; необязательный; по умолчанию 'ipsSticky')
    Имя класса, которое будет применено к плавающему элементу. Полезно для применения специального стиля, который указывает, что он "плавает".
     
    relativeTo
    (Селектор; необязательный)
    Элемент, который визуально отображается как родитель плавающего элемента. Родитель элемента считается, если параметр не указан. 
    Данный параметр держит плавающий элемент внутри контейнера, указанного в этом параметре. Например, предположим у вас есть плавающий элемент в боковой панели и параметр relativeTo указывает на боковую панель. Когда пользователь прокручивает страницу вниз, плавающий элемент прикрепится к верхнему краю браузера и останется видимым. Однако, если боковая панель по высоте меньше высоты плавающего блока, виджет открепит его. Такое поведение позволяет плавающим элементам вести себя как дочерние элементы родительских, которые не закреплены.
     
    spacing
    (Число; необязательный; по умолчанию 0)
    Число в пикселах. Когда плавающий элемент находится на определённом расстоянии от края окна браузера, он станет плавающим.
     
    stickTo
    (Строка; необязательный; по умолчанию 'top')
    Может быть сверху или снизу; Определяет, к какому краю экрана закрепляется плавающий элемент.
     
    width
    (Смешанный; необязательный)
    Позволяет задать ширину плавающего элемента, когда он находится в данном режиме. Этот параметр может быть числом, в таком случае будет использовано количество пикселей. Параметр также может быть селектором, с этом случае его ширина будет такой же, как и ширина указанного элемента.
     
    disableIn
    (Строка; необязательный)
    На мобильных устройствах в большинстве случаев не требуется закреплять какой-либо блок. Этот параметр позволяет вам отключить виджет sticky, если включена адаптивность в настройках темы и в данном параметре указан ключ, например phone или tablet.
     
    Вызываемые ips.ui.sticky события
    События вызываются для элемента, у которого указан атрибут data-ipsWidget attribute.
     
    stickyInit
    Вызывается как только инициализировался виджет.
    Данные события:
    id. Идентификатор основного плавающего элемента. status. Текущий статус плавающего элемента, either normal или fixed.  
×
×
  • Создать...

Важная информация

Используя наш сайт вы соглашаетесь с нашей Политикой конфиденциальности

  Я принимаю