User Guide
Welcome to IxEdit
The first on-the-fly interaction design tool for the web
IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase.
IxEdit itself is made with JavaScript, and it is an entirely new type of design tool which is to be embedded in the HTML you are editing. Firefox, Safari, Chrome, or IE becomes your interaction development environment. The interactions you create will be applied on-the-fly to the web page, so you can edit them while checking how they behave in real time.
IxEdit generates JavaScript code automatically from the parameters you specified. The generated JavaSCript code is designed to run with jQuery and jQuery UI, the internationally used famous JavaScript libraries, and it presents powerful interactions. You don’t need to care about cross-browser compatibility since jQuery does it for you.
Interactions you are editing are saved to the database in your local environment (Client-side Database Storage). Therefore, the data would not be lost even after you close or reload the browser. In addition, you can be editing interactions off-line. If you choose Firefox or IE as your development environment, you need to install Gears to your browser first to use local database.
Start using IxEdit
Requirements
IxEdit requires the following environment.
- Safari 3.1+, Chrome, Firefox 3+, or Internet Explorer 7+ as your development environment.
- Gears installed (for Firefox or IE) to use local database via IxEdit. If you choose Safari or Chrome, you don’t need to install Gears.
- HTML file which is encoded by UTF-8 and written in standard mode (not quirks mode) as the web page you create interations for.
If you choose Firefox or Internet Explorer to use IxEdit, You need to install Google Gears first to your browser.
To make IxEdit function normally, the HTML you work on must be encoded by UTF-8 and written in standard mode.
Compatibility of the code generated by IxEdit
The JavaScript code generated by IxEdit is compatible with those browsers.
- Internet Explorer 6+
- Firefox 2+
- Safari 3+
- Opera 9+
- Chrome
Setting Gears up
If you use IxEdit with Safari or Chrome, you don’t need to install Gears.
If you use IxEdit with FireFox or Internet Explorer, Gears must have been installed to your browser.
You can download Gears from the Gears site (http://gears.google.com/) and install easily. See the instruction on the Gears site for more information.
After you install Gears and open HTML which is loading IxEdit, an dialog box will appear to ask if you really want to use Gears. This is a confirmation if you allow the web page to access local database. After you give a permission, IxEdit will be available.
Placing and loading the required files
To make IxEdit run, required JavaScript and CSS files must be loaded to the HTML you work on. The following files are required. They are all included in the downloaded file, and you can download the latest files from http://ixedit.com/download/
- jquery-plus-jquery-ui.js
JavaScript file including jQuery and jQuery UI libraries. Instead of this, you can use individual jQuery files by downloading them from jQuery sites (http://jquery.com/ and http://jqueryui.com/) by yourself. However, the newest versions may not be compatible with IxEdit. - ixedit.js
JavaScript file including IxEdit itself. - ixedit.css
CSS file for IxEdit itself. - ui-sui.css
CSS file for some user interface elements which IxEdit generates. This file is not needed to run IxEdit actually. So you don’t have to use this if you have made your own CSS for those elements.
Place those JavaScript and CSS files with the images folder which includes image files used with the CSS into appropriate directories. The images folder is in the downloaded files. Then load them into the HTML. It is recommended that the lines to load those files are written in the head element of your HTML.
ixedit.js must be loaded after loading jquery and jquery-ui.
The next image shows an example how to load the required files in the head element of the HTML.
Operation in the IxEdit Dialog
IxEdit Dialog
After IxEdit has booted correctly, the IxEdit Dialog will be opened within the web page. With this dialog, you will be adding and editing interactions. The interactions you create will be applied on-the-fly to the web page, so you can edit them while checking how they behave in real time.
The title bar can be dragged to move IxEdit Dialog in the browser window.
By double-clicking title bar, you can shade the dialog. The dialog will be opened again by double-clicking title bar again.
The bottom-right corner of the dialog can be dragged for resizing.
IxEdit Dialog has the List View and the Edit View. You will be editing interactions by switching those views.
Basic operation flow
The basic flow to create interactions with IxEdit is like follows.
- Click “New” button in the list view to open the edit view to make a new interaction.
- In the action edit area, specify an event and target element(s) as the trigger of interaction.
- In the reaction edit area, specify a command and its parameters. You can make multiple reactions for one action.
- If the reaction(s) should be executed under certain condition, specify it in the condition edit area.
- Write comment in the comment edit area as you want.
- Click “Done” button to save the interaction you created. IxEdit Dialog switches back to the list view.
- Repeat the process as many times as needed.
- When you are done, choose “Deploy” from the routing menu to get the final JavaScript code.
- Embed the generated code in the HTML.
Using the List View
The list view shows the list of interactions you created. Also, you can add, duplicate, delete, export, import, and deploy interaction(s) from the list view.
Adding a new interaction
Click “New” button to add a new interaction. Then the IxEdit Dialog turns into the edit view, and the input controls will be appeared.
Editing an interaction
To edit an interaction you have made again, choose one in the list and click “Edit” button or double-click it. Then the IxEdit Dialog turns into the edit view.
Duplicating and deleting interaction(s)
Click “Duplicate” button to duplicate the selected interaction. Multiple interactions can be duplicated at the same time.
Click “Delete” button to delete the selected interaction. Multiple interactions can be deleted at the same time.
Sorting the list
The list can be sorted by clicking the column header.
Turn on or off interaction(s)
By clicking the checkbox in each row, you can activate and inactivate the interaction. If you want some interactions not to be executed temporarily, inactivate them. You don’t need to delete them and remake them in the future.
While an interaction is off, you cannot edit it. You can duplicate or delete it. To edit it again, turn it on.
Using the Edit View
In the edit view, you can edit one interaction. An interaction is composed of “Action”, “Reaction”, and “Condition.” You can add a comment to an interaction also. Each area of Action, Reaction, Condition, and Comment can be closed/disclosed by clicking the area title.
Specifying Action
Action is the trigger of an interaction. Only one action can be set for one interaction.
Event
Choose an event from the dropdown menu as the type of the action. Each event occurs in the case of follows.
- Load
When the HTML is loaded to the browser an the DOM is ready. - Unload
Right before the browser starts reloading or jumping to another URL. - Change
When a control loses the input focus and its value has been modified since gaining focus. - Click
When the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. - Double Click
When the pointing device button is double clicked over an element. - Drop
When a draggable element is dropped on a droppable element. (See Droppable) - Focus
When an element receives focus either via the pointing device or by tab navigation. - Focus Out
When an element loses focus either via the pointing device or by tabbing navigation. - Key Up
When a key on the keyboard is released. - Mouse Down
When the pointing device button is pressed over an element. - Mouse Move
When the pointing device is moved while it is over an element. - Mouse Over
When the pointing device is moved onto an element. - Mouse Up
When the pointing device button is released over an element. - Resize
When a document view is resized. - Scroll
When a document view is scrolled. - Select
When a user selects some text in a text field, including input and textarea. - Submit
When a form is submitted.
Selector
Select elements(s) which is/are the target(s) of the event sent to. See Selector Formats for more information.
By clicking the “Quick Select” button which is on the right of selector field, you can specify the selector with mouse-clicking.
Other inputs
- Prevent default behavior: Prevents the browser from executing the default action.
- Stop bubbling: Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
Specifying Reaction(s)
Reaction is the feedback behavior of the screen which is bound to the action. You can make multiple reactions for one action.
Command
To make a reaction, choose a command from the dropdown menu first. More than 30 commands are built in IxEdit. Choose a command which suits your aim, then specify its parameters. Each command has own set of parameters.
By clicking the command help button which is placed on the right of the command menu, you can see short instruction about each command.
For more information, see Reaction Commands.
Selector
Many commands have a selector field. The element(s) specified in the selector field will be the target(s) of the reaction. See Selector Formats for more information.
By clicking the “Quick Select” button which is on the right of selector field, you can specify the selector with mouse-clicking.
Delay
Many commands have a delay option. Delay is the time-lag between the event and the command execution. When you choose "None," the reaction will be run right after the action occurs.
Adding and Removing Reaction
You can make multiple reactions in one interaction. To add a reaction, click "+" button in the right side of reaction edit area. To remove a reaction, click "-" button, but the last reaction cannot be removed.
Specifying Condition(s)
Condition is the specific situation which is required to execute the reaction. The reaction(s) will be run when the all conditions are satisfied.
Command
To make a condition, choose a command which suits your aim from the dropdown menu first. Then specify its parameters.
See Condition Commands for more information.
Selector
Many commands have a selector field. The element(s) specified in the selector field will be the target(s) of the condition. See Selector Formats for more information.
By clicking the “Quick Select” button which is on the right of selector field, you can specify the selector with mouse-clicking.
Adding and Removing Condition(s)
You can make multiple conditions in one interaction. To add a condition, click "+" button in the right side of condition edit area. To remove a condition, click "-" button.
Commenting
In the bottom of the edit view, there is a comment field. You can write a comment as you want such as some description about the interaction you are making or some keywords to be sorted in the list view. The comment will not affect to the behavior of the interaction.
"Done" and "Done and Reload"
When you finished editing an interaction, click "Done" button. Then the interaction will be saved to the local database, and the IxEdit Dialog turns back into the list view.
Clicking "Done and Reload" button makes IxEdit save the interaction and reload the browser. Use this button when you want to check the interactions from the initial state.
Reverting
When you are editing an interaction which has been once saved, you can discard changes and make it back to the last state, click "Revert" button.
Selector Formats
Many action commands, reaction commands, and condition commands have selector field as a part of their parameters. Selector fields are used to be specifying the target element(s). Selector fields must be filled in by values in specific formats.
The formats of selector value are just like CSS selector formats as follows.
Basics
- #idName
Matches a single element with the given id attribute. (e.g. #myElement) - elementName
Matches all elements with the given name. (e.g. div) - .className
Matches all elements with the given class. (e.g. .myClass) - .className1.className2
Matches all elements with the given classes. (e.g. . myClass.myNavigation) - *
Matches all elements. - selector1, selector2, selectorN
Matches the combined results of all the specified selectors. (e.g. div, p, .myClass) - selector1 selector2
Matches all descendant elements specified by "selector2" of elements specified by "selector1". (e.g. .myClass div) - selector1 > selector2
Matches all child elements specified by "selector2" of elements specified by "selector1". (e.g. .myClass > div) - selector1 + selector2
Matches all next elements specified by "selector2" that are next to elements specified by "selector1". (e.g. .myClass + div) - selector1 ~ selector2
Matches all sibling elements after the "selector1" element that match the filtering "selector2" selector. (e.g. #myElement ~ .myClass)
Filters
- :first
Matches the first selected element. (e.g. div:first) - :last
Matches the last selected element. (e.g. div:last) - :not(selector)
Filters out all elements matching the given selector. (e.g. div:not(#myElement)) - :even
Matches even elements, zero-indexed. See also odd. (e.g. div:even) - :odd
Matches odd elements, zero-indexed. See also even. (e.g. div:odd) - :eq(index)
Matches a single element by its index. (e.g. div:eq(2)) - :gt(index)
Matches all elements with an index above the given one. (e.g. div:gt(2)) - :lt(index)
Matches all elements with an index below the given one. (e.g. div:lt(2)) - :header
Matches all elements that are headers, like h1, h2, h3 and so on. (e.g. .myClass:header) - :animated
Matches all elements that are currently being animated. (e.g. div:animated) - :contains(“text”)
Matches elements which contain the given text. (e.g. div:contains(“Hello”)) - :empty
Matches all elements that have no children (including text nodes). (e.g. div:empty) - :has(selector)
Matches elements which contain at least one element that matches the specified selector. - :parent
Matches all elements that are parents - they have child elements, including text. - :hidden
Matches all elements that are hidden. (e.g. div:hidden) - :visible
Matches all elements that are visible. (e.g. div:visible) - :nth-child(index/even/odd/equation)
Matches all elements that are the nth-child of their parent or that are the parent's even or odd children. (e.g. li:nth-child(2)) - :first-child
Matches all elements that are the first child of their parent. (e.g. li:first-child) - :last-child
Matches all elements that are the last child of their parent. (e.g. li:last-child) - :only-child
Matches all elements that are the only child of their parent. (e.g. button:only-child) - :input
Matches all input, textarea, select and button elements. (e.g. .myClass:input) - :text
Matches all input elements of type text. (e.g. .myClass:text) - :password
Matches all input elements of type password. (e.g. .myClass:password) - :radio
Matches all input elements of type radio. (e.g. .myClass:radio) - :checkbox
Matches all input elements of type checkbox. (e.g. .myClass:checkbox) - :submit
Matches all input elements of type submit. (e.g. .myClass:submit) - :image
Matches all input elements of type image. (e.g. .myClass:image) - :reset
Matches all input elements of type reset. (e.g. .myClass:reset) - :button
Matches all button elements and input elements of type button. (e.g. .myClass:button) - :file
Matches all input elements of type file. (e.g. .myClass:file) - :enabled
Matches all elements that are enabled. (e.g. input:enabled) - :disabled
Matches all elements that are disabled. (e.g. input:disabled) - :checked
Matches all elements that are checked. (e.g. input:checked) - :selected
Matches all elements that are selected. (e.g. option:selected)
Attribute Filters
- [attribute]
Matches elements that have the specified attribute. (e.g. input[id]) - [attribute=”value”]
Matches elements that have the specified attribute with a certain value. (e.g. input[name=”myOption1”]) - [attribute!=”value”]
Matches elements that either don't have the specified attribute or do have the specified attribute but not with a certain value. (e.g. input[name!=”myOption1”]) - [attribute^=”value”]
Matches elements that have the specified attribute and it starts with a certain value. (e.g. input[name^=”my”]) - [attribute$=”value”]
Matches elements that have the specified attribute and it ends with a certain value. (e.g. input[name$=”1”]) - [attribute*=”value”]
Matches elements that have the specified attribute and it contains a certain value. (e.g. input[name$=”Option”]) - [attributeFilter1][attributeFilter2][attributeFilterN]
Matches elements that match all of the specified attribute filters. (e.g. input[id][name$=”1”])
Special Terms
- this
Matches one element which user actually acted on. - drop
Matches an element which was dragged and dropped to a droppable element. This is available when you choose "Drop" as the action event.
Note for Advanced Users
In the normal syntax of jQuery, you can use string variables as or within the selectors, but IxEdit don't accept variables for selector values.
Reaction Commands
More than 30 reaction commands are built in IxEdit. This section describes the purposes and parameters of each reaction command.
DOM
Add Class
Add the specified class name to the selected element(s).
- Selector: Specify the target element(s). See Selector Formats.
- Class Name: Specify the class name added to the target element(s). You can specify multiple class names by separating them with a space.
- Delay: Specify the time-lag between action event and reaction execution.
Remove Class
Remove the specified class name from the selected element.
- Selector: Specify the target element(s). See Selector Formats.
- Class Name: Specify the class name removed from the target element(s). You can specify multiple class names by separating them with a space.
- Delay: Specify the time-lag between action event and reaction execution.
Add/Remove Class
Add the specified class name to the selected element if it is not present, or will remove the specified class name from the target element if it is present.
- Selector: Specify the target element(s). See Selector Formats.
- Class Name: Specify the class name added to or removed from the target element(s). You can specify multiple class names by separating them with a space.
- Delay: Specify the time-lag between action event and reaction execution.
Change Style
Add or change style on the selected element. Specify CSS property and it's value. The way to specify the values is just like how you do for CSS.
- Selector: Specify the target element(s). See Selector Formats.
- Property: Choose a property name from the dropdown menu and specify its value in the right textbox.
- Delay: Specify the time-lag between action event and reaction execution.
Change Value
Change value of value attribute on the selected element. Available elements are button, input, li, and option.
- Selector: Specify the target element(s). See Selector Formats.
- Value: Specify the value.
- Delay: Specify the time-lag between action event and reaction execution.
Change Status
Change status of selected element.
- Selector: Specify the target element(s). See Selector Formats.
- Status: Specify the status.
- Checked and Unchecked for input[type="checkbox"] and input[type="radio"].
- Selected and Unselected for option.
- Disabled and Enabled for button, input, optgroup, option, select, and textarea.
- Delay: Specify the time-lag between action event and reaction execution.
Remove Attribute
Remove specified attribute from the selected element.
- Selector: Specify the target element(s). See Selector Formats.
- Attribute: Specify the attribute to remove.
- Delay: Specify the time-lag between action event and reaction execution.
Insert HTML
Insert specified HTML string by several ways such as overwriting inside of the selected element, inserting to the inside-bottom of the selected element, inserting to the inside-top of the selected element, inserting after the selected element, or inserting before selected element.
- Selector: Specify the target element(s). See Selector Formats.
- HTML: Specify HTML source to be inserted.
- Insert Point: Specify how to insert the HTML source.
- Delay: Specify the time-lag between action event and reaction execution.
Insert Remote HTML
Insert HTML from a remote file to the selected element. This will overwrite the existing content of the selected element. Remote file you request and this page should be in the same domain. HTML from a different domain cannot be loaded unless this page is on your local computer.
- Selector: Specify the target element(s). See Selector Formats.
- URL: Specify the URL of the HTML which is to be inserted.
- Delay: Specify the time-lag between action event and reaction execution.
Empty Element
Remove all child nodes from the selected element.
- Selector: Specify the target element(s). See Selector Formats.
- Delay: Specify the time-lag between action event and reaction execution.
Remove Element
Remove the selected element from the DOM.
- Selector: Specify the target element(s). See Selector Formats.
- Delay: Specify the time-lag between action event and reaction execution.
Effects
Show
Display the selected element if it is hidden. If you apply duration on an inline-element, it will be changed as a block-element.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete showing. When you choose "Normal," the element(s) will show immediately. When you choose something else, the element(s) will show progressively.
- Effect: Specify the visual effect. This doesn't affect when the duration is normal.
- Delay: Specify the time-lag between action event and reaction execution.
Hide
Hide the selected element if it is shown. If you apply duration on an inline-element, it will be changed as a block-element.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete hiding. When you choose "Normal," the element(s) will hide immediately. When you choose something else, the element(s) will hide progressively.
- Effect: Specify the visual effect. This doesn't affect when the duration is normal.
- Delay: Specify the time-lag between action event and reaction execution.
Show/Hide
Show the selected element if it is hidden and will hide the selected element if it is shown. If you apply duration on an inline-element, it will be changed as a block-element.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete showing/hiding. When you choose "Normal," the element(s) will show/hide immediately. When you choose something else, the element(s) will show/hide progressively.
- Effect: Specify the visual effect. This doesn't affect when the duration is normal.
- Delay: Specify the time-lag between action event and reaction execution.
Slide Down
Reveal the selected element with sliding-down effect.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete showing. When you choose "Normal," the element(s) will show immediately without sliding effect.
- Delay: Specify the time-lag between action event and reaction execution.
Slide Up
Hide the selected element with sliding-up effect.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete hiding. When you choose "Normal," the element(s) will hide immediately without sliding effect.
- Delay: Specify the time-lag between action event and reaction execution.
Slide Down/Up
Reveal the selected element with sliding-down effect if it is hidden and will hide the selected element with sliding-up effect if it is shown.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete showing/hiding. When you choose "Normal," the element(s) will show/hide immediately without sliding effect.
- Delay: Specify the time-lag between action event and reaction execution.
Fade In
Show the selected element with fading-in effect.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete showing. When you choose "Normal," the element(s) will show immediately without fading effect.
- Delay: Specify the time-lag between action event and reaction execution.
Fade Out
Hide the selected element with fading-out effect.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete hiding. When you choose "Normal," the element(s) will hide immediately without fading effect.
- Delay: Specify the time-lag between action event and reaction execution.
Fade To
Fade the opacity of the selected element to a specified opacity.
- Selector: Specify the target element(s). See Selector Formats.
- Opacity: Specify the opacity as the result of fading. 0% means transparent. 100% means opaque.
- Duration: Specify the length of continuation to complete fading. When you choose "Normal," the element(s) will be faded immediately without progress.
- Delay: Specify the time-lag between action event and reaction execution.
Animate
Animate the selected element. Specify the style properties that will be animated and to what end. Not only sizes (e.g. "width", "margin", or "line-height") but also colors, opacities, and scroll positions can be animated. You can animate multiple properties of one element at the same time.
- Selector: Specify the target element(s). See Selector Formats.
- Duration: Specify the length of continuation to complete animation. When you choose "Normal," the styles of the target element(s) will be changed into new ones immediately without progress.
- Property: Specify the CSS properties which are to be animated. The textbox on the right is for specifying the value as the result of animation. The dropdown menu which has "To, +, -" options is for specifying if the value is absolute(To) or relative(+, -), but you can choose only "To" when the property is about colors. By clicking "+" or "-" button, you can add or remove a property to be animated. When you have specified multiple properties, they will be animated at the same time.
- Delay: Specify the time-lag between action event and reaction execution.
Generate
Draggable
Make the selected element draggable with the mouse.
- Selector: Specify the target element(s). See Selector Formats.
- Axis: Specify the direction you can drag for.
- None: Free direction.
- X: You can drag only horizontally.
- Y: You can drag only vertically.
- Move Cursor: If checked, the style of the pointer will be the move cursor while mouseovering.
- Opacify while dragging: If checked, element being dragged will be opacified.
- Revert unless dropped on a droppable: If checked, element will return to its start position when dragging stops if the draggable has not been dropped on a droppable.
- Bound to parent element: If checked, it constrains dragging to within the bounds of the parent element.
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- ui-draggable: Added to the draggabled element.
- ui-draggable-dragging: Added during being dragged to the draggabled element.
Droppable
Make the selected element droppable.
- Selector: Specify the target element(s). See Selector Formats.
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- ui-droppable: Added to the droppabled element.
- drophover: Added to the draggabled element while it is hovering above the droppabled element.
By choosing "Drop" from the action event menu to specify the reaction which is executed when an element is dropped to the droppabled element.
If you want to specify the dropped element as a selector, specify the target element to be dropped (it should have been droppabled), choose "drop" as the event, and type "drop" in the selector field in reaction edit area.
Resizable
Make selected element resizable (meaning it has draggable resize handles).
- Selector: Specify the target element(s). See Selector Formats.
- Keep aspect ratio: If checked, resizing is constrained by the original aspect ratio.
- Handle: Specify which edge or corner you can drag as handle.
- Bound to parent element: If checked, it constrains resizing to within the bounds of the parent element.
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- ui-resizable: Added to the resizabled element.
- ui-resizable-handle: Added to the resize handles which are generated dynamically around the selected element to be as the grabbers.
- ui-resizable-n: Added to the North grabber.
- ui-resizable-s: Added to the South grabber.
- ui-resizable-e: Added to the East grabber.
- ui-resizable-w: Added to the West grabber.
- ui-resizable-se: Added to the South-East grabber.
- ui-resizable-sw: Added to the South-West grabber.
- ui-resizable-nw: Added to the North-West grabber.
- ui-resizable-ne: Added to the North-East grabber.
Reorderable
Make the child block elements of the selected element reorderable by dragging with the mouse.
- Selector: Specify the target element(s). See Selector Formats.
- Axis: Specify the direction you can drag for.
- None: Free direction.
- X: You can drag only horizontally.
- Y: You can drag only vertically.
- Move Cursor: If checked, the style of the pointer will be the move cursor while mouseovering.
- Opacify while dragging: If checked, element being dragged will be opacified.
- Animated Insertion: If checked, the target element will be inserted with animation into the insertion point.
To use this command, the target element and its descendant elements should have been marked up in the following format. (#reorderable1 is to be the target)
<block id="reorderable1"> <block>Content1</block> <block>Content2</block> <block>Content3</block> </block>
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- ui-sortable: Added to the reorderabled element (parent element of the draggabled items).
Selectable
Make the child block elements of the selected element selectable by clicking, ctrl+clicking, and dragging with the mouse.
- Selector: Specify the target element(s). See Selector Formats.
To use this command, the target element and its descendant elements should have been marked up in the following format. (#selectable1 is to be the target)
<block id="selectable1"> <block>Content1</block> <block>Content2</block> <block>Content3</block> </block>
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- "ui-selectable": Added to the selectabled element (parent element of the items you can select individually).
- "ui-selecting": Added to each item during mousedown and drag-selecting.
- "ui-selected": Added to each selected item.
Make Date Picker
Generate a date picker calendar for the selected textbox.
- Selector: Specify the target element(s). See Selector Formats.
- Format: Specify the format of the value the textbox will be filled in with after you choose a day in the date picker.
- Has Picker Btton: If checked, a picker button will appear right next to the textbox. If unchecked, the date picker will open by focusing the textbox.
To use this command, the target element and its descendant elements should have been marked up in the following format. (#datepicker1 is to be the target)
<input type="text" id="datepicker1" />
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- "ui-datepicker": Added to the generated calendar block.
- "ui-datepicker-header": Added to the header of the calendar.
- "ui-datepicker-prev" and "ui-datepicker-next": Added to the navigation links within the header.
- "ui-datepicker-prev-hover" and "ui-datepicker-next-hover": Added to the navigation links durting mouse-hovered.
- "ui-datepicker-title": Added to the title widthin the header.
- "ui-datepicker-calendar": Added to the calendar table.
- "ui-state-active": Added to the selected day link.
- "ui-state-highlight": Added to the current day link.
- "ui-state-hover": Added to each day link during mouse-hovered.
- "ui-datepicker-buttonpane": Added to the button pane.
- "ui-datepicker-trigger": Added to the picker button.
Make Accordion
Generate an accordion container.
- Selector: Specify the target element(s). See Selector Formats.
- Event Name: Specify the event to switch the panel.
- Fixed Height: If checked, the highest content part is used as height reference for all other parts.
- Allow All Closed: If checked, all the sections can be closed at once. If unchecked, the currently opend panel cannot be closed.
To use this command, the target element and its descendant elements should have been marked up in the following format. (#accordion1 is to be the target)
<block id="accordion1"> <block><a href="#">Header1</a></block> <block>Content1</block> <block><a href="#">Header2</a></block> <block>Content2</block> <block><a href="#">Header3</a></block> <block>Content3</block> </block>
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- "ui-accordion": Added to the wrapper block which contains all headers and contents.
- "ui-accordion-header": Added to the header blocks.
- "ui-accordion-content": Added to the content blocks.
- "ui-state-active": Added to the selected header block.
- "ui-state-hover": Added to each header block during mouse-hovered.
Make Tabs
Generate tabs container.
- Selector: Specify the target element(s). See Selector Formats.
- Event Name: Specify the event to switch the panel.
- Default Tab Number: Specify the 1-based index of the tab to be selected initially. 0 for none (all panels will be closed).
- Allow All Closed: If checked, all the sections can be closed at once. If unchecked, the currently opend panel cannot be closed.
- Effect: Specify the visual effect which is applied when you switch the tabs.
- Fade: Current panel will fade out, then the chosen panel will fade in.
- Slide: Current panel will slide up, then the chosen panel will slide down.
To use this command, the target element and its descendant elements should have been marked up in the following format. (#tabs1 is to be the target)
<block id="tabs1"> <ul> <li><a href="#content1">Tab1</a></li> <li><a href="#content2">Tab2</a></li> <li><a href="#content3">Tab3</a></li> </ul> <block id="content1">Content1</block> <block id="content2">Content2</block> <block id="content3">Content3</block> </block>
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- "ui-tabs": Added to the wrapper block which contains all tabs and content blocks.
- "ui-tabs-nav": Added to the UL element which contains items to become tabs.
- "ui-tabs-selected" and "ui-state-active": Added to the selected tab (LI element).
- "ui-state-hover": Added to each tab (LI element) during mouse-hovered.
- "ui-tabs-panel": Added to each content blocks.
Make Dialog
Generate a modal dialog. A wrapper block, a titlebar, and a button pane will be generated around the original block.
- Selector: Specify the target element(s). See Selector Formats.
- Width: Specify the width of dialog.
- Height: Specify the height of dialog.
- Left: Specify the left position of dialog. (Blank for center, - for right aligned.)
- Top: Specify the top position of dialog. (Blank for center, - for bottom aligned.)
- Draggable: If checked, the dialog will be draggable.
- Buttons: If checked, you can add buttons to the dialog. Clicking a button makes dialog close. You can add multiple buttons.
- Label: Specify the label of the button.
- ID: Specify the ID of the button. This may be used when you specify some extra actions bound to the button.
To use this command, the target element and its descendant elements should have been marked up in the following format. (#dialog1 is to be the target)
<div id="dialog1" title="My Dialog1">Content</div>
When this command is executed, the following class names will be added dynamically to the target element(s). You can modify the styles via those class names.
- "ui-dialog": Added to the wrapper block which is generated dynamically to wrap the selected block, the titlebar and the button bar.
- "ui-dialog-titlebar": Added to the dynamically-generated titlebar.
- "ui-dialog-title-dialog": Added to the dynamically-generated title on the titlebar. The title string is from the title attribute of the selected element.
- "ui-dialog-titlebar-close": Added to the dynamically-generated close link on the titlebar.
- "ui-dialog-content": Added to the selected element.
- "ui-dialog-buttonpane": Added to the dynamically-generated button pane.
- "ui-widget-overlay": Added to the dynamically-generated background overlay.
Misc
Alert
Show a regular alertbox generated by JavaScript's "window.alert()" function with the specified message string.
- Message: Specify the message string. You can use "\n" for return and "\t" for tab spacing, but single quotation will be ignored.
- Delay: Specify the time-lag between action event and reaction execution.
Jump
Make the browser access the specified URL.
- URL: Specify the URL the browser will jump to.
- Delay: Specify the time-lag between action event and reaction execution.
Send Event
Send the specified event to the selected element. For example, if you send a "Click" event to the element "#button1", the same thing will happen as you click "#button1".
- Selector: Specify the element the event will be sent to. See Selector Formats for more information.
- Event Name: Specify the event to be sent.
- Delay: Specify the time-lag between action event and reaction execution.
Condition Commands
IxEdit has several condition commands. This section describes the purposes and parameters of each condition commands.
Has Class
Checks if the target has the specific class or not.
- Selector: Specify the target element(s). See Selector Formats.
- Class Name: Specify the class name to be checked if the target element has.
Value
Checks if the target has the specific value or not.
- Selector: Specify the target element(s). See Selector Formats.
- Value: Specify the value to be checked if the target element has.
Status
Checks if the target is on the specific status or not.
- Selector: Specify the target element(s). See Selector Formats.
- Status: Specify the kind of status to be checked if the target is on.
- Visible: Displayed
- Hidden: Not displayed
- Checked: (The checkbox is) Checked
- Selected: (The option is) Selected
- Disabled: Inactivated
Importing and Exporting
With IxEdit, you can create interactions on a HTML (page) basis. If you reuse the interactions you made for one page in another, or if you want to share the interactions you made with other IxEdit users, Importing and Exporting will help you.
Export
To export interaction source;
- Choose “Export” from the routing menu.
- Copy the source displayed in the Export Dialog.
Import
To import interaction source;
- Choose “Import” from the routing menu to open the Import Dialog.
- By Copy-Pasting: Paste the source you have copied from the Export dialog to the textbox.
- By Choosing from existing data: Choose one from the list of existing data which you have made on the same browser.
- Click “Import” button, then the interactions will be imported and added to the existing ones.
Deploying
The interactions you made with IxEdit are being applied to the page without changing HTML source while IxEdit is running. This can be done since IxEdit converts the data stored in the local database to JavaScript and bind them to the page responsively in the background.
However, after you finish editing interactions, you may want to show the page to your client or want to publish it to the web without letting it be “editable.”
For those cases, you can use “Deploy” to generate JavaScript code which doesn’t depend on IxEdit and embed it in the HTML to make a final deliverable.
The JavaScript code generated by “Deploy” no longer needs IxEdit, but please not that it still needs jQuery and jQuery UI libraries to be run.
To deploy;
- Choose “Deploy” from the routing menu.
- Copy the JavaScript code displayed in the Deploy Dialog.
- Open the HTML file with a text editor, then paste the code at the bottom of the head element (before the tag). Note: the code to load jQuery, jQuery UI JavaScript files must be placed above the deployed code.
- Delete the lines which are to load ixedit.js and ixedit.css. The deployed code no longer need them to be run.
- Save the HTML, and reload the browser.
The next image shows an example where to paste the deployed code in your HTML.
If you want to edit interactions again with IxEdit for the page once deployed, delete the deployed code and place the lines to load ixedit.js and ixedit.css again.
Backing Up
IxEdit saves the interaction source to the local database. The local database is a storage which is prepared by the browser. It is not designed to be accessed by you via desktop in general. It means that you should backup the source manually just to be safe.
To backup, copy the source from the Export Dialog, and save it as a text file in an appropriate place. Exported source can be imported to IxEdit again easily.
Configuration Scripts
IxEdit has some configuration scripts. If you are familiar with JavaScript, you can write them directly in the HTML to configure the behavior of IxEdit. Configuration scripts must be written below the line to load ixedit.js.
The next image shows an example how to place the configuration scripts in your HTML.
When deploying, configuration scripts must be deleted.
Specify the Screen ID
IxEdit saves interaction source of each page as a record to the local database. IxEdit uses the page URL as the record ID for saving. Therefore, when you change the file name of the HTML or move the HTML to a different directory, the link between page and database will be broken. To solve this problem, you can give a permanent screen ID by yourself using configuration script. A permanent screen ID is also useful when you share the interactions in multiple pages by giving the same screen ID to those pages. To give a permanent screen ID, write like this.
- ixedit.screenID = 'myScreen1';
Pages which have the same screen ID are always linked to one record in the database. You can change the file name or move to another place without breaking the link.
Inactivate All Interactions
While you are editing interactions, sometimes an error occurs and make IxEdit untouchable. For example, If you create an interaction which reloads the page right after the page is loaded, you cannot stop reloading to fix this infinite loop. In such cases, use this script.
- ixedit.inactivatingAll = true;
This inactivates all the interaction, then you can access IxEdit to delete or modify existing interactions. After you fixed, you should delete this script because this makes all the interaction inactive again next time you reload the page.
Switch to Advanced Mode
Turning IxEdit into the advanced mode, you can be accessing some extra features for advanced users by writing this configuration.
- ixedit.advancedMode = true;
About the extra features of advanced mode, see Advanced Mode.
Advanced Mode
In the advanced mode, those features can be used. See Configuration Scripts how to switch IxEdit to the advanced mode.
Show DB Records
By choosing “Show DB Records” from the routing menu, the all records of database which store the interaction source will be shown. You can delete a specific record if you don’t need it anymore.
Discard DB Table
By choosing “Discard DB Table” from the routing menu, you can delete the database table which is storing all interaction sources you have made with IxEdit. After deleting the table, a new table will be created automatically when you reload the page.
Execute jQuery
"Execute jQuery" will be added as a reaction command. With this command, you can write your own jQuery script to do things that IxEdit cannot do with its regular reaction commands.
Execute Function
"Execute Function" will be added as a reaction command. With this command, you can specify a JavaScript function and its arguments to do things that IxEdit cannot do with its regular reaction commands.