Clear Up
SharpKit Reference

SharpKit.jQuery Namespace

Download SDK: SharpKit.jQueryUI.zip

Classes

Name Description
AccordionExtension Make the selected elements Accordion widgets. Semantic requirements: The markup of your accordion container needs pairs of headers and content panels. By default, the header elements are anchors, assuming the following structure:
First header
First content
Second header
Second content
If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'h3'. The content element must be always next to its header. If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'. Use activate(Number) to change the active content programmatically. [edit]NOTE: If you want multiple sections open at once, don't use an accordion An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this: jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); });Or animated: jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });
AccordionOptions Options JSON object for Accordion
AddClassExtension [edit]addClass( class, [duration] ) Adds the specified class to each of the set of matched elements with an optional transition between the states.
AddClassOptions Options JSON object for AddClass
AnimationPropertiesEx
AutocompleteExtension Make the selected elements Autocomplete widgets. Semantic requirements: The markup of your autocomplete container needs pairs of headers and content panels. By default, the header elements are anchors, assuming the following structure:
First header
First content
Second header
Second content
If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'h3'. The content element must be always next to its header. If you have links inside the autocomplete content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'. Use activate(Number) to change the active content programmatically. [edit]NOTE: If you want multiple sections open at once, don't use an autocomplete An autocomplete doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this: jQuery(document).ready(function(){ $('.autocomplete .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); });Or animated: jQuery(document).ready(function(){ $('.autocomplete .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });
AutocompleteItem
AutocompleteOptions Options JSON object for Autocomplete
ButtonExtension
ButtonOptions Options JSON object for Button
DatepickerExtension The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date if selected. For an inline calendar, simply attach the datepicker to a div or span. You can use keyboard shortcuts to drive the datepicker: page up/down - previous/next month ctrl+page up/down - previous/next year ctrl+home - current month or open when closed ctrl+left/right - previous/next day ctrl+up/down - previous/next week enter - accept the selected date ctrl+end - close and erase the date escape - close the datepicker without selection [edit]Utility functions $.datepicker.setDefaults( settings ) - Set settings for all datepicker instances. $.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format. $.datepicker.iso8601Week( date ) - Determine the week of the year for a given date: 1 to 53. $.datepicker.parseDate( format, value, settings ) - Extract a date from a string value with a specified format.
DatepickerOptions Options JSON object for Datepicker
DialogButton
DialogExtension A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. If the content length exceeds the maximum height, a scrollbar will automatically appear. A bottom button bar and semi-transparent modal overlay layer are common options that can be added. A call to $(foo).dialog() initializes a dialog. If you want a click to open a dialog, use $(foo).dialog('open'), but if the dialog hasn't been destroyed, the $(foo).dialog() init call is only required once, not on each click.
DialogOptions Options JSON object for Dialog
DraggableExtension The jQuery UI Draggable plugin makes selected elements draggable by mouse. Draggable elements gets a class of ui-draggable. During drag the element also gets a class of ui-draggable-dragging. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables. All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): ui.helper - the jQuery object representing the helper that's being dragged ui.position - current position of the helper as { top, left } object, relative to the offset element ui.offset - current absolute position of the helper as { top, left } object, relative to page
DraggableOptions Options JSON object for Draggable
DroppableExtension The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): ui.draggable - current draggable element, a jQuery object. ui.helper - current draggable helper, a jQuery object ui.position - current position of the draggable helper { top: , left: } ui.offset - current absolute position of the draggable helper { top: , left: }
DroppableOptions Options JSON object for Droppable
EffectExtension [edit]effect( effect, [options], [speed], [callback] ) Uses a specific effect on an element (without the show/hide logic).
HideExtension [edit]hide( effect, [options], [speed], [callback] ) The enhanced hide method optionally accepts jQuery UI advanced effects. Uses a specific effect on an element to hide the element if the first argument is an effect string.
HideOptions Options JSON object for Hide
IconOptions
jQueryUI
PositionExtension [edit]hide( effect, [options], [speed], [callback] ) The enhanced hide method optionally accepts jQuery UI advanced effects. Uses a specific effect on an element to hide the element if the first argument is an effect string.
PositionOptions Options JSON object for Position
ProgressbarExtension The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default. This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process -- if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback.
ProgressbarOptions Options JSON object for Progressbar
RemoveClassExtension [edit]removeClass( [class], [duration] ) Removes all or specified class from each of the set of matched elements with an optional transition between the states.
RemoveClassOptions Options JSON object for RemoveClass
ResizableExtension The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height. All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields: ui.helper - a jQuery object containing the helper element ui.originalPosition - {top, left} before resizing started ui.originalSize - {width, height} before resizing started ui.position - {top, left} current position ui.size - {width, height} current size
ResizableOptions Options JSON object for Resizable
SelectableExtension The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.
SelectableOptions Options JSON object for Selectable
ShowExtension [edit]show( effect, [options], [speed], [callback] ) The enhanced show method optionally accepts jQuery UI advanced effects. Uses a specific effect on an element to show the element if the first argument is a effect string.
ShowOptions Options JSON object for Show
Size
SliderExtension The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): ui.handle: DOMElement - the current focused handle ui.value: Integer - the current handle's value
SliderOptions Options JSON object for Slider
SortableExtension The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): ui.helper - the current helper element (most often a clone of the item) ui.position - current position of the helper ui.offset - current absolute position of the helper ui.item - the current dragged element ui.placeholder - the placeholder (if you defined one) ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)
SortableOptions Options JSON object for Sortable
SwitchClassExtension [edit]switchClass( remove, add, [duration] ) Switches from the class defined in the first argument to the class defined as second argument, using an optional transition.
SwitchClassOptions Options JSON object for SwitchClass
TabsExtension Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab. Contents 1 Events 2 Ajax mode 2.1 Back button and bookmarking 3 How to... 3.1 ...retrieve the index of the currently selected tab 3.2 ...open links in the current tab instead of leaving the page 3.3 ...select a tab from a text link instead of clicking a tab itself 3.4 ...prevent switching to the tab on click depending on form validation 3.5 ...immediately select a just added tab 3.6 ...follow a tab's URL instead of loading its content via ajax 3.7 ...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized 4 Why does... 4.1 ...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab? [edit]Events A series of events fire when interacting with a tabs interface: tabsselect, tabsload, tabsshow (in that order) tabsadd, tabsremove tabsenable, tabsdisable Event binding example: $('#example').bind('tabsselect', function(event, ui) { // Objects available in the function context: ui.tab // anchor element of the selected (clicked) tab ui.panel // element, that contains the selected/clicked tab contents ui.index // zero-based index of the selected (clicked) tab });Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation). [edit]Ajax mode Tabs supports loading tab content via Ajax in an unobtrusive manner. The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly: Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled. Note that if you wish to reuse an existing container, you could do so by matching a title attribute and the container's id:
  • ...
  • and a container like:
    ...
    (Note how white space is replaced with an underscore) This is useful if you want a human readable hash in the URL instead of a cryptic generated one. [edit]Back button and bookmarking Tabs 2 already supported this functionality, although the history plugin needs a rewrite first (it doesn't support Safari 3 and is in general a little inflexible) before it can be build back into the tabs. It is planned and Klaus is working on it whenever he finds the time. Actual bugs in the UI Tabs plugin itself always have higher priority though. [edit]How to... [edit]...retrieve the index of the currently selected tab var $tabs = $('#example').tabs(); var selected = $tabs.tabs('option', 'selected'); // => 0[edit]...open links in the current tab instead of leaving the page "Hijax" links after tab content has been loaded: $('#example').tabs({ load: function(event, ui) { $('a', ui.panel).click(function() { $(ui.panel).load(this.href); return false; }); } });[edit]...select a tab from a text link instead of clicking a tab itself var $tabs = $('#example').tabs(); // first tab selected $('#my-text-link').click(function() { // bind click event to link $tabs.tabs('select', 2); // switch to third tab return false; });[edit]...prevent switching to the tab on click depending on form validation Returning false in the tabs select handler prevents the clicked tab from becoming selected. $('#example').tabs({ select: function(event, ui) { var isValid = ... // form validation returning true or false return isValid; } });[edit]...immediately select a just added tab var $tabs = $('#example').tabs({ add: function(event, ui) { $tabs.tabs('select', '#' + ui.panel.id); } });[edit]...follow a tab's URL instead of loading its content via ajax Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html). $('#example').tabs({ select: function(event, ui) { var url = $.data(ui.tab, 'load.tabs'); if( url ) { location.href = url; return false; } return true; } }); [edit]...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:
    ...
    ...
    [edit]Why does... [edit]...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab? Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers). There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with .ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }For Google maps you can also resize the map once the tab is displayed like this: $('#example').bind('tabsshow', function(event, ui) { if (ui.panel.id == "map-tab") { resizeMap(); } });resizeMap() will call Google Maps' checkResize() on the particular map.
    TabsOptions Options JSON object for Tabs
    ToggleClassExtension [edit]toggleClass( class, [duration] ) Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.
    ToggleClassOptions Options JSON object for ToggleClass
    ToggleExtension [edit]toggle( effect, [options], [speed], [callback] ) The enhanced toggle method optionally accepts jQuery UI advanced effects. Uses a specific effect on an element to toggle the element if the first argument is an effect string.
    ToggleOptions Options JSON object for Toggle
    UIAccordion
    UIDraggable
    UIDroppable
    UIResizable
    UISlider
    UISortable
    UITabs

    Enums

    Delegates

    Name Description
    jQueryUIEvent
    jQueryUIEvent<T>
    © Copyright 2005-2011 SharpKit. All rights reserved.