IU Widget

Recent update : 2017년 6월 12일

• All Widgets
• Transition
• Carousel
• Collapsible
• Flip swithch
• Google Map
• Panel
• Popup
• Slider
• Range Slider
• Tab View
• Switch
• Webmovie
• Movie
• Widgets without further methods
• Event Variable-Receiver
• Multiple versions of jQuery

All Widgets

Initialize all descendents of element as IU WIDGET.

• IUDOMReady($element)

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

Transition

1. jQuery Plugin

   $.fn.transition()

2. jQuery data key : IU_WIDGET.TRANSITION

   • Example

     var Transition = $('#id').data(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

   • Example

     var Carousel = $('#id').data(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

   • Example

     var Collapsible = $('#id').data(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

   • Example

     var Switch = $('#id').data(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

   • Example

     var Map = $('#id').data(IU_WIDGET.GOOGLEMAP)

3. Method

   Method	Description
   .resize()	Move map position to center

4. Google map lazy initialization (support greater than iueditor-2.0)

   • window.IUEditor.initGoogleMapInElement(element)

   // 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

   • Example

     var Panel = $('#id').data(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

   • Example

     var Popup = $('#id').data(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

   • Example

     var Slider = $('#id').data(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

   • Example

     var RangeSlider = $('#id').data(IU_WIDGET.RANGE_SLIDER)

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

   • Example

     var Tabview = $('#id').data(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

   • Example

     var Switch = $('#id').data(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

   • Example

     var Webmovie = $('#id').data(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)

   • window.IUEditor.initVimeoInElement(element)
   • window.IUEditor.initYoutubeInElement(element)

   // 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

   • Example

     var movie = $('#id').data(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

• File : iu.widget.js

1. File Upload

   • Description
     • File Upload Widget
     • When clicking event, connect Upload Button with File Name

   • jQuery Plugin

     $.fn.activateFileUpload

   • Example

     $('#file-upload-id').activateFileUpload()

2. Enable Hover Effect

   • Description
     • Widget has mouse-over styles
     • Mimic :hover selector
       
     • When ocuuring mouse over event, activate iux-hover class

   • jQuery Plugin

     $.fn.activateHover

   • Example

     $('#widget-has-mouse-over-id').activateHover()

3. Enable Link to Scroll Effect

   • Description
     • Widget has id link (page#id)
     • When clicking event on link, smooth scroll to position at link's element

   • jQuery Plugin

     $.fn.activateScrollLink

   • Example

     $('#widget-has-element-link').activateScrollLink()

4. Full Section

   • Description
     • Section has enable full size
     • When resizing window, section's height will be equal to window's height

   • jQuery Plugin

     $.fn.iufullsection

   • Example

     $('#section-is-enabled-fullsize').iufullsection()

Event Variable-Receiver

• CMD+E in IUEditor

1. Decription

   • Variable's scope is global
   • Variable range in (0, maximum)
   • Variable starts from default value
   • Trigger Action
     • Click : When clicking, variable plus 1 or set to 0 if reacing maximum value.
     • Mouse over : When mouse entering, variable plus 1 or set to 0 if reacing maximum value. When mouse leaving, variable minus 1.

2. Method

   • You can access variable directly or iuEventMachine
   • iuEventMachine is singleton.

   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