Plugin Dialog
Introduced with Tiki8
Use this wiki plugin to create a custom pop-up dialog box using jQuery UI.
Parameters
Create a custom popup dialog boxIntroduced in Tiki 8.
Go to the source code
Preferences required: wikiplugin_dialog, feature_jquery_ui
| Parameters | Accepted Values | Description | Default | Since |
|---|---|---|---|---|
| (body of plugin) | text | |||
width |
digits | In pixels. | 300 | 8.0 |
id |
text | Automatically generated if left empty in the form wpdialog_XX (must be unique
per page) |
8.0 | |
hideAnim |
text | 8.0 | ||
openAction |
rawhtml_unsafe | JavaScript to execute when dialog opens. | 8.0 | |
showAnim |
text | 8.0 | ||
title |
text | 8.0 | ||
autoOpen |
(blank) y n |
Open dialog automatically | y | 8.0 |
actions |
rawhtml_unsafe separator: , |
JavaScript to perform on first button click. | 8.0 | |
buttons |
text separator: , |
Button labels separated by commas. | Ok | 8.0 |
modal |
(blank) y n |
Use modal form | n | 8.0 |
wiki |
pagename | Wiki page to use as dialog body | 8.0 |
Example
This code will cause a pop-up dialog box to appear when this page is loaded:
Plugin
Copy to clipboard
{DIALOG(title="World hello Dialog!" buttons="Foo,Bar" actions="alert(\"foo clicked\"),alert(\"you cancelled\")" showAnim="blind" hideAnim="explode" autoOpen="y" modal="y" wiki="plugin dialog test body" openAction="testDialog(this);")}Hello World{DIALOG}
Example with smarty template
The following code will cause a popup dialog window.
Put this in at the end of your template file:
sample.tpl
Copy to clipboard
{wikiplugin _name="DIALOG" autoOpen="n" id="wpdialog_bobshop_shipping" title="Shipping Costs" modal="y" wiki="bobshop_shipping"}{/wikiplugin}
Don't forget the underscore "_" before the parameter "_name".
Place this code in your template file at the place you want:
sample.tpl
Copy to clipboard
<p onClick='javascript:$( "#wpdialog_bobshop_shipping" ).dialog( "open" );'>Shipping</p>
In this example there must be a wikipage called "bobshop_shipping". Feel free to create it.
More info for params "hideAnim" and "showAdnim"
More option for the show and hide animations can be found here.