下拉列表插件 jquery.sexyCombo使用

插件下载地址:http://code.google.com/p/sexy-combo/

使用过程中发现一个问题就是多选不好使.

View Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.sexy.combo</title>
<style>
div,ul,li,input{padding:0px;margin:0px;}
</style>
<link href="css/sexy-combo.css" rel="stylesheet" type="text/css" />
<link href="css/sexy/sexy.css" rel="stylesheet" type="text/css" />
<link href="css/custom/custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.sexy-combo.js"></script>
<script>
$(function(){
    //1.将select转换为sexyCombo
    $("#aList").sexyCombo({
        triggerSelected:true    
    });    
    //获取选中值
    $("#getValue1").click(function(){
        alert($("#aList").val());    
    });
    //2.使用js在指定容器内创建一个sexyCombo,并加载数组数据
    var data=[
        {value:"1",text:"香蕉"},
        {value:"2",text:"西瓜",selected:true},
        {value:"3",text:"苹果"}
    ];
    var a = $.sexyCombo.create({
        name: "combo1",
        id: "combo1",
        container: "#aContainer",
        data: data,
        multiple:true
    });
    console.log(a);
    //获取选中项值
    $("#getValue2").click(function(){
        alert("text:"+a.getTextValue()+"_value:"+a.getHiddenValue());    
    });
    //3.使用js在指定容器内创建一个sexyCombo,并加载远程数据
    $.sexyCombo.create({
        name: "ajax-combo",
        id: "ajax-combo",
        container: "#ajax-container",
        url: "example.json"
    });
    //4.将select转换为sexyCombo
    $("#bList").sexyCombo({
        skin: "custom"
    });    
    
    
});

</script>
</head>

<body>
1.将select转换为sexyCombo<br/>
<select id="aList">
    <option value="1">大太监</option>
    <option value="3">麻辣女兵</option>
    <option value="7" selected="selected">十面埋伏</option>
    <option value="8">功夫熊猫</option>
    <option value="9">八卦宗师</option>
</select> <a id="getValue1" href="javascript:void(0)">获取选中项</a>
<br/>
2.使用js在指定容器内创建一个sexyCombo,并加载数组数据<br/>
<div id="aContainer"></div> </select> <a id="getValue2" href="javascript:void(0)">获取选中项</a>
<br/>
3.使用js在指定容器内创建一个sexyCombo,并加载远程数据<br/>
<div id="ajax-container"></div>
<br/>
4.使用自定义样式<br/>
<select id="bList">
    <option value="1">大太监</option>
    <option value="3">麻辣女兵</option>
    <option value="7" selected="selected">十面埋伏</option>
    <option value="8">功夫熊猫</option>
    <option value="9">八卦宗师</option>
</select>

</body>
</html>

Installation

Please follow these instructions to install Sexy Combo:

  1. Download and unpack the archive.
  2. Include jQuery and plugin files to your web page:
<scripttype="text/javascript"src="path_to_plugin/lib/jquery-1.3.2.js"></script>
<scripttype="text/javascript"src="path_to_plugin/lib/jquery.sexy-combo-2.1.2.js"></script>
  1. Include core and skin CSS files to your page:
// core structure
<link rel="stylesheet" type="text/css" href="path_to_plugin/lib/sexy-combo.css"/>
//sexy skin; substitute different skin here if desired
<link rel="stylesheet" type="text/css" href="path_to_plugin/skins/sexy/sexy.css">
  1. Done! Now make your selectboxes look and behave sexy! $("select").sexyCombo();

 

Usage and configuration options

 

Sexy Combo has a number of configuration options that are passed to the plugin in the form of JavaScript object, e.g. $("select").sexyCombo({triggerSelected: true});. The full list of options is:

 

  • (string) skin - name of the skin that will be applied to the combobox. Default is "sexy"
  • (string) suffix - this option allows you to configure text input's name. The suffix will be appended to the name of the selectbox. Default is "sexyCombo".
  • (string) hiddenSuffix - the same as previous, but for the hidden input. Default is "sexyComboHidden".
  • (string) initialHiddenValue - the initial value of the hidden input of the combo. Default is "" (empty string).
  • (string) emptyText - if provided, will be shown when an empty text input has no focus.
  • (bool) autoFill - if true, user's input will be autofilled with the value of the first item of the dropdown list. Default is false.
  • (bool) triggerSelected - if true, the selected option of the selectbox will become the initial value of the combo. Default is false.
  • (function) filterFn - a filter function that determines which options should be in the dropdown list. This function takes two parameters - current text input value and dropdown list item's value, and should return true if item should be in the dropdown list, otherwise false. Default is null.
  • (bool) dropUp - if true, the dropdown list will appear above text input. Default is false.
  • (function) initCallback - function that is called at the end of constrictor. Default is null.
  • (function) initEventsCallback - function that is called at the end of initEvents method. Default is null.
  • (function) showListCallback - function that is called when the dropdown list appears. Default is null.
  • (function) hideListCallback - function that is called when the dropdown list disappears. Default is null.
  • (function) changeCallback - function that is called when both text and hidden inputs values are changed. Default is null.
  • (function) textChangeCallback - function that is called when text input's value is changed. Default is null.
Note that all callback functions are called in the scope of sexyCombo instance, so you have access to all of its methids / properties.

 

 

It is possible to create multiple comboboxes from which users can choose more than one option. All you need is to set "multiple" attribute of your selectbox to true, or set multiple config option to true if you create combo without selectbox. Currently this option does not work with autoFill config option. It will be fixed in one of the futute releases.

 

 

You are also able to create combos without using existing selectboxes. If you want to do this, you should use static method of jQuery.sexyCombo object named create, for example:
      $.sexyCombo.create({
          id :"id",
          name:"name",
          container:"#container",
          data:[
              {value:"1", text:"First option", selected:true},
              {value:"2", text:"Second option"},
              {value:"3", text:"Third option"}
          ]
      });
     

 

Below is the list of configuration options for static creating of comboboxes. You can pass them to the create method together with options we have discussed above.

 

 

  • (string) name - the name of the selectbox that will be created. Optional. Default is "" (empty string).
  • (string) id - the id of the selectbox that will be created. Optional. Default is "" (empty string)
  • (mixed) container - jQuery selector, jQuery object or DOM element that will hold the widget. Optional. Default is $(document).
  • (array) data - data that contains information about combo's options. This is an array of objects, which should have three properties - value(value of the option) and text(text that is displayed for this option) and (optionally) selected (if set to true, option's "selected" attribute will be set to true. Makes sence only with triggerSelected config option set to true). This option is required.
  • (string) url - the URL of JSON object that contains data for combo's options. Object's format is the same as for data option. If specified, data option will be ignored.
  • (object) ajaxData - data that will be passed to AJAX request.
  • (bool) multiple - if true, the combobox will be multiple. Default is false.

 

posted on 2012-12-07 10:50  woshilee  阅读(815)  评论(0)    收藏  举报

导航