Welcome to Windows IUEditor’s documentation!¶

What is IUEditor?¶

IUEditor is optimized to simplify the complex process of design and development.

Advantages¶

IUEditor is a GUI-based program which allows users to design a prototype without any coding.
Also, IUEditor allows users to develop a product or a website that supports multi-screen devices with just one project file.

Values¶

IUEditor enables designers to work together with developers without publishers so that your team or company can save cost and time.
Furthermore, IUEditor enables your team or company to ship products early, so you can adopt a lean process and iterate to build a better product or website.

Environment¶

OS : Windows 8.1 (64-bit), Windows 10 (64-bit)

Prerequisites

Prerequisites are installed with the IUEditor package. If not, you should install links below:

.Net Framework 4.5.2+ [download]

Microsoft Visual C++ Redistributable [download]

License¶

Trial : 30 days, 2 pages
Light (Basic) : 20 pages
Pro : Unlimited

Note

For more information, go to OFFICIAL SITE

Basic¶

Create a simple landing page through tutorials and set up a responsive web through media query settings.

If you need a project file, click this link(project). or if you only need the images used in the tutorial project, click this link(images).

Screen¶

IUEditor’s screen is divided into four areas: the upper toolbar (1), the left panel (2), the canvas (3), and the right panel (4).

Menu¶

File¶

Set up settings for the project.

New : Create a new project.
Open : Open a saved project.
Recent Files : Open a recently used project directly.
Save : Save the current project.
Save As : Save the current project under a different name.
Close : Close the current project.
Exit : Exit the program.

Edit¶

Undo : Cancel the work in progress and return to the previous step.
Redo : Undo the progress you canceled.
Copy : Copies the currently selected file or widget.
Paste : Pastes the currently copied file or widget.
Cancel : Cancels the status according to the current status. - Cancel adding a new widget while drawing a new one. - When you are editing text, you leave the Text Edit Mode.

View¶

Show or focus panels.

Developer : Open the developer view panel.
Start page : Show or close the start page.

Canvas¶

Refresh : Draw the new canvas.
Show outline : Draw the outline of the widget. It is mainly used when there is no widget background.
Show Ruler : Show or hide (vertical/horizontal) rulers.
Increase zoom
Decrease zoom

Help¶

About : Notifies you of the current version of the program.
Home : Go to the IUEditor site.
License
Acknowledgements
Leave Feedback

Shortcut¶

ctrl + n : Create a new project
ctrl + o : Open a project
ctrl + s : Save a current page or composition
ctrl + shift + s : Save a whole project includes all pages, compositions and resources
alt + F4 : Close IUEditor

ctrl + z : Undo
ctrl + y : Redo
ctrl + c : Copy a widget (or page/ composition) if it is selected
ctrl + p : Paste
ctrl + d : Duplicate a widget (Copy & Paste)

F5 : Refresh canvas
ctrl + l : Show outline
ctrl + r : Show ruler
ctrl + + : Increase zoom
ctrl + - : Decrease zoom

Toolbar¶

Toolbar is located at the top of the screen and is a collection of frequently used or essential functions in the program.

Default Buttons¶

UI	Name	Description
	Save all	Save all the pages of the current project you are working on.
	Open	Import projects or files in addition to the project you are working on.
	Undo & Redo	Cancel or revert the progress.
	Build	Create an html / css / js file based on the elements in the current project. Build Before you create a build, you must save the project locally.
	Mediaqueries	A property that allows you to set the project’s output status (to generate HTML for your situation) and the size of the current media query.
	Add Section	Add a new section. Click to view the template through a thumbnail. Automatically insert when you select the desired template.
	Box	It is the most basic widget and it is created with <div> tag. It is mainly used for setting the layout, and also for grouping sub-elements.
	Image	Insert Image allows you to insert the desired image in various ways. Press the Fit widget size to image area button to automatically change the widget size to match the imported image size.
	Text	The text is generated with the <p> tag. You can create text and double-click to enter text, You can change the settings of the text using the floating toolbar created at the top of the input box.
	Cell	A widget with text automatically centered. The height (h) of the widget can only be a pixel (px) unit.
	Set a Position and Size	This property allows you to set the size and position of the widget. It can be set in units of pixel (px) and percentage (%).
	Align	A widget that allows you to position the widget on the x / y axis.
	Display	This property is used to show or hide the selected widget.
	Fill	A property that can change the color of the widget.
	Text Color	A property that can change the color of the text.
	Zoom	This property zooms in and out of the canvas.
	Tracing Screen	Tracing Screen is a function that allows you to insert the desired image into the work area. When you click the button, a popup pops up and sets detailed options along with loading the image.

For Widgets¶

Text¶

Apply a Text Style

It is a function that can set font size and thickness of title in a predetermined style.
Insert Dummy text

It is a function that can generate dummy text matching sentence, paragraph, number, e-mail address, and other forms.

Button Style¶

It helps you quickly apply prepared button styles.

Canvas¶

The canvas is a screen that actually works in the editor. The canvas has a toolbar that makes it easy to insert text and images.

Menu

Shortcut

Description

Show Outline

ctrl + l

Show outline menu shows the area of the structure or the size of the widget in lines.

Show Ruler

ctrl + r

Show ruler menu is used to indicate the size and location of the widget.

When the ruler is on, detailed coordinates will appear when you move the widget, click the cursor on the ruler at the desired position, and the guideline will be created.

Canvas Thumb¶

Move

Move the widget.
Fit

Transform the widget size of inserted image size.
Insert Image

Open widget to search for images, or insert imported images.

Image Pop-Up¶

Image Pop-Up is a widget that allows you to search and insert images, or insert imported images. unsplash is a function that allows you to search and insert images uploaded to unsplash, and image is a menu that allows you to load and use images you have. The ticker at the bottom of the image pop-up allows you to adjust the thumbnail size of the image.

Text Floating Toolbar¶

The Text Floating Tool bar is a toolbar that collects all the elements that make up the text. You can use this toolbar to edit and decorate your text. Fonts can be edited in the Style menu in the right panel.

UI	Name	Description
	Text Color	Change the color of the text.
	Text Box Color	Change the color of the text box.
	Bold	Change the text to bold.
	Oblique	Replace text with a slant.
	Underline	Draw an underline of the text.
	Line Through	Draw a line through the center of the text.
	Link	Attach a link to the text.
	Unlink	Remove the link to the text.
	Delete Font Style	Delete all styles applied to the text.
	Change Input box Background	Change the background color of the input box.

Left Panel¶

Project¶

A project panel is an area that checks the hierarchy of the generated project and manages detail pages. It consists of functions such as page creation, composition creation, resource addition, library creation and deletion.

Buttons¶

UI	Description
	Create a page.
	Create a composition.
	Add a resource (image, css, js and more).
	Create a directory.
	Delete the selected page.

Structure¶

Structure is a panel that shows the structure of elements (sections, headers, footers, page contents, widgets, etc.) that belong to the currently selected page in tree form. You can delete elements, move them to drag and drops, or add new sections. You can also change the structure of this panel or modify the names of the added elements to the name you want.

Buttons¶

UI	Name	Description
	Add a popup or panel	Show a list of panel and pop-up additions.
	Add a Panel	Add a panel to the panel group(panels).
	Add a Popup	Add a popup to the popup group(popups).
	Change an layout (Content only)	Set the layout of the structure to have content areas only.
	Change an layout (Header, Content & Footer)	Set the layout of the structure to header, content, footer.
	Change an layout (Header & Content)	Set the layout of the structure to header and content.
	Change an layout (Content & Footer)	Set the layout of the structure to content and footer.
	Delete widget(s)	Delete the selected widget.
	Hide widget(s)	When the cursor is placed on the widget, the function that appears will make the selected widget invisible on the canvas.

Creation¶

Creation is a panel of all the elements that decorate the page, consisting of the default widgets provided by the editor and the custom widgets that users can create and use. All of the widgets you want can be quickly found through the search bar on the Creation panel. and you can use the load button to load widgets created in other projects.

Right Panel¶

Style¶

Style property allows you to set the layout / text / fill / border / shadow / transparency / background image of the selected widget.

Property¶

Layout¶

Set the location and size of the selected widget. Also, you can change padding, radius and transform rotate properties. You can choose first position in absolute, relative and fixed.

Text¶

Set the font type, size, color, thickness, alignment and kerning.

Image¶

Attache an image to the selected widget or sets the alignment of the inserted image.

Fill¶

Change the color and opacity of the selected widget.

Gradient¶

Set the gradient color of the selected widget. You can change a range of colors and direction. You can clear all state by clicking trash button.

Border¶

Change the border-color and border-width of the selected widget.

Shadow¶

Set the shadow of the selected widget.

Widget’s Property¶

Static Image¶

The static image property allows you to retrieve or insert the image you have through a URL. See static image.

Image and Text¶

The image and text properties allow you to modify the alignment and spacing of images and text, insert and modify text and images. See image and text.

Carousel¶

The carousel property allows you to modify the quantity of content, shape, location, color, and so on. See carousel.

Video clip¶

Video properties allow you to insert resources or modify thumbnails. See video clip.

Vimeo or youtube¶

The youtube/Viemo property allows you to enter the url of the video you want to insert immediately. See web movie.

Progress Bar¶

The process bar property manages colors, basic progress state, and appearance. See progress bar.

Tab View¶

The tab view property manages the number of tab. See tab view.

Simple Tab View¶

The tab view property manages the number and color of the tab, font color, and thickness and color of the line. See simple tab view.

Collapsible¶

The collapsible property manages header type and content orientation. See collapsible.

SVG¶

The svg property allows you to set the role or change the color of the inserted graphic. See svg.

Table¶

The table property allows quick creation through the input of the row and column. See table.

Slider¶

The slider property allows you to set the value of the slider and the color of the active state. See slider.

Range Slider¶

The range slider property allows you to set the value of the slider and the color of the active state. See range slider.

Button¶

The button property allows you to set the label of a button. See button.

Input Text¶

The input text property allows you to modify the type, text, and placeholder. See input text.

Input Paragraph text¶

The input paragraph property allows you to modify the placeholder and paragraph text. See input paragraph text.

Label¶

The label property allows you to modify the text. See label.

Select¶

In the select property, you can add or delete values and modify the name of the values. See select.

Import¶

In the import property, you can change or delete composition. See complex.

Panel¶

The panel property sets the position of the panel, the dim color, the use of the close button, the image, and the layout. See panel.

Header/Footer¶

The header/footer property sets the composition. See structure.

Link¶

It is a function to set a hyperlink to the URL, page in the project, popup or panel that enters the selected widget.

Type¶

Page Type¶

Create a relative URL of the selected page. If the page is same to the current page and the widget is selected, you can use the scroll animation (smoothly move to the widget).

URL Type¶

URL type sets the page to connect to using url.

Panel Type¶

For panel type, select a panel in the list to set the link type.

Event¶

Event properties allow you to set the interaction of the selected object. Hover and scroll are the basic interactions provided by the editor, and advanced settings are available through the advanced menu. However, only one event can be set for one object.

Detail¶

Detail property provides functionality for fine-tuning widgets.

The circular UI in front is a UI that tells the property to apply the media query. On the first column, if the circle is orange, the value is in the current media query. Otherwise, the value is from other media queries or default value (cascading value). You can clear current value by clicking the circle.

Section¶

Set section full-height : Section height is same as the height of web browser (js).

Text¶

Type : You can change a text tag in <p>, <h1> and <h2>
Ellipsis : You can add ellipsis to a selected line.

See text.

Static image¶

Alternative text : alt attribute in <img>

See static image.

Image and text¶

Image
- Top margin
- Bottom margin

See image and text.

Google map¶

Map
- Google map API key : You can get from google map. It should be set in project setting.
- Longitude : The longitude of your location
- Latitude : The latitude of your location
Control
- Zoom level : 1~18
- Zoom control : Show a zoom control or not
- Street Control : Show a street control or not
Marker
- Use : Show a marker or not
- Image : You can change a marker image.
- Title : The popup message when clicking a marker
Map style
- Color theme

See google map.

Facebook like¶

Like URL
Color scheme : Light and Dark
Show friend’s face

See facebook like.

Table¶

Table Row¶

As a header : Use <th> tag instead of <tr>
Row span
Column span

See table.

Carousel¶

Arrow
- X position : X position from side
- Y position : Y position from top

See carousel.

Video clip¶

Video
- Alternative text
Attribute
- Loop
- Muted
- Autoplay : Autoplay is only work when muted.

See video clip.

Vimeo or Youtube¶

Autoplay
Loop

See web movie.

Slider / Range Slider¶

Slider Inner Bar¶

Inner bar image : You can put an image instead of color.

Slider Text¶

Type : Same as Text
Text name

See slider characteristics.

Range slider Text¶

Type : Same as Text
Start text name
End text name

See range slider characteristics.

Switch¶

Checked : Status after build
Name

See switch.

Flip switch¶

Checked : Status after build
Name

See flip switch.

Label¶

For : Html id of a connected widget
Text

See label.

Button¶

Type : default, reset and submit

See button.

Input text¶

Max : Maximum of type
Min : Minimum of type
Max length

See input text.

Input paragraph text¶

Max length

See input paragraph text.

Checkbox¶

Checked : Status after build
Name

See checkbox.

Radio button¶

Checked : Status after build
Group : Group name of a radio button
Name

See radio button.

Form¶

Action
Method
Input hiddens
Name

See form.

Collection¶

Item count
Composition

See collection.

File upload¶

Name

See file upload.

Select¶

Option
Name

See select.

Header/Footer¶

Composition

See structure.

Developer View¶

Developer view is a panel where you can view and modify the code applied to the design or modify the code of the project. You can open the developer mode panel via the view menu.

You can add code in the left panel and see the preview code in the right panel by clicking preview code button.

ID & Class¶

You can change a Html ID and add classes.

Example¶

<!-- Your Input  -->
class1 class2 class3
<!-- Result -->
<div class="class1 class2 class3"></div>

Attribute¶

Example¶

<!-- Your Input  -->
attr="value1" attr="value2" single_value
<!-- Result -->
<div attr="value1" attr="value2" single_value></div>

Inline style code¶

Example¶

/* Your Input */
color:blue; background-color:lightblue;

<!-- Result -->
<div style="color:blue; background-color:lightblue;"></div>

Comment before element¶

Example¶

<!-- Your input -->
This element is blahblah

<!-- Result -->
<!-- This element is blahblah -->
<div></div>

Comment after element¶

Example¶

<!-- Your input -->
The end of this element

<!-- Result -->
<div></div>
<!-- The end of this element-->

Widgets¶

HTML¶

You can change html code directly.

SVG¶

You can change svg code directly.

Project Properties¶

Project properties is a function that allows you to change settings for information about the project, media query, code, and so on.

Site Information¶

Site Information is the menu to set project file name, favicon, and other items (meta tags).

If you choose a project, meta tags are applied to all the pages in the project.
If you choose a single page, meta tags are applied to the selected page.

Media Query¶

Media Query is a menu that sets options related to the size of the project or the event.

Add new size

You can add a size. If you can check duplicated from, all css values are copied from the selected size.

Build¶

Build is a menu for setting options such as path, resource path, port, etc. to build the project.

Build path - The directory of your project output : html files
Resource path - The directory of your project output and resources : css, js and all resource files (image, video and etc.)
Resource prefix - Prefix is inserted to all resource’s link : src=”/prefix/original/path/image.png”
Link prefix - Prefix is inserted to the href of page link (relative link) : href=”/prefix/original/pages/index.html”
Environment Variables in the build path and resource path
- $CurrentFolder : The parent directory of a project directory that contains the current project file(.webproj).
- $AppName : The project name.
- $HomeFolder : User home directory.

CSS/JS¶

CSS/JS is a menu where you can add the css or javascript file you want to use in your project.

If you choose a project, the css and javascript files are added to all the pages in the project.
If you choose a single page, the css and javascript files are added to the selected page.

External API¶

External API is a menu for configuring the external APIs used in the project.

Google map API key [External Link - google maps platform]
Facebook [External Link - facebook for developers]
- Admin
- App id

Custom Code¶

HTML ID prefix
- Insert a prefix in front of original html id for all widgets in the all pages.
<head> : Start code
- Add custom tag in the <head> before the automation code generated by IUEditor
</head> : End code
- Add custom tag in the <head> after the automation code generated by IUEditor

Sheet¶

Page¶

Page is a mapping to a single html file. It contains designed widgets and meta information.

You can create a page in the project panel.
You can change a page layout in the structure or detail.

Composition¶

You can create repeatable elements by using Compositions. Compositions will be imported to Import / Header / Footer / Collection widgets.

Widgets¶

Layout Widgets¶

Section¶

A page is separated with section. Section uses <section> tag. You can easily add template section on toolbar.

See detail properties.

Basic Widgets¶

Box¶

Box widget is a fundamental widget which is generated to <div> tag. Mostly, Box widget is used to set layout and to group children widgets.

Text¶

Text widget contains Text Content which is generated to <p>, <h1> or <h2> tag. You can edit text by clicking a text thumb.

See detail properties.

Image¶

Image widget contains Image Content which is generated by css {background} tag. You can input image resource from Resource panel or Image URL link and resize or rearrange image in widget area.

Fit Widget Size to Image Size : Resize widget according to image resource size.

Static Image¶

Image widget contains Image Content which is generated by css {background} tag. You can input image resource from Resource panel or Image URL link and resize or rearrange image in widget area.

Fit Widget Size to Image Size : Resize widget according to image resource size.

See style, detail properties.

Cell¶

Cell widget contains Text Content , aligned Vertical-Center automatically. (PX unit only)

Image and Text¶

Image and Text widget contains Text Content and Image, aligned Vertical-Center automatically.

See style, detail properties.

Complex Widgets¶

Transition¶

Transition widget has two transition items. When mouse action triggered, transition item will change from item 1 to item 2. You can set Mouse Action (Mouse Over or Click) , Transition Effect, and Duration in property panel.

See event properties.

Carousel¶

Carousel widget has multiple carousel items. You can simply make carousel interface with carousel widget. Carousel item is the same as Box widget, so you can add or remove child elements to Carousel item.

See style, event, detail properties.

Google Map¶

Google Map widget represents google map element. You can input Map location wherever you want.

In Editor Mode, Google Map widget offers maximum preview 600 px x 600 px size.
South Korea’s map is not available Color Theme feature.

See detail properties.

Web Movie¶

Web Movie widget supports Youtube or Vimeo. (Autoplay is available only when video is muted. The mute can be set in the detail panel.) You can use Web Movie widget with Short-Links :

Vimeo : http://vimeo.com/ videoURL
Youtube : http://youtu.be/ videoURL

See style, detail properties.

Video Clip¶

Video Clip widget supports MP4. You can input videos from Resource panel. (Autoplay is available only when video is muted. The mute can be set in the detail panel.)

See style, detail properties.

Table¶

Table widget can add simple table on canvas.

See style, detail properties.

Simple Tab View¶

Simple Tab View widget has more simple structure than Tab View widget.

See style, event properties.

Tab View¶

Tab View widget has multiple Tabs .

See style, event properties.

Collapsible¶

Collapsible widget has two item (Header and Content). When you triggered mouse action on Collapsible widget, Content item will be appeared. You can set Mouse Action (Mouse Over or Click) , Transition Effect, and Duration in property panel.

See style, event properties.

Import¶

Import widget can import Composition. If you want to use Composition, connect target Composition into Import widget.

Facebook like button¶

With Facebook Like Button widget, you can add Share to Facebook Button in your project. (No Resize)

See detail properties.

Progress Bar¶

Progress Bar widget displays a progress bar. If you want draw certain status with bar elements, add this widget in your project.

See properties.

SVG¶

SVG widget displays Scalable Vector Graphics. You can select simple SVG form, or input custom svg code whatever you want.

See properties.

Panel¶

You can add a panel by press [+] button of Structure panel. To call panel, create link with any widget and select link target to panel.

See style, event properties.

Programming Widgets¶

Form¶

Form widget is a container for programming widgets which is generated to <form> tag. If you want to use programming widgets, you must to add Form widget in your project.

See detail properties.

Input Text¶

Input Text widget is a textfield which is generated to <input> tag (type : text).

See style, detail properties.

Input Paragraph Text¶

Input Paragraph Text widget is a textfield which is generated to <textarea> tag.

See style, detail properties.

Select¶

Select widget is a select button which is generated to <select> tag. If you want to make select button, add this widget into Form widget.

See properties.

HTML¶

HTML widget is a code container which is generated to custom html tag (e.g. <style>, <script>, etc, …). You can make custom widget by input custom html code into HTML widget.

Collection¶

Collection widget can import multiple Composition widgets. If you want to make collection view with compositions, you can create collection view with Collection widget.

See detail properties.

Checkbox¶

Checkbox widget displays checkbox which is generated to <input> tag (type:checkbox).

See detail properties.

Radio Button¶

Radio Button widget displays radio button which is generated to <input> tag (type:radio).

Label¶

Label widget generates <label> tag. It makes easier to click <input> tag. You can connect <input> widgets such as radio, checkbox and etc. by adding a html id as a for attribute.

See style, detail properties.

Button¶

Button widget displays button which is generated to <input> tag (type:default / reset / submit).

See style, detail properties.

File Upload¶

File Upload widget displays file upload interface which is generated <input> tag (type:file).

Switch¶

Switch widget displays toggle button which is generated to <input> tag (type:checkbox), and contains two switch items.

See detail properties.

Flip Switch¶

Flip Switch widget displays sliding switch which is generated to <input> tag (type:checkbox).

See detail properties.

Slider¶

Slide widget displays slider interface. You can change value by dragging slide pointer. (Or type a number to value)

See style, detail properties.

Range Slider¶

Range Slide widget displays range slider interface. You can change range value by dragging slide pointers. (Or type a number to value)

See style, detail properties.

Javascript for Widget¶

IUEditor Javascript Version >= 2.1

Initialize¶

Initialize all descendents of element as IU WIDGET.

IUDOMReady($element)

Example
IUDOMReady($('body'))

Multiple versions of jQuery¶

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

Widgets¶

Transition¶

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

Carousel¶

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

Collapsible¶

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 content’s show/hide state
Method Detail

Method Param Type Description

.toggle(state) state bool Show if state is true, hide otherwise

Flip Switch¶

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) state bool Show if state is true, hide otherwise

duration number Duration with animation 300ms

Google Map¶

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

window.IUEditor.initGoogleMapInElement(element)

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

Panel¶

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

Popup¶

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 panel

.close() Close panel

.toggle() Change show/hide state

Slider¶

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)
Slider.setValue(80);

//redraw slider
Slider.render();

Range Slider¶

jQuery Plugin
$.fn.rangeslider()

jQuery data key

IU_WIDGET.RANGE_SLIDER

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

Tab View¶

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 a index’th tab item
Method Detail

Method Param Type Description

.select(index) index number tab index in range (0, tabcount-1)

Switch¶

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

Webmovie¶

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

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

// lazy initialization example

// 1. init Vimeo in myDiv element
var $myDiv = $('#myDiv');
window.IUEditor.initVimeoInElement($myDiv);
// or
window.IUEditor.initVimeoInElement($myDiv[0]);

// 2. init Youtube in myDiv element
var $myDiv = $('#myDiv');
window.IUEditor.initYoutubeInElement($myDiv);
// or
window.IUEditor.initYoutubeInElement($myDiv[0]);

Movie¶

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

Widgets without further methods¶

File : iu.widget.js

File Upload¶

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

jQuery Plugin

$.fn.activateFileUpload

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

Enable Hover Effect¶

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

jQuery Plugin

$.fn.activateHover

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

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()

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()

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

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

Welcome to Windows IUEditor’s documentation!¶

What is IUEditor?¶

Advantages¶

Values¶

Environment¶

License¶

Basic¶

Widget usage¶

Carousel¶

Transition¶

Screen¶

Menu¶

Menu¶

File¶

Edit¶

View¶

Canvas¶

Help¶

Shortcut¶

Toolbar¶

Default Buttons¶

For Widgets¶

Text¶

Button Style¶

Canvas¶

Canvas Thumb¶

Image Pop-Up¶

Text Floating Toolbar¶

Left Panel¶

Project¶

Buttons¶

Structure¶

Buttons¶

Creation¶

Right Panel¶

Style¶

Property¶

Layout¶

Text¶

Image¶

Fill¶

Gradient¶

Border¶

Shadow¶

Widget’s Property¶

Static Image¶

Image and Text¶

Carousel¶

Video clip¶

Vimeo or youtube¶

Progress Bar¶

Tab View¶

Simple Tab View¶

Collapsible¶

SVG¶

Table¶

Slider¶

Range Slider¶

Button¶

Input Text¶

Input Paragraph text¶

Label¶

Select¶

Import¶

Panel¶

Popup¶

Header/Footer¶

Link¶

Type¶

Page Type¶

URL Type¶

Panel Type¶

Popup Type¶

Event¶

Widget’s Property¶

Carousel¶

Collapsible¶

Tab view & Simple tab view¶

Transition¶

Panel¶