Borales
10 years ago
2 changed files with 0 additions and 167 deletions
@ -1,69 +0,0 @@ |
|||||||
Віджети Bootstrap |
|
||||||
================= |
|
||||||
|
|
||||||
> Примітка: Цей розділ знаходиться на стадії розробки. |
|
||||||
|
|
||||||
З коробки Yii включає підтримку розмітки [Bootstrap 3](http://getbootstrap.com/) та компонентів фреймворку |
|
||||||
(також відомий як "Twitter Bootstrap"). Bootstrap є чудовим, адаптивним фреймворком, який може значно прискорити |
|
||||||
процес розробки клієнтської частини сайту. |
|
||||||
|
|
||||||
Ядро Bootstrap представлене двома частинами: |
|
||||||
|
|
||||||
- Основи CSS, такі як система макету сітки, типографія, допоміжні класи і адаптивні утиліти. |
|
||||||
- Готові до використання компоненти, такі як форми, меню, нумерація сторінок (pagination), модальні вікна, вкладки (tabs) і т.д. |
|
||||||
|
|
||||||
Основи |
|
||||||
------ |
|
||||||
|
|
||||||
Yii не загортає основи bootstrap в код PHP, оскільки в цьому випадку, сам по собі HTML є дуже простим. |
|
||||||
Ви можете знайти детальну інформацію про використання основ на [сайті документації bootstrap](http://getbootstrap.com/css/). |
|
||||||
Проте Yii забезпечує зручний спосіб підключення ресурсів bootstrap до ваших сторінок за допомогою всього одного рядка до |
|
||||||
файла `AppAsset.php`, розташованого в каталозі `@app/assets`: |
|
||||||
|
|
||||||
```php |
|
||||||
public $depends = [ |
|
||||||
'yii\web\YiiAsset', |
|
||||||
'yii\bootstrap\BootstrapAsset', // цей рядок |
|
||||||
]; |
|
||||||
``` |
|
||||||
|
|
||||||
Використання bootstrap через менеджер ресурсів Yii дозволяє мінімізувати свої ресурси і обʼєднати із вашими власними |
|
||||||
ресурсами коли це необхідно. |
|
||||||
|
|
||||||
Віджети Yii |
|
||||||
----------- |
|
||||||
|
|
||||||
Найбільш складні компоненти bootstrap загорнуті в Yii віджети, щоб забезпечити більш надійний синтаксис та інтегрувати його з |
|
||||||
можливостями фреймворку. Всі віджети належать до простору імен `\yii\bootstrap`: |
|
||||||
|
|
||||||
- [[yii\bootstrap\ActiveForm|ActiveForm]] |
|
||||||
- [[yii\bootstrap\Alert|Alert]] |
|
||||||
- [[yii\bootstrap\Button|Button]] |
|
||||||
- [[yii\bootstrap\ButtonDropdown|ButtonDropdown]] |
|
||||||
- [[yii\bootstrap\ButtonGroup|ButtonGroup]] |
|
||||||
- [[yii\bootstrap\Carousel|Carousel]] |
|
||||||
- [[yii\bootstrap\Collapse|Collapse]] |
|
||||||
- [[yii\bootstrap\Dropdown|Dropdown]] |
|
||||||
- [[yii\bootstrap\Modal|Modal]] |
|
||||||
- [[yii\bootstrap\Nav|Nav]] |
|
||||||
- [[yii\bootstrap\NavBar|NavBar]] |
|
||||||
- [[yii\bootstrap\Progress|Progress]] |
|
||||||
- [[yii\bootstrap\Tabs|Tabs]] |
|
||||||
|
|
||||||
*Використання .less файлів в Bootstrap* |
|
||||||
------------------------------------------- |
|
||||||
|
|
||||||
Якщо ви хочете включити [CSS Bootstrap напряму до ваших less файлів](http://getbootstrap.com/getting-started/#customizing) |
|
||||||
вам необхідно відключити завантаження оригінальних bootstrap css файлів. |
|
||||||
Ви можете зробити це, встановивши CSS властивість [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] порожньою. |
|
||||||
Для цього вам необхідно налаштувати [компонент додатка](structure-application-components.md) `assetManager` наступним чином: |
|
||||||
|
|
||||||
```php |
|
||||||
'assetManager' => [ |
|
||||||
'bundles' => [ |
|
||||||
'yii\bootstrap\BootstrapAsset' => [ |
|
||||||
'css' => [], |
|
||||||
] |
|
||||||
] |
|
||||||
] |
|
||||||
``` |
|
@ -1,98 +0,0 @@ |
|||||||
Віджети jQuery UI |
|
||||||
================= |
|
||||||
|
|
||||||
> Примітка: Цей розділ знаходиться на стадії розробки. |
|
||||||
|
|
||||||
Yii включає підтримку бібліотеки [jQuery UI](http://api.jqueryui.com/) в офіційному розширенні. jQuery UI є |
|
||||||
зберігачем набору інтерфейсів користувача, який забезпечує роботу з ефектами, віджетами і темами, що побудований |
|
||||||
на основі JavaScript-бібілотеки jQuery. |
|
||||||
|
|
||||||
Встановлення |
|
||||||
------------ |
|
||||||
|
|
||||||
Кращим способом для встановлення даного розширення є встановлення через [composer](http://getcomposer.org/download/). |
|
||||||
|
|
||||||
Запустіть |
|
||||||
|
|
||||||
``` |
|
||||||
php composer.phar require --prefer-dist yiisoft/yii2-jui "*" |
|
||||||
``` |
|
||||||
|
|
||||||
або додайте |
|
||||||
|
|
||||||
``` |
|
||||||
"yiisoft/yii2-jui": "*" |
|
||||||
``` |
|
||||||
|
|
||||||
в потрібний розділ `composer.json` файлу. |
|
||||||
|
|
||||||
Віджети Yii |
|
||||||
----------- |
|
||||||
|
|
||||||
Найбільш складні компоненти jQuery UI загорнуті в Yii віджети, щоб запезпечити більш надійний синтаксис та інтегрувати |
|
||||||
з можливостями фреймворку. Всі віджети належать до простору імен `\yii\jui`: |
|
||||||
|
|
||||||
- [[yii\jui\Accordion|Accordion]] |
|
||||||
- [[yii\jui\AutoComplete|AutoComplete]] |
|
||||||
- [[yii\jui\DatePicker|DatePicker]] |
|
||||||
- [[yii\jui\Dialog|Dialog]] |
|
||||||
- [[yii\jui\Draggable|Draggable]] |
|
||||||
- [[yii\jui\Droppable|Droppable]] |
|
||||||
- [[yii\jui\Menu|Menu]] |
|
||||||
- [[yii\jui\ProgressBar|ProgressBar]] |
|
||||||
- [[yii\jui\Resizable|Resizable]] |
|
||||||
- [[yii\jui\Selectable|Selectable]] |
|
||||||
- [[yii\jui\Slider|Slider]] |
|
||||||
- [[yii\jui\SliderInput|SliderInput]] |
|
||||||
- [[yii\jui\Sortable|Sortable]] |
|
||||||
- [[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 в базі даних. |
|
||||||
|
|
||||||
В цій ситуації є 3 компоненти, що взаємодіють між собою: |
|
||||||
|
|
||||||
- Віджет [[yii\jui\DatePicker|DatePicker]], який використовується в формі для відображення поля введення атрибуту моделі. |
|
||||||
- Компонент додатку [formatter](output-formatter.md), який відповідає за формат дати, що відображається користувачеві. |
|
||||||
- [DateValidator](tutorial-core-validators.md#date), який перевіряє що ввів користувач і конвертує в мітку часу Unix. |
|
||||||
|
|
||||||
Спершу ми додамо поле вибору дати до форми, використовуючи метод [[yii\widgets\ActiveField::widget()|widget()]] поле форми: |
|
||||||
|
|
||||||
```php |
|
||||||
<?= $form->field($model, 'deadline')->widget(\yii\jui\DatePicker::className(), [ |
|
||||||
// якщо ви використовуєте bootstrap, наступний рядок буде встановлювати правильний стиль для поля вводу |
|
||||||
'options' => ['class' => 'form-control'], |
|
||||||
// ... ви можете налаштувати більше властивостей DatePicker тут |
|
||||||
]) ?> |
|
||||||
``` |
|
||||||
|
|
||||||
Другим кроком буде налаштування валідатора дати в [методі моделі rules()](input-validation.md#declaring-rules): |
|
||||||
|
|
||||||
```php |
|
||||||
public function rules() |
|
||||||
{ |
|
||||||
return [ |
|
||||||
// ... |
|
||||||
|
|
||||||
// забезпечить збереження порожних значень в базі данних у вигляді NULL |
|
||||||
['deadline', 'default', 'value' => null], |
|
||||||
|
|
||||||
// валідація дати і перезапис `deadline` з міткою часу Unix |
|
||||||
['deadline', 'date', 'timestampAttribute' => 'deadline'], |
|
||||||
]; |
|
||||||
} |
|
||||||
``` |
|
||||||
|
|
||||||
Ми можемо також додати [стандартні значення фільтру](input-validation.md#handling-empty-inputs), щоб забезпечити збереження порожніх |
|
||||||
значень в базі данних у вигляді `NULL`. Ви можете пропустити цей крок, якщо значення дати є [обовʼязковим](tutorial-core-validators.md#required). |
|
||||||
|
|
||||||
Формат за замовчуванням для вибору дати і валідації значення дати міститься в `Yii::$app->formatter->dateFormat`, таким чином, |
|
||||||
ви можете використовувати ці властивості, щоб налаштувати формат дати для всього додатку. |
|
||||||
Щоб змінити формат дати ви повинні налаштувати [[yii\validators\DateValidator::format]] та [[yii\jui\DatePicker::dateFormat]]. |
|
Loading…
Reference in new issue