IU Widget
Recent update : 2017년 6월 12일
Initialize all descendents of element as IU WIDGET.
IUDOMReady($element)
IUDOMReady($('body'))
jQuery Plugin
$.fn.transition()
jQuery data key : IU_WIDGET.TRANSITION
Example
var Transition = $('#id').data(IU_WIDGET.TRANSITION)
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. |
Method
Method | Description |
---|---|
.toggle(state) | Change 1st item to 2nd item |
Method Detail
Method | Param | Type | Description |
---|---|---|---|
.toggle(state) | state | bool | Show 2nd item if state is true, hide 2nd item otherwise |
jQuery Plugin
$.fn.carousel()
jQuery data key : IU_WIDGET.CAROUSEL
Example
var Carousel = $('#id').data(IU_WIDGET.CAROUSEL)
Option
Member | Description |
---|---|
.callbackMove | Callback function when the animation has finished |
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 |
Method Detail
Method | Param | Type | Description |
---|---|---|---|
.move(index, translateX) | toIndex | number | index of carousel item |
translateX | number | css : translateX |
jQuery Plugin
$.fn.collapsible()
jQuery data key : IU_WIDGET.COLLAPSIBLE
Example
var Collapsible = $('#id').data(IU_WIDGET.COLLAPSIBLE)
Option
Member | Description |
---|---|
.callbackShow | Callback function when the animation has finished |
.callbackClose | Callback function when the animation has finished |
Method
Method | Description |
---|---|
.toggle(state) | Change show/hide state |
Method Detail
Method | Param | Type | Description |
---|---|---|---|
.toggle(state) | state | bool | Show if state is true, hide otherwise |
jQuery Plugin
$.fn.flipswitch()
jQuery data key : IU_WIDGET.FLIPSWITCH
Example
var Switch = $('#id').data(IU_WIDGET.FLIPSWITCH)
Method
Method | Description |
---|---|
.toggle(state, duration) | Change show/hide state |
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 |
jQuery Plugin
$.fn.googlemap()
jQuery data key : IU_WIDGET.GOOGLEMAP
Example
var Map = $('#id').data(IU_WIDGET.GOOGLEMAP)
Method
Method | Description |
---|---|
.resize() | Move map position to center |
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]);
jQuery Plugin
$.fn.panel()
jQuery data key : IU_WIDGET.PANEL
Example
var Panel = $('#id').data(IU_WIDGET.PANEL)
Option
Member | Description |
---|---|
.callbackShow | Callback function when the animation has finished |
.callbackClose | Callback function when the animation has finished |
Method
Method | Description |
---|---|
.show() | Show panel |
.close() | Close panel |
.toggle() | Change show/hide state |
jQuery Plugin
$.fn.popup()
jQuery data key : IU_WIDGET.POPUP
Example
var Popup = $('#id').data(IU_WIDGET.POPUP)
Option
Member | Description |
---|---|
.callbackShow | Callback function when the animation has finished |
.callbackClose | Callback function when the animation has finished |
Method
Method | Description |
---|---|
.show() | Show popup |
.close() | Close popup |
.toggle() | Change show/hide state |
jQuery Plugin
$.fn.slide()
jQuery data key : IU_WIDGET.SLIDER
Example
var Slider = $('#id').data(IU_WIDGET.SLIDER)
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 |
Method Detail
Method | Param | Type | Description | Default |
---|---|---|---|---|
.setValue(value) | value | number | slider value between min and max | attribute data-iu-slide-default-value |
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();
jQuery Plugin
$.fn.rangeslider()
jQuery data key : IUWIDGET.RANGESLIDER
Example
var RangeSlider = $('#id').data(IU_WIDGET.RANGE_SLIDER)
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 |
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 |
jQuery Plugin
$.fn.tabview()
jQuery data key : IU_WIDGET.TABVIEW
Example
var Tabview = $('#id').data(IU_WIDGET.TABVIEW)
Option
Member | Description |
---|---|
.callbackSelect | Callback function when the animation has finished |
Method
Method | Description |
---|---|
.select(index) | Select tab at index |
Method Detail
Method | Param | Type | Description | Default |
---|---|---|---|---|
.select(index) | index | number | tab index in range (0, tabcount-1) |
jQuery Plugin
$.fn.pgswitch()
jQuery data key : IU_WIDGET.SWITCH
Example
var Switch = $('#id').data(IU_WIDGET.SWITCH)
Method
Method | Description |
---|---|
.toggle(state) | Change 1st item to 2nd item |
Method Detail
Method | Param | Type | Description |
---|---|---|---|
.toggle(state) | state | bool | Show 2nd item if state is true, hide 2nd item otherwise |
jQuery Plugin
$.fn.webmovie()
jQuery data key : IU_WIDGET.WEBMOVIE
Example
var Webmovie = $('#id').data(IU_WIDGET.WEBMOVIE)
Method
Method | Description |
---|---|
.play() | Play movie |
.pause() | Pause movie |
.autoplay() | Play movie if movie is visible in window frame, pause otherwise |
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]);
jQuery Plugin
$.fn.movie()
jQuery data key : IU_WIDGET.MOVIE
Example
var movie = $('#id').data(IU_WIDGET.MOVIE)
Method
Method | Description |
---|---|
.play() | Play movie |
.pause() | Pause movie |
.autoplay() | Play movie if movie is visible in window frame, pause otherwise |
File : iu.widget.js
File Upload
jQuery Plugin
$.fn.activateFileUpload
Example
$('#file-upload-id').activateFileUpload()
Enable Hover Effect
jQuery Plugin
$.fn.activateHover
Example
$('#widget-has-mouse-over-id').activateHover()
Enable Link to Scroll Effect
jQuery Plugin
$.fn.activateScrollLink
Example
$('#widget-has-element-link').activateScrollLink()
Full Section
jQuery Plugin
$.fn.iufullsection
Example
$('#section-is-enabled-fullsize').iufullsection()
CMD+E in IUEditor
Decription
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) |
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 |
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');
}
If you imported another version of jQuery, you should use IUEditor.$
instead of $
in order to use iueditor.js API