yii-selectize Wrapper for the Brian Reavis' jQuery selectize.js UI control

  1. What's new
  2. Requirements
  3. Setup
  4. Usage
  5. single selection: using active record
  6. single selection: used alongside twitter bootstrap
  7. single selection: without active record
  8. multiple selection (tagging)
  9. using events callbacks
  10. widgetFactory configuration example (main.php)
  11. Resources

yii-selectize is a wrapper for the jQuery selectize.js UI control created by Brian Reavis. This extension can be used with or without a model. It also supports configuration using widgetFactory and provides basic css adjustment to work with the default Yii 1.x theme or Twitter Bootstrap.

What's new

  • Added example module
  • Updated selectize.js to version 0.9.0

Requirements

  • Yii 1.1 (tested on version 1.1.14)

Setup

  • Extract the downloaded file in your extensions folder (protected/extensions/)

Usage

Note: a demo module is available in the "example" folder. Just copy it from the example folder to your modules folders and enable it in your config file.

single selection: using active record

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ), 
    'fullWidth' => false,
    'placeholder' => 'Write here!',
));

single selection: used alongside twitter bootstrap

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'useWithBootstrap' => true,
//    'cssTheme' => 'bootstrap2', // uncomment to use v2 theme instead of v3
    'fullWidth' => false,
));

single selection: without active record

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'name' => 'test2',
    'value' => 'world', // the selected item
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
));

multiple selection (tagging)

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'name' => 'test4',
    'value' => 'world',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'selectedValues' => array('hello', 'world'),
    'fullWidth' => false,
    'htmlOptions' => array(
        'style' => 'width: 50%',
    ),
    'multiple' => true,
));

using events callbacks

php:
$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'callbacks' => array(
        'onChange' => 'myOnChangeTest',
        'onOptionAdd' => 'newTagAdded',
    ),
));
javascript:
[javascript]
function myOnChangeTest(value) {
    console.log(value);
}

function newTagAdded(value, $item) {
    console.log('new item: ' + value);
    console.log($item);
}

widgetFactory configuration example (main.php)

'widgetFactory' => array(
    'widgets' => array(
        'YiiSelectize' => array(
            'defaultOptions' => array(
                'create' => false,
            ),
        ),
    ),
),

Resources

8 0
22 followers
1 532 downloads
Yii Version: Unknown
License: MIT
Category: User Interface
Developed by: Giovanni D.
Created on: Aug 11, 2013
Last updated: 4 years ago

Downloads

show all

Related Extensions