jqSwitchClass

View
Rendered webpage	APL code

This box is red because it has the class "redclass".

We've also set up a style for the class "yelclass".

Click the button to switch to that style.

The box should then turn yellow and gain a thick blue border.


:Class jqSwitchClassSimple: MiPageSample 
⍝ Control:: _JQ.jqSwitchClass _html.head 
⍝ Description:: Interchange classes during callback 
 
    ∇ Compose;box 
      :Access public 
      Use'JQueryUI' ⍝ because we will add a jQuery UI effect later 
      
      Add _.style ScriptFollows 
      ⍝ .redclass {background-color:red;    border:15px solid transparent;} 
      ⍝ .yelclass {background-color:yellow; border:15px solid blue;      } 
       
      box←'#output' '.redclass'Add _.div(WrapFollowing'p') 
      ⍝ This box is red because it has the class "redclass". 
      ⍝ 
      ⍝ We've also set up a style for the class "yelclass". 
      ⍝ 
      ⍝ Click the button to switch to that style. 
      ⍝ 
      ⍝ The box should then turn yellow and gain a thick blue border. 
      
      ('#button'box.Add _.Button'Repaint').On'click' 'Repaint' 
      'onclick="window.location.reload()"'box.Add _.Button'Reload' 
    ∇ 
 
    ∇ r←Repaint 
      :Access public 
      ⍝ Scripts belong in the <head> element: 
      r←'head'Append New _.jqSwitchClass('#output' 'redclass' 'yelclass' 800 'easeInOutCirc') 
    ∇ 
 
:EndClass

Controls used on this page: Dyalog: Button jQueryUI: jqSwitchClass Base HTML: div, style

Dyalog MiServer 3 Sample Site