jQuery UI Selectmenu

jQuery UI範例

Selectmenu

ThemeRoller

jQuery插件之-jQuery UI Selectmenu
整个插件一共只有2个文件，一个脚本文件ui.selectmenu.js，一个样式文件ui.selectmenu.css 。需要特别注意下的是该插件除了jQuery库外，还需要jQuery UI库，

jQuery UI 圖片下拉選單 與MySQL Ajax Table Editor結合
php/AjaxTableEditor.php

  

  else if(isset($info['select_icon'])) 
  {

            $inputHtml .= $this->getSelectIconFromArray($info['select_icon'],$inputId,$inputInfo);
      $this->addJavascript($this->getIconJs($info['select_icon'],$col,$mateRowNum),2);
  }    

  

 function getSelectIconFromArray($selArr,$nameAndId,$defaultValue = '', $otherInfo = '')
 {


  $html = ''.$this->langVars->lblSelect.'';
 

  foreach($selArr as $value => $display)
  {
   if($value == $defaultValue)
   {
    $html .= ''.$display.'';

   }
   else
   {
    $html .= ''.$display.'';

   }
  }
  $html .= ''; 

  return $html;
 }

  
 function getIconJs($calInfo,$col,$mateRowNum='')
 {


  $options = isset($calInfo['options']) ? $calInfo['options'] : array();
  $inputId =  $this->instanceName.$col.'_'.$mateRowNum  ;

      return '$("#'.$inputId.'").selectmenu(
           {
    icons: [
     {find: ".icon1", icon: "ui-icon-icon1"},
     {find: ".icon2", icon: "ui-icon-icon2"},
     {find: ".icon3", icon: "ui-icon-icon3"},
  
    
    ]
   }
       
       );';


 }

js/jquery/css/redmond/jquery-ui-1.9.2.custom.css

  
.ui-icon { width: 20px; height: 20px; background-image: url(images/tag_package_200x20.png); }
.ui-icon-icon1 { background-position: 0px 0px; }
.ui-icon-icon2 { background-position: -25px 0px; }
.ui-icon-icon3 { background-position: -50px 0px; }