SharpKit.jQuery.UI.Controls Namespace

Download SDK: SharpKit.jQueryUI.Controls.zip

Classes

Name Description
Accordion 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 headerFirst contentSecond headerSecond contentIf 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(); });
AddClass [edit]addClass( class, [duration] ) Adds the specified class to each of the set of matched elements with an optional transition between the states.
Button
Datepicker 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.
Dialog 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.
Draggable 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
Droppable 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: }
Hide [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.
Progressbar 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.
RemoveClass [edit]removeClass( [class], [duration] ) Removes all or specified class from each of the set of matched elements with an optional transition between the states.
Resizable 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
Selectable 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.
Show [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.
Slider 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
Sortable 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)
SwitchClass [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.
Tabs
Toggle [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.
ToggleClass [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.
© Copyright 2005-2011 SharpKit. All rights reserved.