ui.datasuggest
Всплывающее окно с опциями на основе компонента dataview.
Опции для выбора отображаются в компоненте Webix dataview.
Datasuggest можно использовать отдельно или в качестве списка опций для text, combo и richselect, а также для встроенных редакторов дата-компонентов.
Инициализация
webix.ui({
view:"richselect",
label:"Data",
value:1, options:{
view:"datasuggest", data:[
{id:1, value:"One", year:1988, color:"Red"},
{id:2, value:"Two", year:1996, color:"Blue"},
{id:3, value:"Three", year:1997, color:"Green"},
{id:4, value:"Four", year:2011, color:"Orange"},
{id:5, value:"Five", year:2000, color:"Grey"},
{id:6, value:"Six", year: 1994, color:"Yellow"}
]
}
});
С чего начать
Based on:
ui.suggest,
ui.popup,
ui.window,
ui.view,
ui.baseview,
Settings,
Destruction,
BaseBind,
Movable,
Modality,
EventSystem,
ResizeArea
Methods
| adjust | подстраивает размеры компонента под размеры HTML-контейнера |
| attachEvent | задает обработчик внутреннего события компонента |
| bind | связывает данные компонентов |
| blockEvent | временно блокирует вызов ВСЕХ событий вызывающего объекта |
| callEvent | вызывает внутреннее событие компонента |
| define | переопределяет одну или несколько настроек компонента |
| destructor | разрушает компонент |
| detachEvent | удаляет обработчик события (который был задан ранее методом attachEvent) |
| disable | блокирует компонент (он становится серым, клики по нему не срабатывают) |
| enable | делает активным ранее заблокированный компонент |
| getBody | возвращает компонент, который поместили в основную часть окна |
| getChildViews | возвращает внутренние компоненты |
| getFormView | возвращает объект формы, которой принадлежит компонент |
| getItemId | возвращает id опции из списка в suggest |
| getItemText | возвращает текст опции из списка suggest |
| getList | возвращает компонент list внутри suggest |
| getMasterValue | возвращает текущее value мастер-компонента suggest |
| getNode | возвращает HTML-элемент компонента |
| getParentView | возвращает родительский компонент |
| getSuggestion | возвращает id первой опции из предложенных в списке suggest |
| getTopParentView | возвращает самого верхнего родителя |
| getValue | возвращает ID выбранной опции в списке suggest |
| hasEvent | проверяет, есть ли у компонента обработчики указанного события |
| hide | скрывает компонент |
| isEnabled | проверяет, активен или заблокирован компонент |
| isVisible | проверяет, виден ли компонент |
| linkInput | связывает список suggest с полем ввода |
| mapEvent | направляет события от одного компонента к другому |
| queryView | возвращает внутренние компоненты, которые удовлетворяют указанному условию |
| resize | перерисовывает компонент после изменения размеров |
| resizeChildren | перерисовывает все вложенные компоненты |
| setMasterValue | задает значение в главном элементе управления |
| setPosition | задает положение окна на экране (в пикселях) |
| setValue | выбирает опцию в списке suggest |
| show | делает компонент видимым |
| unbind | отменяет связывание компонентов |
| unblockEvent | отменяет блокировку событий, которая была вызвана командой 'blockEvent' |
Events
| onAfterScroll | срабатывает после прокрутки содержимого компонента webix |
| onBeforeShow | срабатывает после вызова метода show() у компонентов window и popup перед тем, как окно появится |
| onBindRequest | срабатывает, когда компонент готов получить данные из главного компонента |
| onBlur | срабатывает при смещении фокуса за пределы компонента |
| onDestruct | происходит, когда компонент был разрушен деструктором |
| onEnter | срабатывает после нажатия клавиши Enter |
| onFocus | срабатывает после смещения фокуса на компонент |
| onHide | срабатывает, когда окно скрылось |
| onKeyPress | срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус) |
| onLongTouch | срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном) |
| onShow | срабатывает, когда окно появилось |
| onSwipeX | срабатывает по горизонтальному свайпу |
| onSwipeY | срабатывает по вертикальному свайпу |
| onTimedKeyPress | срабатывает через некоторое время после нажатия клавиши в текстовом поле |
| onTouchEnd | срабатывает после завершения события touch |
| onTouchMove | срабатывает по время движения пальца по сенсорному экрану |
| onTouchStart | срабатывает после touch-события в компоненте webix |
| onValueSuggest | срабатывает, когда выбран элемент из списка suggest |
| onViewMove | срабатывает, когда компонент перетаскивают |
| onViewMoveEnd | срабатывает, когда компонент перестает двигаться |
| onViewResize | срабатывает при изменении размера компонента |
| onViewShow | срабатывает, когда компонент появляется (вызов метода show()) |
Properties
| animate | определяет анимацию для показа компонента в Multiview |
| autofit | адаптирует размеры окна под размеры HTML-контейнера, в котором окно инициализировали |
| autofocus | автоматически перемещает фокус на содержимое окна при его появлении |
| body | основная часть окна, в которой могут быть любые компоненты или HTML |
| borderless | скрывает или показывает границы компонента |
| container | HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован |
| css | имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями |
| data | массив с данными для компонента |
| disabled | блокирует или разблокирует компонент |
| escHide | переключает поведение "спрятать при нажатии Esc" |
| filter | функция для фильтрации списка опций |
| fitMaster | подгоняет ширину окна suggest под ширину текстового поля |
| gravity | задает удельный (относительный) размер компонента |
| height | задает высоту компонента |
| hidden | скрывает компонент после его инициализации |
| id | ID компонента |
| input | указывает на поле ввода HTML, которому принадлежит suggest |
| keyPressTimeout | задержка между нажатием клавиши и обработчиком |
| left | задает положение окна на экране (по горизонтали) |
| master | ID мастер-компонента окна (свойство только для чтения) |
| maxHeight | определяет максимальную высоту компонента |
| maxWidth | определяет максимальную ширину компонента |
| minHeight | задает минимальную высоту компонента |
| minWidth | задает минимальную ширину компонента |
| modal | делает окно модальным |
| on | позволяет присоединять обработчики к внутренним событиям компонента |
| padding | задаёт внутренние отступы для всех четырёх сторон виджета |
| point | добавляет стрелку окну или убирает ее |
| position | задает положение окна на экране |
| relative | задает положение окно относительно его мастер-компонента |
| resize | позволяет изменить размер компонента |
| template | определяет текст, который будет отображаться в поле ввода после выбора опции |
| textValue | определяет, какое поле из данных опций suggest попадет в поле ввода после выбора опции |
| toFront | показывает окно поверх других окон |
| top | положение окна по вертикали |
| type | определяет тип компонента suggest |
| url | URL, который компонент будет использовать для загрузки данных после инициализации |
| width | задает ширину компонента |
| zIndex | устанавливает z-index компонента |
Other
| $dragCreate | метод вызывается в момент начала действия drag-n-drop |
| $dragDestroy | метод вызывается в момент окончания drag-n-drop |
| $dragPos | определяет положение перетаскиваемого компонента |
| $enterKey | метод, который будет вызываться при нажатии клавиши Enter |
| $getSize | возвращает текущий размер компонентов |
| $height | текущая высота компонента |
| $scope | область имен для событий и методов |
| $setNode | определяет HTML-элемент компонента |
| $setSize | задает размеры компонента |
| $skin | вызывается после применения скина |
| $view | возвращает HTML-элемент компонента |
| $width | текущая ширина компонента |
| config | все настройки, заданные при инициализации компонента |
| name | возвращает имя компонента (свойство только для чтения) |
Наверх