如何設置不同的jQuery相同的控件的多個實例？

Question

我有在同一頁多個jquery組合框，我想設置每個不同的寬度（和其他樣式）。修改這些jquery類更改所有這些，但我想單獨設計樣式。怎麼做？

Here's a working example
OR
，如果你喜歡，你可以只查看下面的代碼。


CSS：（這改變了所有的人）

.ui-combobox-input 
{ 
    margin: 0; /*original value*/ 
    padding: 0.3em; /*original value*/ 
    width: 90px; /*change the default autocomplete textbox width (too wide)*/ 
} 
/*this is for the dropdown box*/ 
.ui-autocomplete 
{ 
    max-height: 400px; /*limits dropdown list height*/ 
    overflow-y: auto; /* prevent horizontal scrollbar */ /*limits dropdown list height*/ 
    overflow-x: hidden; /* add padding to account for vertical scrollbar */ /*limits dropdown list height*/ 
    z-index:1000 !important; /*limits dropdown list height*/ 
} 

HTML

<div id="searchControlsBasic" runat="server" class="searchControlsBasic"> 
    <div id="minPrice"> 
     <select id="selMinPrice" class="selMinPrice" tabindex="3"> 
      <option value=「」>No Min</option> 
      <option value=「50000」>50,000</option> 
      <option value=「75000」>75,000</option> 
     </select> 
    </div> 
    <div id="maxPrice"> 
     <select id="selMaxPrice" class="selMaxPrice" tabindex="4"> 
      <option value=「」>No Max</option> 
      <option value=「50000」>50,000</option> 
      <option value=「75000」>75,000</option> 
     </select> 
    </div> 
    <div id="beds"> 
     <select id="selBeds" class="selBeds" tabindex="5"> 
      <option value=「0」>0+</option> 
      <option value=「1」>1+</option> 
      <option value=「2」>2+</option> 
     </select> 
    </div> 
    <div id="baths"> 
     <select id="selBaths" class="selBaths" tabindex="6"> 
      <option value=「0」>0+</option> 
      <option value=「1」>1+</option> 
      <option value=「1.5」>1.5+</option> 
     </select> 
    </div> 
</div> 

的Javascript：（幾乎是一樣的組合框演示）

$(document).ready(function() 
{ 
    $.widget("ui.combobox", { 
     _create: function() 
     { 
      var input, 
        self = this, 
        select = this.element.hide(), 
        selected = select.children(":selected"), 
        value = selected.val() ? selected.text() : "", 
        wrapper = this.wrapper = $("<span>") 
         .addClass("ui-combobox") 
         .insertAfter(select); 

      input = $("<input>") 
        .appendTo(wrapper) 
        .val(value) 
        .addClass("ui-state-default ui-combobox-input") 
        .autocomplete({ 
         delay: 0, 
         minLength: 0, 
         autoFocus: true, 
         source: function (request, response) 
         { 
          var requestTermNoCommas = request.term.replace(/,/g, ""); 
          //var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); //original 
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(requestTermNoCommas), "i"); 
          response(select.children("option").map(function() 
          { 
           var text = $(this).text(); //original 
           var textNoCommas = $(this).text().replace(/,/g, ""); 
           //if (this.value && (!request.term || matcher.test(text))) //original 
           if (this.value && (!request.term || matcher.test(textNoCommas))) 
            return { 
             //label: text.replace(//original 
             label: textNoCommas.replace(
              new RegExp(
               "(?![^&;]+;)(?!<[^<>]*)(" + 
               //$.ui.autocomplete.escapeRegex(request.term) + //original 
               $.ui.autocomplete.escapeRegex(requestTermNoCommas) + 
               ")(?![^<>]*>)(?![^&;]+;)", "i" 
              ), "<strong>$1</strong>") 
              // adds the thousands comma seperator after every third digit and takes into account the optional bold html markup 
              .replace(/((<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?)(?=((<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?)+(?!(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?))/g, "$1,"), 
             value: text, 
             option: this 
            }; 
          })); 
         }, 
         select: function (event, ui) 
         { 
          ui.item.option.selected = true; 
          self._trigger("selected", event, { 
           item: ui.item.option 
          }); 
         }, 
         change: function (event, ui) 
         { 
          if (!ui.item) 
          { 
           var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), 
            valid = false; 
           select.children("option").each(function() 
           { 
            if ($(this).text().match(matcher)) 
            { 
             this.selected = valid = true; 
             return false; 
            } 
           }); 
           // disabling this block since we want to leave custom values in combobox (that are conforming) 
           /*if (!valid) 
           { 
            // remove invalid value, as it didn't match anything 
            $(this).val(""); 
            select.val(""); 
            input.data("autocomplete").term = ""; 
            return false; 
           }*/ 
          } 
         } 
        }) 
        .addClass("ui-widget ui-widget-content ui-corner-left") 
        .focus(function() // for selecting text on focus 
        { 
         // fixes a bug in chrome, firefox, and safari as well (opposed to just using $(this).select()) 
         $(this).select().mouseup(function (e) 
         { 
          e.preventDefault(); 
          $(this).unbind("mouseup"); 
         }); 
        }); 

      input.data("autocomplete")._renderItem = function (ul, item) 
      { 
       return $("<li></li>") 
         .data("item.autocomplete", item) 
         .append("<a>" + item.label + "</a>") 
         .appendTo(ul); 
      }; 

      $("<a>") 
        .attr("tabIndex", -1) 
        .attr("title", "Show All Items") 
        .appendTo(wrapper) 
        .button({ 
         icons: { 
          primary: "ui-icon-triangle-1-s" 
         }, 
         text: false 
        }) 
        .removeClass("ui-corner-all") 
        .addClass("ui-corner-right ui-combobox-toggle") 
        .click(function() 
        { 
         // close if already visible 
         if (input.autocomplete("widget").is(":visible")) 
         { 
          input.autocomplete("close"); 
          return; 
         } 

         // work around a bug (likely same cause as #5265) 
         $(this).blur(); 

         // pass empty string as value to search for, displaying all results 
         input.autocomplete("search", ""); 
         input.focus(); 
        }); 
     }, 

     destroy: function() 
     { 
      this.wrapper.remove(); 
      this.element.show(); 
      $.Widget.prototype.destroy.call(this); 
     } 
    }); 
}); 

$(document).ready(function() 
{ 
    // setup min & max price, beds, and baths comboboxes 
    $(".selMinPrice").combobox(); 
    $(".selMaxPrice").combobox(); 
    $(".selBeds").combobox(); 
    $(".selBaths").combobox(); 
    $("#toggle").click(function() 
    { 
     $(".selMinPrice").toggle(); 
     $(".selMaxPrice").toggle(); 
     $(".selBeds").toggle(); 
     $(".selBaths").toggle(); 
    }); 
}); 

Answer 1

您可以嘗試

#minPrice .ui-combobox-input { 
    width:400px; 
} 

#maxPrice .ui-combobox-input { 
    width:300px; 
} 

#beds .ui-combobox-input { 
    width:200px; 
} 

#baths .ui-combobox-input { 
    width:100px; 
}