Yii 1.1: etagger

Yii extension wrapping the jQuery UI Tagger Widget
18 followers

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:

none

Or in the bounded case:

none

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

Total 4 comments

#10465 report it
paskuale at 2012/10/30 08:25am
autocomplete

Hi, thanks for share, small sample for autocomplete cases?

#8223 report it
morteza at 2012/05/19 07:55am
problem

hi. Problem in file extract "ETagger-v0.1.zip"

#8154 report it
Raoul at 2012/05/13 06:20am
good

First "out of the box" test : it works just fine !

Good work denn1s ... and thanks for this extension

#8149 report it
Denn1s at 2012/05/13 02:29am
By the author

This is my very first extension, so comments and recommendations will be very appreciated. Just please try to be gentle.

Recommendations for the JQuery UI widget will be relied to the author.

Leave a comment

Please to leave your comment.

Create extension