Search
Code Directory
 ASP
 ASP.NET
 C/C++
 CFML
 CGI/PERL
 Delphi
 Development
 Flash
 HTML
 Java
 JavaScript
 Pascal
 PHP
 Python
 SQL
 Tools
 Visual Basic & VB.NET
 XML
New Code
C# QR Code Generator 4.0.2.2
Salesforce WordPress Customer Portal 3.2.0
Single Leg MLM 1.2.1
OzGIS 14.6
Quick Maps For Dynamics CRM 3.1
Job Board Software 4.2
PHP Real Estate Script 1.3.2
IP2Location Geolocation Database April.2019
dbForge Data Generator for Oracle 2.1
VisualNEO Web 2018.12.15
SentiMask SDK Trial 1.0.0
OrgChart JS 4.6.4
dotConnect for BigCommerce 1.8
FedEx Smart Shipping For Magento 1.0.0
Database Workbench Pro 5.6.2.311
Top Code
MATLAB Support Package for Arduino (aka ArduinoIO Package) 1.0
Hyperion Tools 1.0
bit plane slicing 1.0
Efficient K-Means Clustering using JIT 1.0
Azizi search engine script PHP 4.1.10
e-Classifieds: Commerce Edition 3.41
Cuckoo Search (CS) Algorithm 1.0
dbForge Search for SQL Server 2.3
RoundCube Webmail for Email Systems Utilities 0.1.1
Delphi Crt 120
Cuckoo Optimization Algorithm 1.0
PHP GZ Blog Script 1.1
Dragable elements Script for Graphics and Animations 1.1
iGesture - Gesture Recognition Framework 1.0
Shadelayer Highlighter 1
Top Rated
VisualNEO Web 2018.12.15
Paste phpSoftPro 1.4.1
Deals and Discounts Website Script 1.0.2
ADO.NET Provider for ExactTarget 1.0
Solid File System OS edition 5.1
Classified Ad Lister 1.0
Aglowsoft SQL Query Tools 8.2
Invoice Manager by PHPJabbers 3.0
ICPennyBid Penny Auction Script 4.0
PHP Review Script 1.0
ATN Resume Finder 2.0
ATN Site Builder 3.0
Availability Booking Calendar PHP 1.0
PHP GZ Blog Script 1.1
ATN Jobs Software 4.0
Jquery UI Dialog 6.x-1.10
File ID: 97390






Jquery UI Dialog 6.x-1.10
Download Jquery UI Dialog 6.x-1.10http://drupal.orgReport Error Link
License: Freeware
File Size: 20.5 KB
Downloads: 4
Submit Rating:
Jquery UI Dialog 6.x-1.10 Description
Description: In Short

If 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-podcast
Compatibility / Dependencies
Server 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

- javascript
Installation

1. Download and activate the module
2. Clear the cache

Why 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 Documentation
For 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' => '<div id="file_upload_group">',
'#suffix' => '</div>');
_wysiwyg_imageupload_form_add_uploadfields($form,$form_id);

return $form;
}
2. javascript side: Nothing

hook_jquery_ui_dialog_child_loading

Implement 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 styling

The body in the child has the id 'jquery_ui_dialog". You can use this to set "dialog specific styles" if you like to.
Additions

When 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 / Issues

Contributions are highly respected, also feedback on issues or patches.
Feature requests

Please 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
* Lightbox2

This plugin was sponsored by KontextWork GbR for the enterprise Wiki based on Drupal called Drupal Wiki

If you like the module, please write a comment herehttp://drupal.org/node/708130 to motivate people working on it!

License: Freeware

Related: Dialog, jquery, Module, method, vascript, jquery dialog, Theme, modalframe, drupal, Wysiwyg, Buttons, Child, Namespace, Support

O/S:BSD, Linux, Solaris, Mac OS X

File Size: 20.5 KB

Downloads: 4



More Similar Code

This module provides an API to render an iframe within a modal dialog based on the jQuery UI Dialog plugin. You should not install this module unless another module requires you to, or you wish to use it for your own custom modules.

It is an alternative to Popups API (Ajax Dialogs) which implements its own library and API to manage popup dialogs. On the other hand, the Modal Frame API is based on the jQuery UI Dialog plugin and it...



The module provides an API for creating and updating javascript dialog windows using the jQuery UI Dialog widget and the CTools ajax framework.
Core module support

The module also supplies several sub-modules that provide dialogs...



The tabs module integrates the jQuery UI tabs plugin, providing client-side interactive tabs. This is a helper module. It doesn't do anything on its own. Rather, it is used by other modules that provide tabs.

Formerly part of the...



Extends jQuery UI's datepicker (calendar) allowing multiple dates and range selection and avoidance.



A simple layout manager for jquery UI



Theme switcher tool for the jQuery UI CSS Framework.

Change the css stylesheet using an jQuery UI dialogbox which you can call using a button or a link in your html page. Completely implemented in your webspace.



UI::Dialog is a Object Oriented Perl wrapper for the various dialog applications. These dialog backends are currently supported: Zenity, XDialog, GDialog, KDialog, CDialog, and Whiptail.



jQuery UI .NET project is Web User Controls suite that wraps standard jQuery UI widgets, e.g. Accordion, Tabs, Button, etc. The project aimed to ease integration of jQuery UI with ASP.NET.
The current (initial) version is based on jQuery UI...



Description

This module includes the jquery ui multiselect plugin. http://quasipartikel.at/multiselect/
Get involved

* Write a review for this module on drupal modules
* Help write or improve the documentation.



This plugin brings jQuery, jQuery UI and jQuery Tools to your site. It supports grabbing the libraries from both Content Delivery Networks (CDNs) and local copies, allows to activate jQuery.noColflict() mode if necessary. As well it already...

User Review for Jquery UI Dialog
- required fields
     

Please enter text on the image