Yii Framework development tutorial Zii component-Selectable example

CJuiSelectable can display a list. Each item in the List supports Select events. It encapsulates the JUI Selectable plug-in. Its basic usage is as follows: [php] <? Php Yii: app ()-> clientScript-> registerCss ('selectable', "# selectable {list-style-type: none; margin: 0; padding: 0; width: 60% ;}# selectable li {margin: 2px; padding: 4px; border: 1px solid # e3e3e3; background: # f7f7f7} # selectable. ui-selecting {border: 1px solid # fad42e;} # selectable. ui-selected {border: 1px solid # fad42e; background: # fcefa1;} # select-result {margin: 0 0 10px 2px;} ", 'scre En', CClientScript: POS_HEAD);?> <H2> <? Php echo 'selectable';?> </H2> <div id = "select-result"> none </div> <? Php $ this-> widget ('zii. widgets. jui. CJuiSelectable, array ('id' => 'selectable', 'items '=> array ('id1' => 'item 1 ', 'id2' => 'item 2', 'id3 '=> 'item 3'), 'options' => array ('stop' => 'js: function (event, ui) {var result = $ ("# select-result "). emptyempty (); $ (". ui-selected ", this ). each (function () {var index = $ ("# selectable li "). index (this); result. append ("#" + (index + 1) ;};}');?> <? PhpYii: app ()-> clientScript-> registerCss ('selectable', "# selectable {list-style-type: none; margin: 0; padding: 0; width: 60% ;}# selectable li {margin: 2px; padding: 4px; border: 1px solid # e3e3e3; background: # f7f7f7} # selectable. ui-selecting {border: 1px solid # fad42e;} # selectable. ui-selected {border: 1px solid # fad42e; background: # fcefa1;} # select-result {margin: 0 0 10px 2px;} ", 'screen', CC LientScript: POS_HEAD);?> Www.2cto.com