IU Widget

Recent update : 2017년 6월 12일


All Widgets

Initialize all descendents of element as IU WIDGET.

  1. Example IUDOMReady($('body'))

Transition

  1. jQuery Plugin

    $.fn.transition()

  2. jQuery data key : IU_WIDGET.TRANSITION

  3. Option

    Member Description
    .callbackShow Callback function when the animation (show) has finished. The second item is shown.
    .callbackClose Callback function when the animation (close) has finished. The second item is closed.
  4. Method

    Method Description
    .toggle(state) Change 1st item to 2nd item
  5. Method Detail

    Method Param Type Description
    .toggle(state) state bool Show 2nd item if state is true, hide 2nd item otherwise

Carousel

  1. jQuery Plugin

    $.fn.carousel()

  2. jQuery data key : IU_WIDGET.CAROUSEL

  3. Option

    Member Description
    .callbackMove Callback function when the animation has finished
  4. Method

    Method Description
    .reload() Reload carousel
    .destroy() Destroy carousel
    .pause() Pause carousel if carousel is set autoplay
    .start() Start carousel if carousel is set autoplay
    .moveNext() Go to next item
    .movePrev() Go to prev item
    .moveCurrent() Reset to current item
    .move(index, translateX) Go to (index) item with translateX value
  5. Method Detail

    Method Param Type Description
    .move(index, translateX) toIndex number index of carousel item
    translateX number css : translateX

Collapsible

  1. jQuery Plugin

    $.fn.collapsible()

  2. jQuery data key : IU_WIDGET.COLLAPSIBLE

  3. Option

    Member Description
    .callbackShow Callback function when the animation has finished
    .callbackClose Callback function when the animation has finished
  4. Method

    Method Description
    .toggle(state) Change show/hide state
  5. Method Detail

    Method Param Type Description
    .toggle(state) state bool Show if state is true, hide otherwise

Flip swithch

  1. jQuery Plugin

    $.fn.flipswitch()

  2. jQuery data key : IU_WIDGET.FLIPSWITCH

  3. Method

    Method Description
    .toggle(state, duration) Change show/hide state
  4. Method Detail

    Method Param Type Description Default
    .toggle(state, duration) state bool Show if state is true, hide otherwise
    duration number Duration with animation 300ms

Google Map

  1. jQuery Plugin

    $.fn.googlemap()

  2. jQuery data key : IU_WIDGET.GOOGLEMAP

  3. Method

    Method Description
    .resize() Move map position to center
  4. Google map lazy initialization (support greater than iueditor-2.0)

    // lazy initialization example 
    
    // init googlemap in myDiv element
    var $myDiv = $('#myDiv');
    window.IUEditor.initGoogleMapInElement($myDiv);
    // or
    // window.IUEditor.initGoogleMapInElement($myDiv[0]);

Panel

  1. jQuery Plugin

    $.fn.panel()

  2. jQuery data key : IU_WIDGET.PANEL

  3. Option

    Member Description
    .callbackShow Callback function when the animation has finished
    .callbackClose Callback function when the animation has finished
  4. Method

    Method Description
    .show() Show panel
    .close() Close panel
    .toggle() Change show/hide state

Popup

  1. jQuery Plugin

    $.fn.popup()

  2. jQuery data key : IU_WIDGET.POPUP

  3. Option

    Member Description
    .callbackShow Callback function when the animation has finished
    .callbackClose Callback function when the animation has finished
  4. Method

    Method Description
    .show() Show popup
    .close() Close popup
    .toggle() Change show/hide state

Slider

  1. jQuery Plugin

    $.fn.slide()

  2. jQuery data key : IU_WIDGET.SLIDER

  3. Method

    Method Description
    .setValue(value) Set slider value
    .render() Render a point and textfield with current value
    .renderPoint() Render a point
    .renderTextField() Render a textfield
  4. Method Detail

    Method Param Type Description Default
    .setValue(value) value number slider value between min and max attribute data-iu-slide-default-value
  5. Example

    //get slider object
    var Slider = $('#id').data(IU_WIDGET.POPUP);
    
    //change value to 80, range in (0, 100)
    Popup.setValue(80);
    
    //redraw slider
    Popup.render();

Range Slider

  1. jQuery Plugin

    $.fn.rangeslider()

  2. jQuery data key : IUWIDGET.RANGESLIDER

  3. Method

    Method Description
    .changeStartValue(value) Set start value
    .changeEndValue(value) Set end value
    .render() Render innerBar and textfields with current values
    .renderInnerBar(updateLeft) Render innberBar
    .renderStartTextField() Render a start textfield
    .renderEndTextField() Render a end textfield
  4. Method Detail

    Method Param Type Description Default
    .changeStartValue(value) value number slider value between min and end attribute data-iu-range-slide-default-start-value
    .changeEndValue(value) value number slider value between start and max attribute data-iu-range-slide-default-end-value
    .renderInnerBar(updateLeft) updateLeft bool if updateLeft is true, update innerBar left false

Tab View

  1. jQuery Plugin

    $.fn.tabview()

  2. jQuery data key : IU_WIDGET.TABVIEW

  3. Option

    Member Description
    .callbackSelect Callback function when the animation has finished
  4. Method

    Method Description
    .select(index) Select tab at index
  5. Method Detail

    Method Param Type Description Default
    .select(index) index number tab index in range (0, tabcount-1)

Switch

  1. jQuery Plugin

    $.fn.pgswitch()

  2. jQuery data key : IU_WIDGET.SWITCH

  3. Method

    Method Description
    .toggle(state) Change 1st item to 2nd item
  4. Method Detail

    Method Param Type Description
    .toggle(state) state bool Show 2nd item if state is true, hide 2nd item otherwise

Webmovie

  1. jQuery Plugin

    $.fn.webmovie()

  2. jQuery data key : IU_WIDGET.WEBMOVIE

  3. Method

    Method Description
    .play() Play movie
    .pause() Pause movie
    .autoplay() Play movie if movie is visible in window frame, pause otherwise
  4. WebMovie(Vimeo & Youtube) lazy initialization (support greater than iueditor-2.0)

    // lazy initialization example 
    
    // init Vimeo in myDiv element
    var $myDiv = $('#myDiv');
    window.IUEditor.initVimeoInElement($myDiv);
    // or
    // window.IUEditor.initVimeoInElement($myDiv[0]);
    
    // init Youtube in myDiv element
    var $myDiv = $('#myDiv');
    window.IUEditor.initYoutubeInElement($myDiv);
    // or
    // window.IUEditor.initYoutubeInElement($myDiv[0]);

Movie

  1. jQuery Plugin

    $.fn.movie()

  2. jQuery data key : IU_WIDGET.MOVIE

  3. Method

    Method Description
    .play() Play movie
    .pause() Pause movie
    .autoplay() Play movie if movie is visible in window frame, pause otherwise

Widgets without further methods

  1. File Upload

  2. Enable Hover Effect

  3. Enable Link to Scroll Effect

  4. Full Section

Event Variable-Receiver

  1. Decription

  2. Method

    Method Description
    .increase(element) Increase by 1 if element has iu-variable. After this, check receiver elements.
    .decrease(element) Decrease by 1 if element has iu-variable. After this, check receiver elements.
    .run(variable) Check receiver elements to decide element's display state. (show or hide)
  3. Method Detail

    Method Param Type Description
    .increase(element) element HTML DOM Element Object
    .decrease(element) element HTML DOM Element Object
    .run(variable) variable javascript variable Created in IUEditor
  4. Example

// Variable NAME : a, b 
// Purpose : Create custom code for exclusive state 

//check a's state
//if state is on
if (a == 1){ 

    //b's state set to 0
    b == 0;     
    
    //change elements display state (show/hide) connected 'b'
    window.iuEventMachine.run('b'); 
}

Multiple versions of jQuery

If you imported another version of jQuery, you should use IUEditor.$ instead of $ in order to use iueditor.js API