Giva Labs - Linkselect Example Page

Example 1 - Standard implementation

Here's a standard example of a linkselect plug-in. The box on the left contains the original HTML, while the box on the right shows the same element initialized with the Linkselect plug-in.

Original <select> element

Linkselect version

Code

$("select.linkselect").linkselect();

Example 2 - Using title attribute

This example is identical to the first example, except we've added a "title" attribute to the select element which is shown when the dropdown menu appears.

Original <select> element

Linkselect version

Code

$("select.linkselect").linkselect();

Example 3 - Intelligent positioning

Here's an example of the linkselect that is positioned on the right side of the screen. You can see that the linkselect will allow the value/link to wrap to multiple rows and the position of the dropdown is also positioned so that options remain in the in the X-axis viewpoint.


Code

$("select.linkselect").linkselect();

Example 4 - Getting/setting the value

The linkselect works by replacing the <select /> element with a hidden <input /> tag. The linkselect() plug-in provides a convenient API for getting and setting the value of the field.

Code

// get value
$("#ex4_ls").linkselect("val");

// set value
$("#ex4_ls").linkselect("val", "Change Manager");

Example 5 - Enable/disable the linkselect

You can also easily enable or disable the linkselect field.

Code

// disable field
$("#ex5_ls").linkselect("disable", true);

// enable field
$("#ex5_ls").linkselect("disable", false);

Example 6 - Enable/disable the linkselect

You can also programmatically open the linkselect dropdown. This is very useful if you want to add a hotkey to open the linkselect element.

Code

// open/show dropdown
$("#ex6_ls").linkselect("open");

Example 7 - Blur/Focus

There are also blur/focus methods for setting focus on the field (or removing focus.) These functions come in handy if your application uses hotkeys to jump to different fields in your application.

Code

// place focus in the field
$("#ex7_ls").linkselect("focus");

// blur of the field
$("#ex7_ls").linkselect("blur");

Example 8 - Using callbacks

There are several callback options you can define to help customize the behavior of your linkselect() elements. The "change" callback allows you to add behavior to your linkselect elements by firing this callback every time the value changes (either manually by the user or by using the linkselect("val", value) API call.)

The example below will log each change to the linkselect() field to the "Change Log" box below.

Change Log

Code

$("#ex8_ls").linkselect({
  change: function (li, value, text){
    $('<div>' + value + ' | ' + text + '</div>').appendTo("#change_log");
  }
});

Example 9 - Add custom formatting

The "format" option is a special callback you can define to easily add custom formatting to the options in the dropdown menu. This allows you to add custom HTML or change the classes for specific items. This is a great way to add emphasis to key options.

The example below adds the array position of each option tag to the output and highlights the "Customer Service" option.

Code

$("#ex9_ls").linkselect({
  format: function (html, value, label, pos){
    if( value == "Service Desk" ) html = '<span style="font-weight: bold; color: #a72947;">' + html + '</span>';
    return '<span style="float: right;">' + pos + '</span>' + html;
  }
});

Example 10 - Customizable CSS

The Linkselect can be fully customized by CSS. Use the buttons below to change the look and feel of the Linkselect elements on the page.

Code

Default: jquery.linkselect.css
"Select" Style: jquery.linkselect.style.select.css

Example 11 - Placeholder Text

You can also use a placeholder text to show when no option has been selected

Example 12 - Change Event

You can also manually trigger the linkselect change event.

Change Log

Code

$("#ex12_ls").linkselect({
  style: style
  , init: function (){
    // trigger change events for the default value
    this.change();
  }
  , change: function (li, value, text){
    $('<div>' + value + ' | ' + text + '</div>').appendTo("#change_log_change");
  }
});

Example 13 - Event Listener

The linkselect plug-in publishes to a "change" event on the input elements created. You can listen for the change event to wire in additional functionality into your code. This allows you to easily hook linkselect into other publish/subscription based frameworks--such as those that provide data binding.

Change Log

Code

$("#ex13_ls").linkselect({
  style: style
})
  // set up listener
  .bind("update", function (e, value, text, li){
    $('<div>' + value + ' | ' + text + '</div>').appendTo("#ex13_ls_change_log");
  });