jQselectable

日本語ドキュメントを更新しました：selectボックスをシンプルなプルダウンに拡張するjQselectable | 5509(+1)

Selectbox gets more usability with jQselectable.

Demo

View the live demo

Download

jqselectable1.3.1

Usage

HTML

Pages that using jQselectable has been loading the 'jQuery'.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

Loading both css and js files.

<style type="text/css" href="skin/selectable/style.css" />
<script type="text/javascript" src="js/jQselectable.js"></script>

JS

Basic

$(object).jQselectable();

And you also use the old method that is 'selectable'.

But if the selectable plugin of jQuery UIs has already loading, you cannot access that method.

$(object).selectable();

Using with Options

$(object).jQselectable({
 style: 'simple',
 set: 'fadeIn',
 out: 'fadeOut',
 top: -10
});

Options

style

You may change styles either 'selectable' or 'simple' you like.

Default style is the 'selectable'.

set (out)

Set selectable(s) showing(hiding) method.

These method is as same as jQuery showing(hiding) methods.

• show (hide)
• slideDown (slideUp)
• fadeIn (fadeOut)

setDuration (outDuration)

Set selectable(s) duration of showing(hiding) animation.

• slow
• normal
• fast
• int(milliseconds)

opacity

Set opacity of selectable(s)'s dropdown list.

top (left)

This property is used by adjusting target selectable(s) position top(left).

callback

You may also use callback function.

'this' keyword is called as target select(s).

ex)

function(){
 alert($(this).val());
}

API

If you need to rebuild the selectable, you would like to use api.

var instance = $('#sample').jQselectable();
~~~
instance.rebuild();

Table

With using AjaxZip2

This is sample with using AjaxZip2 by rebuild.

AjaxZip2 is the library to complement prefecture with zipcode.

View the live demo

Download sample files

Source code

var pref = $("#pref").jQselectable({
 set: "fadeIn",
 setDuration: "fast",
 opacity: .9
});

$("#zip").keyup(function(){
 // AjaxZip2
 AjaxZip2.zip2addr(this,"pref","addr");
}).blur(function(){
 // rebuilds target jQselectable element
 pref.rebuild();
});

Author

nori @ 5509

Special Thanks

rewish @ rewish.org