Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

1.0b1

  • Loading branch information...
commit 0ee1805666102d98183d01766092e7cf13edf4d5 1 parent d472bc4
@jslayer authored
View
0  README
No changes.
View
1  README.md
@@ -0,0 +1 @@
+README
View
141 combobox.html
@@ -0,0 +1,141 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>jQuery Combobox Plugin: Demo page</title>
+ <link href="css/combobox.css" rel="stylesheet" type="text/css">
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
+ <script src="combobox.js"></script>
+ <script>
+ $(function() {
+ $('#select1').combobox();
+ $('#select2').combobox({
+ listMaxHeight: 180,
+ forceScroll: true/*,
+ hideSelected: true*/
+ });
+ $('#select3').combobox({});
+ $('#select4').combobox({});
+ $('#select5').combobox({}).bind('update_position', function(e, offset) {
+ offset.left += 5;
+ });
+
+ $('#select6').combobox({
+ btnWidth: 20,
+ hoverEnabled: true,
+ listMaxHeight: 134,
+ forceScroll: true
+ });
+ });
+ </script>
+</head>
+<body>
+ <form action="post.php" method="post">
+ <input type="text" value="Lorem" ipsum="" />
+ <select name="select-1" id="select1" zdisabled="disabled">
+ <option value='123'>Lorem</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ </select>
+
+ text
+
+ <select name="select-2" id="select2">
+ <option value='123'>Lorem</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ <option>Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ </select>
+
+ <select name="select-3[]" id="select3" multiple="multiple">
+ <option value='123'>Lorem</option>
+ <option value="b">Ipsum</option>
+ <option>Dolor</option>
+ <option>Dolor sit amet</option>
+ </select>
+
+ <select name="select-4[]" id="select4" multiple="multiple">
+ <optgroup label="group1">
+ <option selected="selected">group1 option1</option>
+ <option selected="selected">group1 option2</option>
+ <option>group1 option3</option>
+ </optgroup>
+ <optgroup label="group2">
+ <option>group2 option1</option>
+ <option>group2 option2</option>
+ <option>group2 option3</option>
+ </optgroup>
+ <option>simple option1</option>
+ <option selected="selected">simple option2</option>
+ <option selected="selected">simple option3</option>
+ </select>
+
+ <select name="select-5" id="select5">
+ <optgroup label="group1">
+ <option>group1 option1</option>
+ <option>group1 option2</option>
+ <option>group1 option3</option>
+ </optgroup>
+ <optgroup label="group2">
+ <option>group2 option1</option>
+ <option>group2 option2</option>
+ <option>group2 option3</option>
+ </optgroup>
+ <option>simple option1</option>
+ <option>simple option2</option>
+ <option>simple option3</option>
+ </select>
+
+ <select name="select-6" id="select6">
+ <option value="1900">1900</option><option value="1901">1901</option><option value="1902">1902</option><option value="1903">1903</option><option value="1904">1904</option><option value="1905">1905</option><option value="1906">1906</option><option value="1907">1907</option><option value="1908">1908</option><option value="1909">1909</option><option value="1910">1910</option><option value="1911">1911</option><option value="1912">1912</option><option value="1913">1913</option><option value="1914">1914</option><option value="1915">1915</option><option value="1916">1916</option><option value="1917">1917</option><option value="1918">1918</option><option value="1919">1919</option><option value="1920">1920</option><option value="1921">1921</option><option value="1922">1922</option><option value="1923">1923</option><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option value="1954">1954</option><option value="1955">1955</option><option value="1956">1956</option><option value="1957">1957</option><option value="1958">1958</option><option value="1959">1959</option><option value="1960">1960</option><option value="1961">1961</option><option value="1962">1962</option><option value="1963">1963</option><option value="1964">1964</option><option value="1965">1965</option><option value="1966">1966</option><option value="1967">1967</option><option value="1968">1968</option><option value="1969">1969</option><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option><option value="1975">1975</option><option value="1976">1976</option><option value="1977">1977</option><option value="1978">1978</option><option value="1979">1979</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option selected="selected" value="2011">2011</option>
+ </select>
+
+ <input type="submit" />
+ <input type="reset" />
+ </form>
+</body>
+</html>
View
524 combobox.js
@@ -0,0 +1,524 @@
+/*
+ * jQuery Combobox Plugin 1.0b1
+ * Copyright 2011 Eugene Poltorakov (http://poltorakov.com)
+ * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
+ *
+ * There are several event which triggered from this plugin on select element.
+ * - update_position - Trigger before update position of dropdown.
+ * It gets calculated offset object as second argument which could be changed to affect position of dropdown;
+ * - before_show - trigger before show dropdown;
+ * - before_hide - trigger before hide dropdown;
+ * - combo_init - trigger after init;
+ *
+ */
+(function($, undefined ) {
+ var Combobox = function(element, options) {
+ var self = this,
+ $element = $(element),
+ _hover_inited = false;
+
+ if (element.combobox != undefined) {
+ return false;
+ }
+
+ element.combobox = self;
+
+ self.options = options;
+ self.element = element;
+ self.$element = $element;
+ self.multiple = element.multiple;
+
+ //create new elements and make link to the object on it
+ (self._list = (self.list = $('<ul class="' + self.options.classes.list + (self.multiple ? ' ' + self.options.classes.multiple : '') + '" />')).get(0)).combobox = self;
+
+ if (!self.multiple) {
+ (self._wrapper = (self.wrapper = $('<div class="' + self.options.classes.wrapper + '" />')).get(0)).combobox = self;
+ (self._selected = (self.selected = $('<div class="' + self.options.classes.selected + '" />')).get(0)).combobox = self;
+ (self._button = (self.button = $('<div class="' + self.options.classes.button + '">+</div>')).get(0)).combobox = self;
+ }
+
+ //bind select events
+ self.$element.bind('change', function(e) {
+ self.updateSelected();
+ }).bind('focus', function(e) {
+ self.focus();
+ }).bind('blur', function(e) {
+ self.blur();
+ }).bind('keyup', function(e){
+ switch(e.which) {
+ case 38:
+ case 40:
+ self.updateSelected();
+ break;
+ }
+ });
+
+ var _form = self.element.form;
+ if (_form.combobox_reset_processed === undefined) {
+ _form.combobox_reset_processed = true;
+ $(_form).bind('reset', function(e) {
+ setTimeout(function(){
+ $.each(_form.elements, function() {
+ if (this.tagName == 'SELECT') {
+ this.combobox.updateSelected();
+ }
+ });
+ }, 1);
+ });
+ }
+
+ if (!self.multiple) {
+ self.wrapper.bind('click', function(e) {
+ if (self.isDisabled()) {
+ return false
+ }
+ if (self.blocked) {
+ return false;
+ }
+ if (self.state) {
+ self.hide();
+ }
+ else {
+ if (!_hover_inited) {
+ _hover_inited = true;
+ //hide droplist when cursor is going outside
+ self.list.add(self.button).add(self.selected).hover(function(e) {
+ clearTimeout(self.timer);
+ }, function(e) {
+ self.timer = setTimeout(function() {
+ self.hide();
+ }, 400);
+ });
+ }
+ self.show();
+ }
+ return false;
+ });
+ }
+
+ if (self.options.hoverEnabled && !self.multiple) {
+ self.wrapper.hover(function() {
+ self.wrapper.addClass(self.options.classes.wrapHover);
+ }, function() {
+ //@todo - check lines above - it could be problems here (class will not remove)
+ if (!self.blocked && !self.state) {
+ self.wrapper.removeClass(self.options.classes.wrapHover);
+ }
+ });
+ }
+
+ //collect select styles
+ self.width = (self.options.width ? self.options.width : self.$element.outerWidth());
+ self.height = (self.options.height ? self.options.height : self.$element.outerHeight());
+ self.btnWidth = (self.options.btnWidth);
+
+ var display = $.browser.msie && $.browser.version.match(/^\d+/)[0] < 8 ? 'inline' : 'inline-block';
+
+ if (!self.multiple) {
+ self.wrapper.css({
+ display: display,
+ width: self.width,
+ height: self.height
+ });
+ self.button.css({
+ width: self.btnWidth,
+ height: self.height,
+ display: 'inline-block'
+ });
+ self.selected.css({
+ width: self.width - self.btnWidth,
+ height: self.height,
+ display: 'inline-block'
+ });
+ self.list.css({
+ width: self.width,
+ position: 'absolute'
+ });
+ }
+ else {
+ self._list.style.display = display;
+ self._list.style.width = self.width + 'px';
+ }
+
+ if (!self.multiple) {
+ self.wrapper.append(self.button);
+ self.wrapper.append(self.selected);
+ self.wrapper.insertAfter(self.$element);
+ }
+ else {
+ self.list.insertAfter(self.$element);
+ }
+
+ //init
+ self.updateDisabled();
+ self.rebuild();
+ self.updateSelected();
+
+ if (!self.multiple) {
+ self._list.style.display = 'none';
+ $('body').append(self.list);
+ }
+ self.element.style.position = 'absolute';
+ self.element.style.top = '-9999px';
+ self.element.style.left = '-9999px';
+
+ self.$element.trigger('combo_init');
+ };
+
+ $.extend(Combobox.prototype, {
+ state: false,
+ blocked: false,
+ timer: null,
+ value: null,
+ disabled: false,
+ multiple: false,
+ isCTRL: false,
+ groups: false,
+ default_options: {
+ width: false,
+ height: false,
+ btnWidth: 15,
+ showSpeed: 'fast',
+ hideSpeed: 'fast',
+ hideSelected: false,
+ listMaxHeight: false,
+ hoverEnabled: false,
+ forceScroll: false
+ },
+ default_classes: {
+ wrapper: 'combo-wrapper',
+ focus: 'combo-focus',
+ disabled: 'combo-disabled',
+ multiple: 'combo-multiple',
+ button: 'combo-button',
+ group: 'combo-group',
+ groupLabel: 'combo-group-label',
+ list: 'combo-list',
+ selected: 'combo-selected',
+ itemHover: 'combo-item-hover',
+ itemActive: 'combo-item-active',
+ wrapHover: 'combo-wrapper-hover',
+ wrapActive: 'combo-wrapper-active',
+ listLong : 'combo-list-long'
+ },
+ rebuild: function() {
+ var self = this,
+ elements = new Object,
+ _html = '';
+
+ self.groups = self.$element.find('optgroup:first').length == 0 ? false : true;
+
+ if (self.groups) {
+ self.$element.children().each(function(){
+ switch(this.tagName) {
+ case 'OPTION':
+ elements[this.index] = {
+ text: this.text,
+ value: this.value
+ };
+
+ _html += '<li>'+ elements[this.index].text +'</li>';
+ break;
+ case 'OPTGROUP':
+ var $optgroup = $(this),
+ $options = $optgroup.children('option');
+
+ //if group have options
+ if ($options.length > 0) {
+ var label = $optgroup.attr('label');
+ if (label != undefined) {
+ _html += '<li class="'+ self.options.classes.groupLabel +'">' + label + '</li>';
+ }
+ _html += '<li class="'+ self.options.classes.group +'"><ul>';
+ $options.each(function() {
+ elements[this.index] = {
+ text: this.text,
+ value: this.value
+ };
+
+ _html += '<li>'+ this.text +'</li>';
+ });
+ _html += '</ul></li>';
+ }
+ break;
+ }
+ });
+ }
+ else {
+ self.$element.find('option').each(function() {
+ elements[this.index] = {
+ text: this.text,
+ value: this.value
+ };
+
+ _html += '<li>'+ this.text +'</li>';
+ });
+ }
+ self.list.html(_html);
+
+ var $children = !self.groups ? self.list.find('li') : self.list.find('li').not('.' + self.options.classes.groupLabel).not('.' + self.options.classes.group);
+
+ $children.each(function(index) {
+ this.combobox_index = index;
+ this.combobox_value = elements[index].value;
+ });
+
+ if (self.options.hoverEnabled) {
+ $children.hover(function() {
+ $(this).addClass(self.options.classes.itemHover);
+ }, function(){
+ $(this).removeClass(self.options.classes.itemHover);
+ });
+ }
+
+ $children.click(function() {
+ if (self.isDisabled()) {
+ return false
+ }
+ var children = self.$element.find('option');
+
+ if (!self.multiple || !Combobox.isCTRL) {
+ children.filter(':selected').attr('selected', null);
+ }
+
+ if (self.multiple && Combobox.isCTRL && children.get(this.combobox_index).selected == true) {
+ children.get(this.combobox_index).selected = false;
+ }
+ else {
+ children.get(this.combobox_index).selected = true;
+ }
+
+ self.$element.change();
+ self.updateSelected();
+ if (!self.multiple) {
+ self.hide();
+ }
+ self.removeSelection();
+ });
+
+ return self;
+ },
+ updateSelected: function() {
+ var self = this,
+ $children = !self.groups ? self.list.find('li') : self.list.find('li').not('.' + self.options.classes.groupLabel).not('.' + self.options.classes.group),
+ $selected = self.$element.find('option').filter(':selected');
+
+ if (!self.multiple) {
+ self.selected.text($selected.text());
+ }
+
+ $children.filter('.' + self.options.classes.itemActive).removeClass(self.options.classes.itemActive);
+ if ($selected.length == 0) {
+ self.value = null;
+ }
+ else {
+ var index = $selected.get(0).index;
+ if (self.multiple) {
+ self.value = [];
+ $selected.each(function() {
+ $children.eq(this.index).addClass(self.options.classes.itemActive);
+ self.value[self.value.length] = this.value
+ });
+ }
+ else {
+ self.value = $selected.attr('value');
+ $children.eq($selected.get(0).index).addClass(self.options.classes.itemActive);
+ }
+ }
+ return self;
+ },
+ updatePosition: function() {
+ var self = this;
+
+ if (self.multiple) {
+ return false;
+ }
+
+ var offset = self.wrapper.offset();
+
+ offset = {
+ top: offset.top + self.height,
+ left: offset.left
+ };
+
+ self.$element.trigger('update_position', offset);
+
+ self.list.css(offset);
+
+ return self;
+ },
+ show: function() {
+ var self = this;
+
+ if (self.blocked) {
+ return;
+ }
+
+ self.$element.trigger('before_show');
+
+ if (self.options.hideSelected && !self.multiple) {
+ $children = !self.groups ? self.list.find('li') : self.list.find('li').not('.' + self.options.classes.groupLabel).not('.' + self.options.classes.group),
+
+ $children.show();
+
+ for(i=0; i<$children.length; i++) {
+ if ($children.get(i).combobox_value == self.value) {
+ $children.eq(i).hide();
+ break;
+ }
+ }
+ }
+
+ self.blocked = true;
+ self.wrapper.addClass(self.options.classes.wrapActive);
+
+ var shouldScrollTo = false;
+
+ if (self.options.listMaxHeight) {
+ self.list.css({
+ top: '-9999px',
+ left: '-9999px'
+ });
+
+ if (self.list.height() >= self.options.listMaxHeight) {
+ self.list.addClass(this.options.classes.listLong);
+ if (self.options.forceScroll) {
+ self.list.css({
+ height: self.options.listMaxHeight,
+ overflow: 'auto'
+ });
+ }
+ shouldScrollTo = true;
+ }
+ else {
+ self.list.removeClass(self.options.classes.listLong);
+ }
+
+ self.list.hide();
+ self.updatePosition();
+ self.list.show();
+ }
+ else {
+ this.updatePosition();
+ }
+
+ self.list.slideDown(self.options.showSpeed, function() {
+ self.state = true;
+ self.blocked = false;
+
+ if (shouldScrollTo) {
+ //scroll to the selected element
+ var $item_active = self.list.find('.' + self.options.classes.itemActive);
+
+ if ($item_active.length == 1) {
+ if (self.options.hideSelected) {
+ //try to find nearest element
+ var $near = $item_active.prev();
+
+ if ($near.length == 0) {
+ $near = $item_active.next();
+ }
+ if ($near.length == 1) {
+ self.list.scrollTop($near.get(0).offsetTop);
+ }
+ }
+ else {
+ self.list.scrollTop($item_active.get(0).offsetTop);
+ }
+ }
+ }
+ });
+
+ return self;
+ },
+ hide: function() {
+ var self = this;
+
+ if (self.blocked || !self.state) {
+ return false;
+ }
+
+ self.$element.trigger('before_hide');
+
+ self.blocked = true;
+ self.wrapper.removeClass(self.options.classes.wrapActive);
+
+ if (self.options.hoverEnabled) {
+ //@todo - this class probably shouldn't remove here
+ self.wrapper.removeClass(self.options.classes.wrapHover);
+ }
+
+ if (self.options.hideSpeed == 0) {
+ self.list.hide();
+ self.state = false;
+ self.blocked = false;
+ }
+ else {
+ self.list.slideUp(self.options.hideSpeed, function() {
+ self.state = false;
+ self.blocked = false;
+ });
+ }
+
+ return self;
+ },
+ isDisabled: function() {
+ return this.$element.attr('disabled') == 'disabled' ? true : false;
+ },
+ updateDisabled: function() {
+ var self = this;
+
+ self.disabled = self.isDisabled();
+
+ var target = self.multiple ? self.list : self.wrapper;
+
+ if (self.disabled) {
+ target.addClass(self.options.classes.disabled);
+ }
+ else {
+ target.removeClass(self.options.classes.disabled);
+ }
+
+ return self.disabled;
+ },
+ removeSelection: function() {
+ if (window.getSelection) {
+ window.getSelection().removeAllRanges();
+ }
+ else if (document.selection) {
+ document.selection.empty();
+ }
+ },
+ focus: function() {
+ if (this.wrapper !== undefined) {
+ this.wrapper.addClass(this.options.classes.focus);
+ }
+ else {
+ this.list.addClass(this.options.classes.focus);
+ }
+ },
+ blur: function() {
+ if (this.wrapper !== undefined) {
+ this.wrapper.removeClass(this.options.classes.focus);
+ }
+ else {
+ this.list.removeClass(this.options.classes.focus);
+ }
+ }
+ });
+
+ $(document).keyup(function(e) {
+ if(e.which == 17) Combobox.isCTRL = false;
+ }).keydown(function(e) {
+ if(e.which == 17) Combobox.isCTRL = true;
+ });
+
+ $.fn.combobox = function(options, classes) {
+ options = $.extend({}, Combobox.prototype.default_options, options);
+ options.classes = $.extend({}, Combobox.prototype.default_classes, classes);
+
+ return this.each(function() {
+ var c = new Combobox(this, options);
+ });
+ };
+})(jQuery);
View
10 config.rb
@@ -0,0 +1,10 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "images"
+#javascripts_dir = "javascripts"
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+line_comments = false
+asset_cache_buster :none
View
98 css/combobox.css
@@ -0,0 +1,98 @@
+.combo-wrapper {
+ border: 1px solid #cccccc;
+ color: black;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 21px;
+ cursor: pointer;
+ zoom: 1;
+}
+
+.combo-wrapper-hover {
+ border-color: #4444aa;
+}
+
+.combo-wrapper-active {
+ border-color: #a0a0a0;
+}
+
+.combo-disabled {
+ background: #eeeeee;
+}
+
+.combo-selected {
+ padding: 0 0 0 8px;
+ margin: 0 -8px 0 0;
+ float: left;
+}
+
+.combo-button {
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 22px;
+ color: #cccccc;
+ float: right;
+}
+
+.combo-list {
+ list-style: none;
+ background: #ffffff;
+ padding: 0;
+ margin: 1px 0 0;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ border: 1px solid #efefef;
+ z-index: 9999;
+}
+.combo-list li {
+ padding: 3px 4px;
+ margin: 0;
+ cursor: pointer;
+}
+.combo-list .combo-group-label {
+ font-style: italic;
+ font-weight: bold;
+ cursor: default;
+}
+.combo-list .combo-group {
+ padding: 0;
+ margin: 0;
+}
+.combo-list .combo-group li {
+ width: auto;
+ float: none;
+ padding-left: 10px;
+}
+.combo-list ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ clear: both;
+ overflow: hidden;
+ font-size: 10px;
+}
+
+.combo-multiple {
+ margin: 0;
+ zoom: 1;
+ clear: both;
+ overflow: hidden;
+ border: 1px solid green;
+}
+.combo-multiple li {
+ float: left;
+ width: 100%;
+}
+
+.combo-item-hover {
+ background: #aaaaaa;
+}
+
+.combo-item-active {
+ background: #4444aa;
+ color: #ffffff;
+}
+
+.combo-focus {
+ border-color: yellow;
+}
View
6 post.php
@@ -0,0 +1,6 @@
+<a href="combo.html">BACK</a>
+<br>
+<br>
+<pre>
+<?php print_r($_POST); ?>
+</pre>
View
93 scss/combobox.scss
@@ -0,0 +1,93 @@
+.combo-wrapper {
+ border: 1px solid #cccccc;
+ color: black;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 21px;
+ cursor: pointer;
+ zoom: 1;
+}
+.combo-wrapper-hover {
+ border-color: #4444aa;
+}
+.combo-wrapper-active {
+ border-color: #a0a0a0;
+}
+.combo-disabled {
+ background: #eeeeee;
+}
+.combo-selected {
+ padding: 0 0 0 8px;
+ margin: 0 -8px 0 0;
+ float: left;
+}
+.combo-button {
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 22px;
+ color: #cccccc;
+ float: right;
+}
+.combo-list {
+ list-style: none;
+ background: #ffffff;
+ padding: 0;
+ margin: 1px 0 0;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ border: 1px solid #efefef;
+ z-index: 9999;
+
+ li {
+ padding: 3px 4px;
+ margin: 0;
+ cursor: pointer;
+ }
+ .combo-group-label {
+ font-style: italic;
+ font-weight: bold;
+ cursor: default;
+ }
+ .combo-group {
+ padding: 0;
+ margin: 0;
+
+ li {
+ width: auto;
+ float: none;
+ padding-left: 10px;
+ }
+ }
+ ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ clear: both;
+ overflow: hidden;
+ font-size: 10px;
+ }
+}
+.combo-multiple {
+ margin: 0;
+ zoom: 1;
+ clear: both;
+ overflow: hidden;
+ border: 1px solid green;
+
+ li {
+ float: left;
+ width: 100%;
+ }
+}
+.combo-item-hover {
+ background: #aaaaaa;
+}
+.combo-item-active {
+ background: #4444aa;
+ color: #ffffff;
+}
+.combo-list-long {}
+
+.combo-focus {
+ border-color:yellow;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.