Tuesday, February 24, 2009

Sexy Combo jQuery plugin

Introduction

Sexy Combo is a jQuery plugin that allows you to turn default browser selectboxes into much more attractive and usable comboboxes. The user can choose whether to select option from the dropdown list or just type it. This widget reaches its maximum efficiency when we have selectboxes with lots of options (e.g. countries or states), so it would be difficult for users to find option in the huge list.

The plugin is usable not only for end users, but also for developers. Sexy Combo has a lot of configuration options so you can modify its behaviour and appearance. FRom this version the core CSS file is separated from the CSS that provides combo's appearance, and now you are able to easily create new skins for the plugin.

Examples

Please view demo page to see the possibilities of Sexy Combo.

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:
     <script type="text/javascript" src="path_to_plugin/lib/jquery-1.3.2.js"></script>
     <script type="text/javascript" src="path_to_plugin/lib/jquery.sexy-combo-2.0.js"></script>
     
  3. Include core and skin CSS files to your page:
         <link rel="stylesheet" type="text/css" href="path_to_plugin/lib/sexy-combo.css" />
         <link rel="stylesheet" type="text/css" href="path_to_plugin/skins/skin_name/skin_name.css" />
         
  4. 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.

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.

Appearance customization

In this version I have separated core CSS and presentational CSS, so now it's possible to create new skins for Sexy Combo. The download package contains one example skin. Feel free to create your own based on it.

Browser compatibility

Sexy Combo has been tested and works on the following browsers:

  • Internet Explorer 6 (PC)
  • Internet Explorer 7 (PC)
  • Firefox 1.5 (Linux)
  • Firefox 2 (Linux)
  • Firefox 3 (PC)
  • Opera 9 (PC)

Support project

Every user of Sexy Combo adds some value to it, so you help me by just using it. However, if you want to help more, you can do the following:

  • Tell the world about Sexy Combo. You can write an atricle or a blog post about it or just tell your friends/collegues about it.
  • Test it on browsers that are not currently supported "officially".
  • Report a bug.
  • If you are web designer/developer, I will be glad to collaborate with you. If you have some suggestions on design/programming, feel free to email me at Kadalashvili at Vladimir at gmail dot com.

Please don't donate money, it's needless.

Want to hire JavaScript programmer?

Please view my CV

Resources

Learning of jquery-plugin is simple and easy with our 70-680 dumps and SY0-201 dumps. Learn JQuery to create impressive client-side-based user interface components using 642-813 dumps.

My CV

Vladimir Kadalashvili

Address:

Uzbekistan, Tashkent, Karasu 3, 13, 73

Email: Kadalashvili.Vladimir@gmail.com

Phone: +998903288184

Weblog: http://vladimir-k.blogspot.com

Skills

Programming languages:

PHP, JavaScript, Python, SQL

Databases:

MySQL only. I like to write fast and well-optimized SQL queries. I can also study another database engines if needed.

Markup languages:

XHTML, CSS, XML, XPath, RSS, Atom

Frameworks:

Zend Framework (PHP), Django (Python), jQuery, jQuery UI, Prototype, scriptaculous, ExtJS (JavaScript), Blueprint (CSS)

Frontend development:

Producing standards-compliant and cross-browser XHTML / CSS, understanding concepts of semantic XHTML, ability to make layouts without using tables. Very strong knowledge of writing clean, cross-browser JavaScript. A great experience of working with jQuery (my favourte JavaScript library). I have also some experience with Prototype, but I don't like it so much. Like to use Blueprint as a CSS framework, but able to make layouts from the scratch.

Backend development:

Have a great experience with PHP, my current duties include PHP coding. But I like Python mostly, it's the most beautiful language I think. But I have no a lot of experience with Python.

Coding:

I like to write code for both computers and humans. Have a strong sence of what I call "beautiful code", and I like tools that can help me to produce such a code - jQuery, for example. Have a strong habit to write self- and well-commented code.

Web security:

Understanding the concepts of web security, preventing SQL injections, XSS, DOS attacks. Strong habit to validate user input and log everything.

CMS / Publishing platforms:

WordPress, Drupal, Joomla. Writing plugins / creating themes.

APIs:

Twitter API, Google Chart API, Facebook API, Goolge gadgets API.

Operating systems:

Windows XP, Linux. Prefer working in Linux.

IDEs:

Zend Studio, Macromedia Dreamweaver.

Experience

I am currently working for Witamean web studio. Current duties include writing PHP / JavaScript / CSS code. I have worked at this company for 1.5 years.

I am also developing a number of small open-source projects, so you can evaluate my coding skills. These projects are:

  • Sexy Combo - my favorite and most successful jQuery plugin (more than 1000 downloads from Google Code only). It'sa widget that aims to replace default browser selectboxes - users can not only select values from the list, but also to type them. Nice, usable, customizable, object-oriented. You are strongly encouraged to take a look at it.
  • Rich Array - jQuery plugin for performing various operations with arrays.
  • Sexy Vote - jQuery plugin that is a voting widget similar to Google Groups.
  • Submit Killer - jQuery plugin for killing form submit.
  • Timed Event - jQuery plugin that allows to make buffered and delayed event hadnlers very easily.
  • Progmatic - Google gadget that displays news for programmers from Slashdot, Hacker News, Digg and Reddit. News from each source are displayed in a separate tab.
  • Hot or Not - Google gadget that displays pics from Hot or Not website in a very attractive form, using tabs navigation.
  • Hot or Not Lite - the same as previous one, but without tabs feature.

About you

I want to work in a small team of tech guys where I can do amazing things that will help people. I would like to work as a JavaScropt programmer, but can also do server-side coding. If I will be allowed to use jQuery in my work, it would be a great plus. Expected salary is $1000 / month.

Testing tasks

I am not good at writing CVs, so if you are interested in hiring me, I will be glad to complete testing task for you to show my skills.