Jquery UI Dialog 6.x-1.10

In ShortIf you are not a developer or asked to install this module as a dependency, you most probably won't have any use for it. This module enables you to use jquery ui dialog in Drupal.Features yet implemented * It enables you to use JQuery UI Dialog library. It also automatically creates an iframe inside the dialog you dont need to care about. This enables you loading normal Drupal pages inside (like FAPI stuff) * Exports a simple API to open/close dialogs o While you can use the api jquery_ui_dialog, or you can also use the JQuery UI Dialog API directly your own way, using the full power of JQuery UI Dialog(well jquery_ui_dialog does not limit it, but makes some assumptions). This is one of the main differences to modalframe o You can also use the JQuery UI Dialog buttons to control the window. * Integrates with the the JQuery UI theme. You can use your own theme for the dialog only (using the namespace), please refer to the docs. * Supports autoresizing and positioning. * Supports loading the IFrame content using POST+Data.the WYSIWYG image upload module is implemented using jquery_ui_dialog. You can see it in action in this videocast: video-podcastCompatibility / DependenciesServer Dependencies 1. jquery_update: Its important uto se the 6.x-2.x-dev version ( so jquery_1.3.x ). 2. jquery_ui: The Drupal module must be version 6-x-1.3 (stable) while the jquery_ui download must be jquery_ui 1.7.x not 1.6 * Refer to this short How-To if you dont know what this is all about.Client Browser Dependencies- javascriptInstallation 1. Download and activate the module 2. Clear the cacheWhy has this module been created?Eventhough a lot of ideas and code has been taken from the modalframe project, this project is different. The modalframe maintainer was not going to support the jquery-ui button (even with provided patches). This is a critical feature to usecases like WYSIWYG Dialogs, because you cannot provide a "similar look and feel" and creating a better usability.In addition you cannot use the general jquery ui themes with modalframe properly, as this would interfere with projects like Tabs or other jquery ui projects. Therefore jquery_ui_dialog has its own namespace where the jquery ui theme is loaded. You can replace that theme and change the look and feel of the dialog that way. This will be a critical point for the WYSIWYG dialogs, as most of the Editors are looking different or have different color-schemas, so the should be addapted.Finally jquery_ui_dialog has been cutted down to nearly the limit, being half of the code-size of modalframe.While you might think "this also could have been implemented in modalframe", the maintainer was not interested in implementing those features.Usage / API DocumentationFor opening a Dialog (Parent) you need.. 1. PHP side: Run the jquery_ui_dialog_parent_js(); method. It includes needed javascript and CSS files. Example PHP function wysiwyg_imageupload_form_alter(&$form, $form_state, $form_id){ if ($form['#id'] == 'node-form' ) { jquery_ui_dialog_parent_js(); $form['#submit'][] = 'wysiwyg_imageupload_form_submit'; } if(strstr($form_state['post']['form_id'],'node_form')) { jquery_ui_dialog_parent_js(); } } 2. javascript side: To open the dialog itself, callDrupal.jqui_dialog.open(arguments);. Arguments are: * url, [string] : the URL of the page to open. If not provided, you have to handle the loading yourself * method, [get/post] : What method should be used to load the url, default is get * data, [object] : Some post-DATA you can pass to the load method (if you use method=post). General format used by jQuery $.post * autoresize, [bool] : You can turn off autoresize of the dialog using this, default is true (on) * namespace, [string] : A class name "-dialog will be added to the main dialog wrapper and to the body of the dialog named "". Use this for dialog-specific styling. (on) * For all the other options please refer the jquery ui dialog documentation http://jqueryui.com/demos/dialog/#options Example javascript var btns[Drupal.t('Cancel')] = function() { $(this).dialog("close"); }; var aurl = Drupal.settings.basePath+'index.php?q=ajax/wysiwyg_imgupl/add/'+form_id; Drupal.jqui_dialog.open({url:aurl, buttons: btns,width:540}); Close the dialog If you want to close the dialog from the parent, use Drupal.jqui_dialog.close();In the Dialog (child)In the dialog you also need to include some javascript. It is mainly used to build up a communication tunnel between the opener (parent) and the opened dialog (child). It handles resize events and so forth. 1. PHP side: run the jquery_ui_dialog_child_js() method. It includes all needed javascript and CSS files Example That method is a menu handler and it returns some upload form which is show in the dialog. function wysiwyg_imageupload_upload_form(&$form_state,$form_id) { jquery_ui_dialog_child_js(); module_invoke('admin_menu', 'suppress'); drupal_set_title(t('Upload image')); $form = array(); $form['#attributes'] = array('enctype' => "multipart/form-data"); $form['image_upload'] = array( '#type' => 'fieldset', '#title'=> t('Upload image'), '#prefix' => '', '#suffix' => ''); _wysiwyg_imageupload_form_add_uploadfields($form,$form_id); return $form; } 2. javascript side: Nothinghook_jquery_ui_dialog_child_loadingImplement this hook if you want to change something when the child dialog is loaded, e.g. included some special CSS files or change the page template and so forth.CSS stylingThe body in the child has the id 'jquery_ui_dialog". You can use this to set "dialog specific styles" if you like to.AdditionsWhen you call the jquery_ui_dialog_child_js() method the jquery_ui_dialog implementation cares about using a stripped down page.tpl which does not show your site-layout. Nevertheless it loads all the javascript and CSS defintions in the page, so you still see the elements designed your way. So this helps you to put your work into designing the dialog only, not removing the layout everytime.If you dont understand the documentation or think, there is something important missing, or you have written a howto i might should link here, just let me know and open an support issue. Thanks.Contributions / IssuesContributions are highly respected, also feedback on issues or patches.Feature requestsPlease don't hassle with feature request, but please think about them properly, before you file in a issue-ticket. Please provide a basic outline of what the goal or the benefit of this feature would be. Outline the group of user you think is interested in.Implement them! :)Similar modules * Dialog:Also a jquery ui dialog implementation. Very slim - does not support iframes / jquery ui themes (namespaced) * Floating Window Looks like a very slim integration (not iframe). Promising. * Modalframe: Also a jquery ui dialog implementation. Has quiet a long history and some contrib modules using it. * Popups API * Colorbox: Implementation of colorbox, could be promising (but buttons missing) * Thickbox * Lightbox2This plugin was sponsored by KontextWork GbR for the enterprise Wiki based on Drupal called Drupal WikiIf you like the module, please write a comment herehttp://drupal.org/node/708130 to motivate people working on it!

Requirements:	No special requirements
Platforms:	PHP
Keyword:	Buttons,  Child,  Dialog,  Drupal,  Jquery,  Jquery Dialog,  Method,  Modalframe,  Module,  Namespace,  Support,  Theme,  Vascript,  Wysiwyg
Users rating:	0/10