etagger Follow @yiiframework

The JQuery UI Tagger widget allows your users to enter a bounded or unbounded list of attributes in a text field in a "comma separated" way. Forming tags in process. For example:

Or in the bounded case:

The tags are formed just after the "," is pressed.

Requirements ¶

Yii 1.1 or above

Instalation ¶

Extract the contents of the zip file directly into protected/extensions/

Usage ¶

Simple usage ¶

echo CHtml::label("Tags for your post:","widget");
    $this->widget('ext.ETagger.ETagger', array('name'=>'widget'));

Custom options ¶

echo CHtml::label("Enter your 5 favorite car manufacturers:","widget3");
    $this->widget('ext.ETagger.ETagger', array(
        'name'=>'widget3',
        'keywords'=>array('Ferrari','Audi','BMW','Nissan'),
        'width'=>'500px',
        'limit'=>5,
        'options'=> array(
            'useColorFunction'=>true,
            'colorFunction'=>'js:function(label) {
                    switch (label) {
                        case "Ferrari":
                            return {font:"#FFF", background:"#D32232"};
                        case "BMW":
                            return {font:"#FFF", background:"#2F749E"};
                        case "Audi":
                            return {font:"#C1C1C1", background:"#505962"};
                        case "Nissan":
                            return {font:"#FFF", background:"#274A84"};
                        default:
                            return{font:"#FFF", background:"#318038"};
 
                    }
                }',
            'closeChar'=>'o',
        ),
    ));

Linked model ¶

$model = User::model()->findByPk(1);
    $this->widget('ext.ETagger.ETagger', array(
        'model'=>$model,
        'attribute'=>'interests',
        'width'=>'300px',
        'options'=> array(
            'closeChar'=>'X',
        ),
    ));

It should work in conjunction with jquery ui autocomplete extension

Configuration ¶

The following parameters are accepted by the widget:

• model: the data model associated with this widget
• attribute: the attribute associated with this widget
• separator: the separator for the keywords (default=',')
• name: the name of the input field. This must be set if [model] is not set.
• keywords: array of data for filling the default values.
• width: width of the resulting element, css valid (ex: "500px")
• limit: int number of tags to be allowed
• tagClass: name of the CSS class to be applied to each tag (span element) (default='tag')
• taggerWrapperClass: name of the CSS class to the tag container (div element) (default='tagger-input-container')
• options: array of additional options for the jQuery UI Tagger Widget. Please refer to the wiki in the project page for more info on this options
• useDefaultCSS: boolean that tells the extension if it should load a default set of styles for the tags and their container (default=true). Please note that the recommended usage is to set this to false and use [tagClass] and [taggerWrapperClass] to your own styles.

Resources ¶

JQuery UI Tagger project page

Demo: TODO