Return-Path: Delivered-To: apmail-ofbiz-commits-archive@www.apache.org Received: (qmail 30444 invoked from network); 21 Jun 2010 17:47:04 -0000 Received: from unknown (HELO mail.apache.org) (140.211.11.3) by 140.211.11.9 with SMTP; 21 Jun 2010 17:47:04 -0000 Received: (qmail 9155 invoked by uid 500); 21 Jun 2010 17:47:03 -0000 Delivered-To: apmail-ofbiz-commits-archive@ofbiz.apache.org Received: (qmail 9105 invoked by uid 500); 21 Jun 2010 17:47:03 -0000 Mailing-List: contact commits-help@ofbiz.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@ofbiz.apache.org Delivered-To: mailing list commits@ofbiz.apache.org Received: (qmail 9060 invoked by uid 99); 21 Jun 2010 17:47:03 -0000 Received: from athena.apache.org (HELO athena.apache.org) (140.211.11.136) by apache.org (qpsmtpd/0.29) with ESMTP; Mon, 21 Jun 2010 17:47:03 +0000 X-ASF-Spam-Status: No, hits=-1937.9 required=10.0 tests=ALL_TRUSTED,AWL,MANY_SPAN_IN_TEXT X-Spam-Check-By: apache.org Received: from [140.211.11.4] (HELO eris.apache.org) (140.211.11.4) by apache.org (qpsmtpd/0.29) with ESMTP; Mon, 21 Jun 2010 17:46:49 +0000 Received: by eris.apache.org (Postfix, from userid 65534) id 409172388B42; Mon, 21 Jun 2010 17:45:36 +0000 (UTC) Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Subject: svn commit: r956651 [14/37] - in /ofbiz/branches/jquery: ./ framework/common/widget/ framework/images/webapp/images/jquery/plugins/ framework/images/webapp/images/jquery/plugins/datetimepicker/ framework/images/webapp/images/jquery/ui/ framework/images... Date: Mon, 21 Jun 2010 17:45:30 -0000 To: commits@ofbiz.apache.org From: erwan@apache.org X-Mailer: svnmailer-1.0.8 Message-Id: <20100621174536.409172388B42@eris.apache.org> Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,1160 @@ + + +
+

jQuery UI Resizable

+
+

Overview

+
+

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
  • +
+
+
+

Dependencies

+
    +
  • UI Core
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Resizable.
+

+
$("#resizable").resizable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+    #resizable { width: 100px; height: 100px; background: silver; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#resizable").resizable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="resizable"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the disabled option specified. +
    +
    +
    $( ".selector" ).resizable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).resizable( "option", "disabled" );
    +//setter
    +$( ".selector" ).resizable( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    alsoResize

    +
    +
    Type:
    +
    Selector, jQuery, Element
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Resize these elements synchronous when resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the alsoResize option specified. +
    +
    +
    $( ".selector" ).resizable({ alsoResize: '.other' });
    +
    + + +
    + Get or set the alsoResize option, after init. +
    +
    +
    //getter
    +var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
    +//setter
    +$( ".selector" ).resizable( "option", "alsoResize", '.other' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    animate

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Animates to the final size after resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animate option specified. +
    +
    +
    $( ".selector" ).resizable({ animate: true });
    +
    + + +
    + Get or set the animate option, after init. +
    +
    +
    //getter
    +var animate = $( ".selector" ).resizable( "option", "animate" );
    +//setter
    +$( ".selector" ).resizable( "option", "animate", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    animateDuration

    +
    +
    Type:
    +
    Integer, String
    + +
    Default:
    +
    'slow'
    + +
    +
    +
    +

    Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animateDuration option specified. +
    +
    +
    $( ".selector" ).resizable({ animateDuration: 500 });
    +
    + + +
    + Get or set the animateDuration option, after init. +
    +
    +
    //getter
    +var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
    +//setter
    +$( ".selector" ).resizable( "option", "animateDuration", 500 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    animateEasing

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'swing'
    + +
    +
    +
    +

    Easing effect for animating.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animateEasing option specified. +
    +
    +
    $( ".selector" ).resizable({ animateEasing: 'swing' });
    +
    + + +
    + Get or set the animateEasing option, after init. +
    +
    +
    //getter
    +var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
    +//setter
    +$( ".selector" ).resizable( "option", "animateEasing", 'swing' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    aspectRatio

    +
    +
    Type:
    +
    Boolean, Float
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, resizing is constrained by the original aspect ratio. Otherwise a custom aspect ratio can be specified, such as 9 / 16, or 0.5.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the aspectRatio option specified. +
    +
    +
    $( ".selector" ).resizable({ aspectRatio: .75 });
    +
    + + +
    + Get or set the aspectRatio option, after init. +
    +
    +
    //getter
    +var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
    +//setter
    +$( ".selector" ).resizable( "option", "aspectRatio", .75 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    autoHide

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, automatically hides the handles except when the mouse hovers over the element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the autoHide option specified. +
    +
    +
    $( ".selector" ).resizable({ autoHide: true });
    +
    + + +
    + Get or set the autoHide option, after init. +
    +
    +
    //getter
    +var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
    +//setter
    +$( ".selector" ).resizable( "option", "autoHide", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,option'
    + +
    +
    +
    +

    Prevents resizing if you start on elements matching the selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the cancel option specified. +
    +
    +
    $( ".selector" ).resizable({ cancel: ':input,option' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
    +var cancel = $( ".selector" ).resizable( "option", "cancel" );
    +//setter
    +$( ".selector" ).resizable( "option", "cancel", ':input,option' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    containment

    +
    +
    Type:
    +
    String, Element, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the containment option specified. +
    +
    +
    $( ".selector" ).resizable({ containment: 'parent' });
    +
    + + +
    + Get or set the containment option, after init. +
    +
    +
    //getter
    +var containment = $( ".selector" ).resizable( "option", "containment" );
    +//setter
    +$( ".selector" ).resizable( "option", "containment", 'parent' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the delay option specified. +
    +
    +
    $( ".selector" ).resizable({ delay: 20 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
    +var delay = $( ".selector" ).resizable( "option", "delay" );
    +//setter
    +$( ".selector" ).resizable( "option", "delay", 20 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the distance option specified. +
    +
    +
    $( ".selector" ).resizable({ distance: 20 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
    +var distance = $( ".selector" ).resizable( "option", "distance" );
    +//setter
    +$( ".selector" ).resizable( "option", "distance", 20 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    ghost

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, a semi-transparent helper element is shown for resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the ghost option specified. +
    +
    +
    $( ".selector" ).resizable({ ghost: true });
    +
    + + +
    + Get or set the ghost option, after init. +
    +
    +
    //getter
    +var ghost = $( ".selector" ).resizable( "option", "ghost" );
    +//setter
    +$( ".selector" ).resizable( "option", "ghost", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    grid

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the grid option specified. +
    +
    +
    $( ".selector" ).resizable({ grid: [50, 50] });
    +
    + + +
    + Get or set the grid option, after init. +
    +
    +
    //getter
    +var grid = $( ".selector" ).resizable( "option", "grid" );
    +//setter
    +$( ".selector" ).resizable( "option", "grid", [50, 50] );
    +
    + +
    +
    +
  • + + +
  • +
    +

    handles

    +
    +
    Type:
    +
    String, Object
    + +
    Default:
    +
    'e, s, se'
    + +
    +
    +
    +

    If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin. +

    If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the handles option specified. +
    +
    +
    $( ".selector" ).resizable({ handles: 'n, e, s, w' });
    +
    + + +
    + Get or set the handles option, after init. +
    +
    +
    //getter
    +var handles = $( ".selector" ).resizable( "option", "handles" );
    +//setter
    +$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    helper

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the helper option specified. +
    +
    +
    $( ".selector" ).resizable({ helper: 'ui-state-highlight' });
    +
    + + +
    + Get or set the helper option, after init. +
    +
    +
    //getter
    +var helper = $( ".selector" ).resizable( "option", "helper" );
    +//setter
    +$( ".selector" ).resizable( "option", "helper", 'ui-state-highlight' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    maxHeight

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    This is the maximum height the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the maxHeight option specified. +
    +
    +
    $( ".selector" ).resizable({ maxHeight: 300 });
    +
    + + +
    + Get or set the maxHeight option, after init. +
    +
    +
    //getter
    +var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
    +//setter
    +$( ".selector" ).resizable( "option", "maxHeight", 300 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    maxWidth

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    This is the maximum width the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the maxWidth option specified. +
    +
    +
    $( ".selector" ).resizable({ maxWidth: 250 });
    +
    + + +
    + Get or set the maxWidth option, after init. +
    +
    +
    //getter
    +var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
    +//setter
    +$( ".selector" ).resizable( "option", "maxWidth", 250 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    minHeight

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    10
    + +
    +
    +
    +

    This is the minimum height the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the minHeight option specified. +
    +
    +
    $( ".selector" ).resizable({ minHeight: 150 });
    +
    + + +
    + Get or set the minHeight option, after init. +
    +
    +
    //getter
    +var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
    +//setter
    +$( ".selector" ).resizable( "option", "minHeight", 150 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    minWidth

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    10
    + +
    +
    +
    +

    This is the minimum width the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the minWidth option specified. +
    +
    +
    $( ".selector" ).resizable({ minWidth: 75 });
    +
    + + +
    + Get or set the minWidth option, after init. +
    +
    +
    //getter
    +var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
    +//setter
    +$( ".selector" ).resizable( "option", "minWidth", 75 );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    start

    +
    +
    Type:
    +
    resizestart
    +
    +
    +
    +

    This event is triggered at the start of a resize operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).resizable({
    +   start: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the start event by type: resizestart. +
    +
    +
    $( ".selector" ).bind( "resizestart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    resize

    +
    +
    Type:
    +
    resize
    +
    +
    +
    +

    This event is triggered during the resize, on the drag of the resize handler.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resize event as an init option. +
    +
    +
    $( ".selector" ).resizable({
    +   resize: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the resize event by type: resize. +
    +
    +
    $( ".selector" ).bind( "resize", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    resizestop
    +
    +
    +
    +

    This event is triggered at the end of a resize operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).resizable({
    +   stop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the stop event by type: resizestop. +
    +
    +
    $( ".selector" ).bind( "resizestop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .resizable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the resizable functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .resizable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the resizable.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .resizable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the resizable.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .resizable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any resizable option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .resizable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple resizable options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .resizable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-resizable element.

    +
    +
  • + + +
+
+
+

Theming

+

The jQuery UI Resizable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.resizable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-resizable">
+   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
+   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
+   <div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
+</div> +

+ + Note: This is a sample of markup generated by the resizable plugin, not markup you should use to create a resizable. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,807 @@ + + +
+

jQuery UI Selectable

+
+

Overview

+
+

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.

+
+
+

Dependencies

+
    +
  • UI Core
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Selectable.
+

+
$("#selectable").selectable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+#selectable .ui-selecting {
+	background: silver;
+}
+#selectable .ui-selected {
+	background: gray;
+}
+</style>
+
+  <script>
+  $(document).ready(function() {
+    $("#selectable").selectable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<ul id="selectable">
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+</ul>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the selectable. Can be set when initialising (first creating) the selectable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the disabled option specified. +
    +
    +
    $( ".selector" ).selectable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).selectable( "option", "disabled" );
    +//setter
    +$( ".selector" ).selectable( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    autoRefresh

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the autoRefresh option specified. +
    +
    +
    $( ".selector" ).selectable({ autoRefresh: false });
    +
    + + +
    + Get or set the autoRefresh option, after init. +
    +
    +
    //getter
    +var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
    +//setter
    +$( ".selector" ).selectable( "option", "autoRefresh", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,option'
    + +
    +
    +
    +

    Prevents selecting if you start on elements matching the selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the cancel option specified. +
    +
    +
    $( ".selector" ).selectable({ cancel: ':input,option' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
    +var cancel = $( ".selector" ).selectable( "option", "cancel" );
    +//setter
    +$( ".selector" ).selectable( "option", "cancel", ':input,option' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the delay option specified. +
    +
    +
    $( ".selector" ).selectable({ delay: 20 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
    +var delay = $( ".selector" ).selectable( "option", "delay" );
    +//setter
    +$( ".selector" ).selectable( "option", "delay", 20 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the distance option specified. +
    +
    +
    $( ".selector" ).selectable({ distance: 20 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
    +var distance = $( ".selector" ).selectable( "option", "distance" );
    +//setter
    +$( ".selector" ).selectable( "option", "distance", 20 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    filter

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    '*'
    + +
    +
    +
    +

    The matching child elements will be made selectees (able to be selected).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the filter option specified. +
    +
    +
    $( ".selector" ).selectable({ filter: 'li' });
    +
    + + +
    + Get or set the filter option, after init. +
    +
    +
    //getter
    +var filter = $( ".selector" ).selectable( "option", "filter" );
    +//setter
    +$( ".selector" ).selectable( "option", "filter", 'li' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    tolerance

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'touch'
    + +
    +
    +
    +

    Possible values: 'touch', 'fit'. +

    +
      +
    • fit: draggable overlaps the droppable entirely
    • +
    • touch: draggable overlaps the droppable any amount
    • +
    +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the tolerance option specified. +
    +
    +
    $( ".selector" ).selectable({ tolerance: 'fit' });
    +
    + + +
    + Get or set the tolerance option, after init. +
    +
    +
    //getter
    +var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
    +//setter
    +$( ".selector" ).selectable( "option", "tolerance", 'fit' );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    selected

    +
    +
    Type:
    +
    selectableselected
    +
    +
    +
    +

    This event is triggered at the end of the select operation, on each element added to the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the selected event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   selected: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the selected event by type: selectableselected. +
    +
    +
    $( ".selector" ).bind( "selectableselected", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    selecting

    +
    +
    Type:
    +
    selectableselecting
    +
    +
    +
    +

    This event is triggered during the select operation, on each element added to the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the selecting event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   selecting: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the selecting event by type: selectableselecting. +
    +
    +
    $( ".selector" ).bind( "selectableselecting", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    start

    +
    +
    Type:
    +
    selectablestart
    +
    +
    +
    +

    This event is triggered at the beginning of the select operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   start: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the start event by type: selectablestart. +
    +
    +
    $( ".selector" ).bind( "selectablestart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    selectablestop
    +
    +
    +
    +

    This event is triggered at the end of the select operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   stop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the stop event by type: selectablestop. +
    +
    +
    $( ".selector" ).bind( "selectablestop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    unselected

    +
    +
    Type:
    +
    selectableunselected
    +
    +
    +
    +

    This event is triggered at the end of the select operation, on each element removed from the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the unselected event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   unselected: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the unselected event by type: selectableunselected. +
    +
    +
    $( ".selector" ).bind( "selectableunselected", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    unselecting

    +
    +
    Type:
    +
    selectableunselecting
    +
    +
    +
    +

    This event is triggered during the select operation, on each element removed from the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the unselecting event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   unselecting: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the unselecting event by type: selectableunselecting. +
    +
    +
    $( ".selector" ).bind( "selectableunselecting", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .selectable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the selectable functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .selectable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the selectable.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .selectable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the selectable.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .selectable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any selectable option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .selectable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple selectable options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .selectable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-selectable element.

    +
    +
  • + + +
  • +
    +

    refresh

    +
    +
    Signature:
    +
    .selectable( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.

    +
    +
  • + +
+
+
+

Theming

+

The jQuery UI Selectable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.selectable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <ul class="ui-selectable">
+   <li class="ui-selectee"></li>
+   <li class="ui-selectee"></li>
+   <li class="ui-selectee"></li>
+</ul> +

+ + Note: This is a sample of markup generated by the selectable plugin, not markup you should use to create a selectable. The only markup needed for that is
<ul>
+   <li></li>
+   <li></li>
+   <li></li>
+</ul>. +
+

+ +
+
+ +

+ + Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,144 @@ + + +
+

jQuery UI show

+
+

Overview

+
+

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.

+
+
+

Dependencies

+
    +
  • Effects Core
  • +
+
+
+

Example

+
+ +

+Apply the effect slide if you click on the p to show a div.
+

+
$("p").click(function () {
+      $("div").show("slide", {}, 1000);
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
+<style type="text/css">
+  div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
+</style>
+  <script>
+  $(document).ready(function() {
+    $("p").click(function () {
+      $("div").show("slide", {}, 1000);
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<p>Click me</p><div></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    effect

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

    +
    +
  • + + +
  • +
    +

    options

    +
    +
    Type:
    +
    Hash
    + +
    Optional
    + +
    +
    +
    +

    A object/hash including specific options for the effect.

    +
    +
  • + + +
  • +
    +

    speed

    +
    +
    Type:
    +
    String, Number
    + +
    Optional
    + +
    +
    +
    +

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
  • + + +
  • +
    +

    callback

    +
    +
    Type:
    +
    Function
    + +
    Optional
    + +
    +
    +
    +

    A function that is called after the effect is completed.

    +
    +
  • + +
+
+
+ +

+ + Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,821 @@ + + +
+

jQuery UI Slider

+
+

Overview

+
+

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'): +

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 before init. It will only create the number of handles needed to match the length of value/values. For example, if you specify 'values: [1, 5, 18]' and create one custom handle, the plugin will create the other two. +

+
    +
  • ui.handle: DOMElement - the current focused handle +
  • ui.value: Integer - the current handle's value +
+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Widget
  • +
  • UI Mouse
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Slider.
+

+
$("#slider").slider();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+    <style type="text/css">
+    #slider { margin: 10px; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#slider").slider();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="slider"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the slider. Can be set when initialising (first creating) the slider.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the disabled option specified. +
    +
    +
    $( ".selector" ).slider({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).slider( "option", "disabled" );
    +//setter
    +$( ".selector" ).slider( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    animate

    +
    +
    Type:
    +
    Boolean, String, Number
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the animate option specified. +
    +
    +
    $( ".selector" ).slider({ animate: true });
    +
    + + +
    + Get or set the animate option, after init. +
    +
    +
    //getter
    +var animate = $( ".selector" ).slider( "option", "animate" );
    +//setter
    +$( ".selector" ).slider( "option", "animate", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    max

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    100
    + +
    +
    +
    +

    The maximum value of the slider.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the max option specified. +
    +
    +
    $( ".selector" ).slider({ max: 7 });
    +
    + + +
    + Get or set the max option, after init. +
    +
    +
    //getter
    +var max = $( ".selector" ).slider( "option", "max" );
    +//setter
    +$( ".selector" ).slider( "option", "max", 7 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    min

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    The minimum value of the slider.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the min option specified. +
    +
    +
    $( ".selector" ).slider({ min: -7 });
    +
    + + +
    + Get or set the min option, after init. +
    +
    +
    //getter
    +var min = $( ".selector" ).slider( "option", "min" );
    +//setter
    +$( ".selector" ).slider( "option", "min", -7 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    orientation

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'horizontal'
    + +
    +
    +
    +

    This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the orientation option specified. +
    +
    +
    $( ".selector" ).slider({ orientation: 'vertical' });
    +
    + + +
    + Get or set the orientation option, after init. +
    +
    +
    //getter
    +var orientation = $( ".selector" ).slider( "option", "orientation" );
    +//setter
    +$( ".selector" ).slider( "option", "orientation", 'vertical' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    range

    +
    +
    Type:
    +
    Boolean, String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the range option specified. +
    +
    +
    $( ".selector" ).slider({ range: 'min' });
    +
    + + +
    + Get or set the range option, after init. +
    +
    +
    //getter
    +var range = $( ".selector" ).slider( "option", "range" );
    +//setter
    +$( ".selector" ).slider( "option", "range", 'min' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    step

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the step option specified. +
    +
    +
    $( ".selector" ).slider({ step: 5 });
    +
    + + +
    + Get or set the step option, after init. +
    +
    +
    //getter
    +var step = $( ".selector" ).slider( "option", "step" );
    +//setter
    +$( ".selector" ).slider( "option", "step", 5 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    value

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the value option specified. +
    +
    +
    $( ".selector" ).slider({ value: 37 });
    +
    + + +
    + Get or set the value option, after init. +
    +
    +
    //getter
    +var value = $( ".selector" ).slider( "option", "value" );
    +//setter
    +$( ".selector" ).slider( "option", "value", 37 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    values

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a slider with the values option specified. +
    +
    +
    $( ".selector" ).slider({ values: [1,5,9] });
    +
    + + +
    + Get or set the values option, after init. +
    +
    +
    //getter
    +var values = $( ".selector" ).slider( "option", "values" );
    +//setter
    +$( ".selector" ).slider( "option", "values", [1,5,9] );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    start

    +
    +
    Type:
    +
    slidestart
    +
    +
    +
    +

    This event is triggered when the user starts sliding.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).slider({
    +   start: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the start event by type: slidestart. +
    +
    +
    $( ".selector" ).bind( "slidestart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    slide

    +
    +
    Type:
    +
    slide
    +
    +
    +
    +

    This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value. +

    Return false in order to prevent a slide, based on ui.value.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the slide event as an init option. +
    +
    +
    $( ".selector" ).slider({
    +   slide: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the slide event by type: slide. +
    +
    +
    $( ".selector" ).bind( "slide", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    change

    +
    +
    Type:
    +
    slidechange
    +
    +
    +
    +

    This event is triggered on slide stop, or if the value is changed programmatically (by the value method). Takes arguments event and ui. Use event.orginalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).slider({
    +   change: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the change event by type: slidechange. +
    +
    +
    $( ".selector" ).bind( "slidechange", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    slidestop
    +
    +
    +
    +

    This event is triggered when the user stops sliding.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).slider({
    +   stop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the stop event by type: slidestop. +
    +
    +
    $( ".selector" ).bind( "slidestop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .slider( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the slider functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .slider( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the slider.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .slider( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the slider.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .slider( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any slider option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .slider( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple slider options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .slider( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-slider element.

    +
    +
  • + + +
  • +
    +

    value

    +
    +
    Signature:
    +
    .slider( "value" + +, [value] + + + + + +)
    +
    +
    +
    +

    Gets or sets the value of the slider. For single handle sliders.

    +
    +
  • + + +
  • +
    +

    values

    +
    +
    Signature:
    +
    .slider( "values" + +, index + +, [value] + + + +)
    +
    +
    +
    +

    Gets or sets the values of the slider. For multiple handle or range sliders.

    +
    +
  • + +
+
+
+

Theming

+

The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
+   <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
+</div>
+

+ + Note: This is a sample of markup generated by the slider plugin, not markup you should use to create a slider. The only markup needed for that is <div><div>. + +

+ +
+
+ +

+ + Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html ------------------------------------------------------------------------------ svn:mime-type = text/html