|
|
|
|
@ -1,11 +1,11 @@
|
|
|
|
|
jQuery UI Віджет |
|
|
|
|
Віджети jQuery UI |
|
|
|
|
================= |
|
|
|
|
|
|
|
|
|
> Замітка: Цей розділ знаходиться на стадії розробки. |
|
|
|
|
> Примітка: Цей розділ знаходиться на стадії розробки. |
|
|
|
|
|
|
|
|
|
Yii включає підтримку [jQuery UI](http://api.jqueryui.com/) бібліотеки в офіційному розширенні. jQuery UI є |
|
|
|
|
зберігачем набору інтерфейсів користувача, що забезпечує роботу з ефектами, віджетами і темами та побудований з |
|
|
|
|
використанням jQuery JavaScript бібілотеки. |
|
|
|
|
Yii включає підтримку бібліотеки [jQuery UI](http://api.jqueryui.com/) в офіційному розширенні. jQuery UI є |
|
|
|
|
зберігачем набору інтерфейсів користувача, який забезпечує роботу з ефектами, віджетами і темами, що побудований |
|
|
|
|
на основі JavaScript-бібілотеки jQuery. |
|
|
|
|
|
|
|
|
|
Встановлення |
|
|
|
|
------------ |
|
|
|
|
@ -26,11 +26,11 @@ php composer.phar require --prefer-dist yiisoft/yii2-jui "*"
|
|
|
|
|
|
|
|
|
|
в потрібний розділ `composer.json` файлу. |
|
|
|
|
|
|
|
|
|
Yii віджети |
|
|
|
|
Віджети Yii |
|
|
|
|
----------- |
|
|
|
|
|
|
|
|
|
Найбільш складні jQuery UI компоненти загорнуті в Yii віджети, щоб запезпечити більш надійний синтаксис та інтегрувати |
|
|
|
|
з можливостями платформи. Всі віджети належать до `\yii\jui` простору імен: |
|
|
|
|
Найбільш складні компоненти jQuery UI загорнуті в Yii віджети, щоб запезпечити більш надійний синтаксис та інтегрувати |
|
|
|
|
з можливостями фреймворку. Всі віджети належать до простору імен `\yii\jui`: |
|
|
|
|
|
|
|
|
|
- [[yii\jui\Accordion|Accordion]] |
|
|
|
|
- [[yii\jui\AutoComplete|AutoComplete]] |
|
|
|
|
@ -48,22 +48,22 @@ Yii віджети
|
|
|
|
|
- [[yii\jui\Spinner|Spinner]] |
|
|
|
|
- [[yii\jui\Tabs|Tabs]] |
|
|
|
|
|
|
|
|
|
В наступних розділах рязглядаються деякі випадки використання цих віджетів. |
|
|
|
|
В наступних розділах розглядаються деякі приклади використання цих віджетів. |
|
|
|
|
|
|
|
|
|
Обробка вводу дати з допомогою DatePicker <span id="datepicker-date-input"></span> |
|
|
|
|
--------------------------------------- |
|
|
|
|
----------------------------------------- |
|
|
|
|
|
|
|
|
|
Завдяки [[yii\jui\DatePicker|DatePicker]] віджету, обробку дати введеною користувачем, можна зробити дуже зручним способом. |
|
|
|
|
В наступному прикладі ми будемо використовувати модель `Task` яка має атрибут `deadline`, який повинен бути встановлений користувачем |
|
|
|
|
використовуючи [ActiveForm](input-forms.md). Значення атрибуту будуть збережені в якості мітки часу Unix в базі даних. |
|
|
|
|
Збирання вводу дат від користувачів можливо виконати даже зручним способом, завдяки віджету [[yii\jui\DatePicker|DatePicker]]. |
|
|
|
|
В наступному прикладі ми будемо використовувати модель `Task`, яка має атрибут `deadline`, який повинен бути встановлений |
|
|
|
|
користувачем, використовуючи [ActiveForm](input-forms.md). Значення атрибуту буде збережено в якості мітки часу Unix в базі даних. |
|
|
|
|
|
|
|
|
|
В цій ситуації є 3 компоненти, *що виконуються разом:* |
|
|
|
|
В цій ситуації є 3 компоненти, що взаємодіють між собою: |
|
|
|
|
|
|
|
|
|
- Це, віджет [[yii\jui\DatePicker|DatePicker]], який використовується в формі для відображення поля введення атрибуту моделі. |
|
|
|
|
- Це, компонент додатку [formatter](output-formatter.md), який відповідає за формат дати, що відображається користувачеві. |
|
|
|
|
- Це, [DateValidator](tutorial-core-validators.md#date), який перевіряє що ввів користувач і конвертує в мітку часу Unix. |
|
|
|
|
- Віджет [[yii\jui\DatePicker|DatePicker]], який використовується в формі для відображення поля введення атрибуту моделі. |
|
|
|
|
- Компонент додатку [formatter](output-formatter.md), який відповідає за формат дати, що відображається користувачеві. |
|
|
|
|
- [DateValidator](tutorial-core-validators.md#date), який перевіряє що ввів користувач і конвертує в мітку часу Unix. |
|
|
|
|
|
|
|
|
|
Спершу ми додамо до поля введення вибору дати у формі, використовуючи метод [[yii\widgets\ActiveField::widget()|widget()]] поля форми: |
|
|
|
|
Спершу ми додамо до поле введення вибору дати до формі, використовуючи метод [[yii\widgets\ActiveField::widget()|widget()]] поля форми: |
|
|
|
|
|
|
|
|
|
```php |
|
|
|
|
<?= $form->field($model, 'deadline')->widget(\yii\jui\DatePicker::className(), [ |
|
|
|
|
@ -73,7 +73,7 @@ Yii віджети
|
|
|
|
|
]) ?> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
Другим кроком буде налаштування валідатора дати в [model's rules() method](input-validation.md#declaring-rules): |
|
|
|
|
Другим кроком буде налаштування валідатора дати в [методі моделі rules()](input-validation.md#declaring-rules): |
|
|
|
|
|
|
|
|
|
```php |
|
|
|
|
public function rules() |
|
|
|
|
@ -91,8 +91,8 @@ public function rules()
|
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
Ми можемо також додати [стандартні значення фільтру](input-validation.md#handling-empty-inputs), щоб забезпечити збереження порожніх |
|
|
|
|
значень в базі данних у вигляді `NULL`. |
|
|
|
|
значень в базі данних у вигляді `NULL`. Ви можете пропустити цей крок, якщо значення дати є [обовʼязковим](tutorial-core-validators.md#required). |
|
|
|
|
|
|
|
|
|
Формат по-замовчуванню, вибір дати і валідація значення дати міститься в `Yii::$app->formatter->dateFormat`, так що, ви можете використовувати |
|
|
|
|
ці властивості, щоб налаштувати формат дати для всієї програми. |
|
|
|
|
Формат за замовчуванням для вибору дати і валідації значення дати міститься в `Yii::$app->formatter->dateFormat`, таким чином, |
|
|
|
|
ви можете використовувати ці властивості, щоб налаштувати формат дати для всього додатку. |
|
|
|
|
Щоб змінити формат дати ви повинні налаштувати [[yii\validators\DateValidator::format]] та [[yii\jui\DatePicker::dateFormat]]. |
Borales
10 years ago