はてなブックマーク

Easings Easing functions specify the speed at which an animation progresses at different points within the animation. jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation. jQuery UI prov

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. Elements can also be selected via click or drag while holding the ctrl/meta key, allowing for multiple (non-contiguous) selections. Theming The selectable widget uses the jQuery UI CSS framework to style its look and feel. If selectable specific styling

Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute. When typing in the autocomplete field, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches. This can be us

jQuery UI adds quite a bit of functionality on top of jQuery’s built-in effects. jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings. In addition, a full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal.

Tooltip replaces native tooltips, making them themeable as well as allowing various customizations: Display other content than just the title, like inline footnotes or extra content retrieved via Ajax. Customize the positioning, e.g., to center the tooltip above elements. Add extra styling to customize the appearance, for warning or error fields. A fade animation is used by default to show and hid

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. Theming The resizable widget uses the jQuery UI CSS framework to style its look and feel. If resizable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classe

Description: The highlight effect hides or shows an element by animating its background color first. highlight

CSS Framework The following is a list of the class names used by jQuery UI. The classes are designed to create a visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. The class names are split between ui.core.css and ui.theme.css, depending on whether styles are fixed and structural, or themeable (colors, fonts, backgrounds, etc) respectively. Layo

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. The slider widget will create handle elements with the class ui-slider-handle on initialization. You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class

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. Focus Upon opening a dialog, focus is automatically mov

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 when the associated text field gains focus. For an inline calendar, simply attach the datepi

Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables. Theming The draggable widget uses the jQuery UI CSS framework to style its look and feel. If draggable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option: ui-dra

The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept. Theming The droppable widget uses the jQuery UI CSS framework to style its look and feel. If droppable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option: ui-dropp

Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures. The panels can be activated programmatically by setting the active option. Keyboard interaction When focus is on a header, the following key commands are available: UP/LEFT: Move focus to the previous

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Note: In order to sort table rows, the tbody must be made sortable, not the table. Theming The sortable widget uses the jQuery UI CSS framework to style its look and feel. If sortable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option: ui-sor

jQuery UI 1.14 API Documentation jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. If you're new to jQuery UI, you might want to check out our main site for more information and full demos. If you're new to jQuery, you might also be interested in the jQuery Learning Center tutorials. This site provides API documen

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. Tabs have a particular set of markup that must be used in order for them to work properly: The tabs themselves must be in either an ordered (<ol>) or unordered (<ul>) list Each tab "title" must be inside of a list item (<li>) and wrapped by an anchor (<a>) with an href attribu