jqToggle

View
Rendered webpage	APL code

Clicking the below buttons toggle the visibility of this division.

The transistions are slow, and use various effects:

Action	Effect
Toggle	bounce
Hide	puff
Show	fade


:Class jqToggleSimple: MiPageSample 
⍝ Control:: _JQ.jqToggle _JQ.jqHide _JQ.jqShow _html.head 
⍝ Description:: Toggle, show, and hide an element during callback 
 
    :field public TABLE←3 2⍴'Toggle' 'bounce' 'Hide' 'puff' 'Show' 'fade' 
 
    ∇ Compose;output 
      :Access public 
      Use'JQueryUI' ⍝ because we will add jQuery UI effects later 
      output←'#output'Add _.div ScriptFollows 
      output.Add _.p'Clicking the below buttons toggle the visibility of this division.' 
      output.Add _.p'The transistions are slow, and use various effects:' 
      output.Add _.Table('Action' 'Effect'⍪TABLE)'' 1 
      {(⍵ Add _.Button ⍵).On'click' 'Click'}¨TABLE[;1] 
    ∇ 
 
    ∇ r←Click;i 
      :Access public 
      i←TABLE[;1]⍳⊂_what 
      ⍝ Scripts belong in the <head> element: 
      r←'head'Append New _.jqToggle _.jqHide _.jqShow[i],⊂'#output'(⊃⌽TABLE[i;])'' 800 
    ∇ 
 
:EndClass

Controls used on this page: Dyalog: Button, Table jQueryUI: jqHide, jqShow, jqToggle Base HTML: div, p

Dyalog MiServer 3 Sample Site