Changeset 1343

Show
Ignore:
Timestamp:
03/24/08 07:36:47 (3 months ago)
Author:
cederberg@gmail.com
Message:

Updated API docs for basic MochiKit.Visual effect classes.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • mochikit/trunk/doc/html/MochiKit/Visual.html

    r1342 r1343  
    526526<a class="mochiref reference" href="DOM.html#fn-getelement">MochiKit.DOM.getElement</a>).</dd> 
    527527<dt>options:</dt> 
    528 <dd><p class="first">The following options and default values controls this 
     528<dd><p class="first">The following options and default values control this 
    529529effect. Note that the <a class="mochiref reference" href="#fn-opacity">Opacity</a> effect is turned 
    530530off by default. See also the <a class="mochiref reference" href="#fn-defaultoptions">DefaultOptions</a>.</p> 
    …… 
    598598<a class="mochiref reference" href="DOM.html#fn-getelement">MochiKit.DOM.getElement</a>).</dd> 
    599599<dt>options:</dt> 
    600 <dd><p class="first">The following options and default values controls this 
     600<dd><p class="first">The following options and default values control this 
    601601effect. Note that the <a class="mochiref reference" href="#fn-opacity">Opacity</a> effect is turned 
    602602off by default. See also the <a class="mochiref reference" href="#fn-defaultoptions">DefaultOptions</a>.</p> 
    …… 
    709709</div> 
    710710<div class="section"> 
    711 <h2><a id="basic-effects-classes" name="basic-effects-classes">Basic Effects classes</a></h2> 
     711<h2><a id="basic-effects-classes-constants" name="basic-effects-classes-constants">Basic Effects Classes &amp; Constants</a></h2> 
    712712<p> 
    713713<a name="fn-transitions"></a> 
    …… 
    840840<dl class="docutils"> 
    841841<dt>effects:</dt> 
    842 <dd>An array of instantiated effect objects. Note that they must 
     842<dd>An array of instantiated effect objects. Note that they <em>must</em> 
    843843all have <tt class="docutils literal"><span class="pre">sync</span></tt> set to <tt class="docutils literal"><span class="pre">true</span></tt>.</dd> 
    844844<dt>options:</dt> 
    …… 
    852852<a class="mochidef reference" href="#fn-opacity">Opacity(element [, options])</a>:</p> 
    853853<blockquote> 
    854 <p>Change the opacity of an element progressively.</p> 
    855 <p>options:</p> 
    856 <table border="1" class="docutils"> 
     854<p>Change the opacity of an <tt class="docutils literal"><span class="pre">element</span></tt> progressively.</p> 
     855<dl class="docutils"> 
     856<dt>element:</dt> 
     857<dd>An element ID string or a DOM node (see 
     858<a class="mochiref reference" href="DOM.html#fn-getelement">MochiKit.DOM.getElement</a>).</dd> 
     859<dt>options:</dt> 
     860<dd><p class="first">The following options and default values control this effect. 
     861See also the <a class="mochiref reference" href="#fn-defaultoptions">DefaultOptions</a>.</p> 
     862<table border="1" class="last docutils"> 
    857863<colgroup> 
    858864<col width="43%" /> 
    …… 
    868874</tbody> 
    869875</table> 
    870 <dl class="docutils"> 
     876</dd> 
    871877<dt><em>Availability</em>:</dt> 
    872878<dd>Available in MochiKit 1.4+</dd> 
    …… 
    877883<a class="mochidef reference" href="#fn-move">Move(element [, options])</a>:</p> 
    878884<blockquote> 
    879 <p>Change the position of an element in small steps, creating a 
    880 moving effect.</p> 
    881 <p>options:</p> 
    882 <table border="1" class="docutils"> 
     885<p>Changes the (top left) position of an <tt class="docutils literal"><span class="pre">element</span></tt> in small steps, 
     886creating a moving effect.</p> 
     887<dl class="docutils"> 
     888<dt>element:</dt> 
     889<dd>An element ID string or a DOM node (see 
     890<a class="mochiref reference" href="DOM.html#fn-getelement">MochiKit.DOM.getElement</a>).</dd> 
     891<dt>options:</dt> 
     892<dd><p class="first">The following options and default values control this effect. 
     893See also the <a class="mochiref reference" href="#fn-defaultoptions">DefaultOptions</a>.</p> 
     894<table border="1" class="last docutils"> 
    883895<colgroup> 
    884896<col width="36%" /> 
    …… 
    897909</tbody> 
    898910</table> 
     911</dd> 
     912</dl> 
     913<p>The <tt class="docutils literal"><span class="pre">mode</span></tt> option controls if the specified <tt class="docutils literal"><span class="pre">x</span></tt> and <tt class="docutils literal"><span class="pre">y</span></tt> 
     914coordinates are <tt class="docutils literal"><span class="pre">relative</span></tt> or <tt class="docutils literal"><span class="pre">absolute</span></tt> with respect to the 
     915current <tt class="docutils literal"><span class="pre">element</span></tt> position.</p> 
    899916<dl class="docutils"> 
    900917<dt><em>Availability</em>:</dt> 
    …… 
    906923<a class="mochidef reference" href="#fn-scale">Scale(element, percent [, options])</a>:</p> 
    907924<blockquote> 
    908 <p>Change the size of an element.</p> 
    909 <dl class="docutils"> 
     925<p>Changes the size of an <tt class="docutils literal"><span class="pre">element</span></tt>.</p> 
     926<dl class="docutils"> 
     927<dt>element:</dt> 
     928<dd>An element ID string or a DOM node (see 
     929<a class="mochiref reference" href="DOM.html#fn-getelement">MochiKit.DOM.getElement</a>).</dd> 
    910930<dt>percent:</dt> 
    911931<dd>Final wanted size in percent of current size. The size will be 
    912932reduced if the value is between 0 and 100, and raised if the 
    913933value is above 100.</dd> 
    914 </dl> 
    915 <p>options:</p> 
    916 <table border="1" class="docutils"> 
     934<dt>options:</dt> 
     935<dd><p class="first">The following options and default values control this effect. 
     936See also the <a class="mochiref reference" href="#fn-defaultoptions">DefaultOptions</a>.</p> 
     937<table border="1" class="last docutils"> 
    917938<colgroup> 
    918939<col width="57%" /> 
    …… 
    933954</tr> 
    934955<tr><td>scaleMode</td> 
    935 <td><tt class="docutils literal"><span class="pre">'box'</span></tt></td> 
     956<td><tt class="docutils literal"><span class="pre">&quot;box&quot;</span></tt></td> 
    936957</tr> 
    937958<tr><td>scaleFrom</td> 
    …… 
    943964</tbody> 
    944965</table> 
     966</dd> 
     967</dl> 
     968<p>The <tt class="docutils literal"><span class="pre">scaleContent</span></tt> option controls if the element <tt class="docutils literal"><span class="pre">font-size</span></tt> 
     969should also be scaled along with the size. The <tt class="docutils literal"><span class="pre">scaleFromCenter</span></tt> 
     970option allows continual adjustment of the <tt class="docutils literal"><span class="pre">element</span></tt> top left 
     971position to keep the element centered during the size change. 
     972The <tt class="docutils literal"><span class="pre">scaleMode</span></tt> option is used to determine the original 
     973<tt class="docutils literal"><span class="pre">element</span></tt> size. It can have one of the following values:</p> 
     974<blockquote> 
     975<table border="1" class="docutils"> 
     976<colgroup> 
     977<col width="18%" /> 
     978<col width="82%" /> 
     979</colgroup> 
     980<tbody valign="top"> 
     981<tr><td><tt class="docutils literal"><span class="pre">&quot;box&quot;</span></tt></td> 
     982<td>Uses <tt class="docutils literal"><span class="pre">offsetHeight</span></tt> and <tt class="docutils literal"><span class="pre">offsetWidth</span></tt></td> 
     983</tr> 
     984<tr><td><tt class="docutils literal"><span class="pre">&quot;contents&quot;</span></tt></td> 
     985<td>Uses <tt class="docutils literal"><span class="pre">scrollHeight</span></tt> and <tt class="docutils literal"><span class="pre">scrollWidth</span></tt></td> 
     986</tr> 
     987<tr><td>{...}</td> 
     988<td>Uses <tt class="docutils literal"><span class="pre">originalHeight</span></tt> and <tt class="docutils literal"><span class="pre">originalWidth</span></tt> from the specified object</td> 
     989</tr> 
     990</tbody> 
     991</table> 
     992</blockquote> 
    945993<dl class="docutils"> 
    946994<dt><em>Availability</em>:</dt> 
    …… 
    9521000<a class="mochidef reference" href="#fn-highlight">Highlight(element [, options])</a>:</p> 
    9531001<blockquote> 
    954 <p>Highlight an element, flashing with one color.</p> 
    955 <p>options:</p> 
    956 <table border="1" class="docutils"> 
    957 <colgroup> 
    958 <col width="44%" /> 
    959 <col width="56%" /> 
     1002<p>Highlights an <tt class="docutils literal"><span class="pre">element</span></tt> by flashing the background color. The 
     1003color is first set to the <tt class="docutils literal"><span class="pre">startcolor</span></tt> and is then slowly 
     1004morphed into the <tt class="docutils literal"><span class="pre">endcolor</span></tt>, normally the original background 
     1005color of the element.</p> 
     1006<dl class="docutils"> 
     1007<dt>element:</dt> 
     1008<dd>An element ID string or a DOM node (see 
     1009<a class="mochiref reference" href="DOM.html#fn-getelement">MochiKit.DOM.getElement</a>).</dd> 
     1010<dt>options:</dt> 
     1011<dd><p class="first">The following options and default values control this effect. 
     1012See also the <a class="mochiref reference" href="#fn-defaultoptions">DefaultOptions</a>.</p> 
     1013<table border="1" class="last docutils"> 
     1014<colgroup> 
     1015<col width="25%" /> 
     1016<col width="75%" /> 
    9601017</colgroup> 
    9611018<tbody valign="top"> 
    …… 
    9631020<td><tt class="docutils literal"><span class="pre">'#ffff99'</span></tt></td> 
    9641021</tr> 
    965 </tbody> 
    966 </table> 
    967 <dl class="docutils"> 
     1022<tr><td>endcolor</td> 
     1023<td><tt class="docutils literal"><span class="pre">element.style.backgroundColor</span></tt></td> 
     1024</tr> 
     1025</tbody> 
     1026</table> 
     1027</dd> 
    9681028<dt><em>Availability</em>:</dt> 
    9691029<dd>Available in MochiKit 1.4+</dd> 
    …… 
    9741034<a class="mochidef reference" href="#fn-scrollto">ScrollTo(element [, options])</a>:</p> 
    9751035<blockquote> 
    976 <p>Scroll the window to the position of the given element.</p> 
    977 <dl class="docutils"> 
     1036<p>Scroll the window to the position of the given <tt class="docutils literal"><span class="pre">element</span></tt>. Note 
     1037that this effect only scrolls the top window and not any parent 
     1038elements with scrollbars due to <tt class="docutils literal"><span class="pre">&quot;overflow:</span> <span class="pre">auto&quot;</span></tt> style.</p> 
     1039<dl class="docutils"> 
     1040<dt>element:</dt> 
     1041<dd>An element ID string or a DOM node (see 
     1042<a class="mochiref reference" href="DOM.html#fn-getelement">MochiKit.DOM.getElement</a>).</dd> 
     1043<dt>options:</dt> 
     1044<dd>See <a class="mochiref reference" href="#fn-defaultoptions">DefaultOptions</a>.</dd> 
    9781045<dt><em>Availability</em>:</dt> 
    9791046<dd>Available in MochiKit 1.4+</dd> 
    …… 
    9841051<a class="mochidef reference" href="#fn-morph">Morph(element [, options])</a>:</p> 
    9851052<blockquote> 
    986 <p>Make a transformation to the given element. It's called with the option 
     1053<p>Make a transformation to the given <tt class="docutils literal"><span class="pre">element</span></tt>. It's called with the option 
    9871054<tt class="docutils literal"><span class="pre">style</span></tt> with an array holding the styles to change. It works with 
    9881055properties for size (<tt class="docutils literal"><span class="pre">font-size</span></tt>, <tt class="docutils literal"><span class="pre">border-width</span></tt>, ...) and properties 
    …… 
    9991066</pre> 
    10001067<dl class="docutils"> 
     1068<dt>element:</dt> 
     1069<dd>An element ID string or a DOM node (see 
     1070<a class="mochiref reference" href="DOM.html#fn-getelement">MochiKit.DOM.getElement</a>).</dd> 
     1071<dt>options:</dt> 
     1072<dd>See <a class="mochiref reference" href="#fn-defaultoptions">DefaultOptions</a>.</dd> 
    10011073<dt><em>Availability</em>:</dt> 
    10021074<dd>Available in MochiKit 1.4+</dd> 

  • mochikit/trunk/doc/rst/MochiKit/Visual.rst

    r1342 r1343  
    452452 
    453453    options: 
    454         The following options and default values controls this 
     454        The following options and default values control this 
    455455        effect. Note that the :mochiref:`Opacity` effect is turned 
    456456        off by default. See also the :mochiref:`DefaultOptions`. 
    …… 
    492492 
    493493    options: 
    494         The following options and default values controls this 
     494        The following options and default values control this 
    495495        effect. Note that the :mochiref:`Opacity` effect is turned 
    496496        off by default. See also the :mochiref:`DefaultOptions`. 
    …… 
    562562 
    563563 
    564 Basic Effects classes 
    565 --------------------- 
     564Basic Effects Classes & Constants 
     565--------------------------------- 
    566566 
    567567:mochidef:`Transitions`: 
    …… 
    647647 
    648648    effects: 
    649         An array of instantiated effect objects. Note that they must 
     649        An array of instantiated effect objects. Note that they *must* 
    650650        all have ``sync`` set to ``true``. 
    651651 
    …… 
    659659:mochidef:`Opacity(element [, options])`: 
    660660 
    661     Change the opacity of an element progressively. 
    662  
    663     options: 
    664  
    665     ====== ======== 
    666     from   ``0.0`` 
    667     to     ``1.0`` 
    668     ====== ======== 
     661    Change the opacity of an ``element`` progressively. 
     662 
     663    element: 
     664        An element ID string or a DOM node (see 
     665        :mochiref:`MochiKit.DOM.getElement`). 
     666 
     667    options: 
     668        The following options and default values control this effect. 
     669        See also the :mochiref:`DefaultOptions`. 
     670 
     671        ====== ======== 
     672        from   ``0.0`` 
     673        to     ``1.0`` 
     674        ====== ======== 
    669675 
    670676    *Availability*: 
    …… 
    674680:mochidef:`Move(element [, options])`: 
    675681 
    676     Change the position of an element in small steps, creating a 
    677     moving effect. 
    678  
    679     options: 
    680  
    681     ========= ================ 
    682     x         ``0`` 
    683     y         ``0`` 
    684     mode      ``'relative'`` 
    685     ========= ================ 
     682    Changes the (top left) position of an ``element`` in small steps, 
     683    creating a moving effect. 
     684 
     685    element: 
     686        An element ID string or a DOM node (see 
     687        :mochiref:`MochiKit.DOM.getElement`). 
     688 
     689    options: 
     690        The following options and default values control this effect. 
     691        See also the :mochiref:`DefaultOptions`. 
     692 
     693        ========= ================ 
     694        x         ``0`` 
     695        y         ``0`` 
     696        mode      ``'relative'`` 
     697        ========= ================ 
     698 
     699    The ``mode`` option controls if the specified ``x`` and ``y`` 
     700    coordinates are ``relative`` or ``absolute`` with respect to the 
     701    current ``element`` position. 
    686702 
    687703    *Availability*: 
    …… 
    691707:mochidef:`Scale(element, percent [, options])`: 
    692708 
    693     Change the size of an element. 
     709    Changes the size of an ``element``. 
     710 
     711    element: 
     712        An element ID string or a DOM node (see 
     713        :mochiref:`MochiKit.DOM.getElement`). 
    694714 
    695715    percent: 
    …… 
    699719 
    700720    options: 
    701  
    702     ================ ============ 
    703     scaleX           ``true`` 
    704     scaleY           ``true`` 
    705     scaleContent     ``true`` 
    706     scaleFromCenter  ``false`` 
    707     scaleMode        ``'box'`` 
    708     scaleFrom        ``100.0`` 
    709     scaleTo          ``percent`` 
    710     ================ ============ 
     721        The following options and default values control this effect. 
     722        See also the :mochiref:`DefaultOptions`. 
     723 
     724        ================ ============ 
     725        scaleX           ``true`` 
     726        scaleY           ``true`` 
     727        scaleContent     ``true`` 
     728        scaleFromCenter  ``false`` 
     729        scaleMode        ``"box"`` 
     730        scaleFrom        ``100.0`` 
     731        scaleTo          ``percent`` 
     732        ================ ============ 
     733 
     734    The ``scaleContent`` option controls if the element ``font-size`` 
     735    should also be scaled along with the size. The ``scaleFromCenter`` 
     736    option allows continual adjustment of the ``element`` top left 
     737    position to keep the element centered during the size change. 
     738    The ``scaleMode`` option is used to determine the original 
     739    ``element`` size. It can have one of the following values: 
     740 
     741        ================ ========================================= 
     742        ``"box"``        Uses ``offsetHeight`` and ``offsetWidth`` 
     743        ``"contents"``   Uses ``scrollHeight`` and ``scrollWidth`` 
     744        {...}            Uses ``originalHeight`` and ``originalWidth`` from the specified object 
     745        ================ =========================================         
    711746 
    712747    *Availability*: 
    …… 
    716751:mochidef:`Highlight(element [, options])`: 
    717752 
    718     Highlight an element, flashing with one color. 
    719  
    720     options: 
    721  
    722     =========== ============== 
    723     startcolor  ``'#ffff99'`` 
    724     =========== ============== 
     753    Highlights an ``element`` by flashing the background color. The 
     754    color is first set to the ``startcolor`` and is then slowly 
     755    morphed into the ``endcolor``, normally the original background 
     756    color of the element. 
     757 
     758    element: 
     759        An element ID string or a DOM node (see 
     760        :mochiref:`MochiKit.DOM.getElement`). 
     761 
     762    options: 
     763        The following options and default values control this effect. 
     764        See also the :mochiref:`DefaultOptions`. 
     765 
     766        =========== ============== 
     767        startcolor  ``'#ffff99'`` 
     768        endcolor    ``element.style.backgroundColor`` 
     769        =========== ============== 
    725770 
    726771    *Availability*: 
    …… 
    730775:mochidef:`ScrollTo(element [, options])`: 
    731776 
    732     Scroll the window to the position of the given element. 
     777    Scroll the window to the position of the given ``element``. Note 
     778    that this effect only scrolls the top window and not any parent 
     779    elements with scrollbars due to ``"overflow: auto"`` style. 
     780 
     781    element: 
     782        An element ID string or a DOM node (see 
     783        :mochiref:`MochiKit.DOM.getElement`). 
     784 
     785    options: 
     786        See :mochiref:`DefaultOptions`. 
    733787 
    734788    *Availability*: 
    …… 
    738792:mochidef:`Morph(element [, options])`: 
    739793 
    740     Make a transformation to the given element. It's called with the option 
     794    Make a transformation to the given ``element``. It's called with the option 
    741795    ``style`` with an array holding the styles to change. It works with 
    742796    properties for size (``font-size``, ``border-width``, ...) and properties 
    …… 
    755809        Morph("foo", {"style": {"font-size": "2em"}}); 
    756810 
     811    element: 
     812        An element ID string or a DOM node (see 
     813        :mochiref:`MochiKit.DOM.getElement`). 
     814 
     815    options: 
     816        See :mochiref:`DefaultOptions`. 
    757817 
    758818    *Availability*: