Created
July 14, 2009 20:25
-
-
Save chriswarren/147173 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /**** | |
| Auto Inserted Help Dialogs | |
| *** | |
| Requirements: | |
| jQuery 1.3.2 | |
| jQuery UI 1.7.2 (Dialog and all effects) | |
| *** | |
| Looks for <a> elements with a class of help_dialog_link, replaces the element with a help icon that will dynamically loaded help text from a given URL on click. | |
| Include this file in the head of the page, and add the following: | |
| --- | |
| <script> | |
| $j(document).ready(function() { | |
| options = { | |
| icon:"/images/question_mark.jpg", | |
| helper_class:"help_dialog" | |
| } | |
| display_helpers(options); | |
| }); | |
| </script> | |
| --- | |
| Options are not required. | |
| icon will default to "[?]". It can be passed text, the URI of a JPG,GIF, or PNG, or the entire <img> tag for custom styling. | |
| helper_class will default to "help_dialog". This class will be applied to the dialog boxes, so that they can be styled. | |
| Example elements look like this: | |
| --- | |
| <a href="/help/1.html" id="help_link_1" class="help_dialog_link" help_style="dialog">Help</a> | |
| <a href="/help/1.html" id="help_link_1" class="help_dialog_link" help_style="dialog" modal="true">Help</a> | |
| <a href="/help/1.html" id="help_link_1" class="help_dialog_link" help_style="clip">Help</a> | |
| <a href="/help/1.html" id="help_link_1" class="help_dialog_link" help_style="fold">Help</a> | |
| --- | |
| Class is required, and must include 'help_dialog_link', though other classes can be used and will be applied to the inserted help icon or text. | |
| ID is not required. Any ID can be used, but should be unique to the page. If no ID is provided, a random one will be generated. | |
| Help_style is not required. If no help_style is provided, the default of 'slide' will be used. | |
| A link will be created using the supplied icon, pointing to the href of the element. | |
| However, instead of opening the given page, it will be loaded via AJAX and inserted in to a dialog box, as defined in the "help_style" attribute. | |
| Valid help_styles are the animation effects in jQuery UI, plus the Dialog widget (normal or modal), listed below: | |
| --- | |
| clip | |
| dialog | |
| drop | |
| explode | |
| fold | |
| puff | |
| slide | |
| scale | |
| --- | |
| help_style="dialog" also has the option of modal="true". If passed, the dialog window will be modal and unmovable on the screen until the user closes it. | |
| ****/ | |
| function display_helpers(options) { | |
| //Assign values from options | |
| if (options != null) { | |
| set_icon_to(options['icon']); | |
| set_helper_class_to(options['helper_class']); | |
| } | |
| else { | |
| set_icon_to(); | |
| set_helper_class_to(); | |
| } | |
| $j.ui.dialog.defaults.bgiframe = true; //Set iFrame so dialogs can overlay form elements | |
| $j("a.help_dialog_link").each(function(index,element) { //Get all the elements with a class of "help_dialog_link" and insert the help icon | |
| if ($j(element).attr("id") == "") { $j(element).attr("id", random_string()); } //ID must be set to use this, so add one if there isn't one. | |
| append_help_to(element); | |
| }); | |
| $j(".help_dialog_link").click(function() { display_help_for(this); return false; }); //Add help display on click to the help elements | |
| } | |
| function append_help_to(element) { //Stick in the HTML for the help icon and the div that'll be populated with content | |
| $j(element).after("<div id='"+$j(element).attr("id")+"_"+$j(element).attr("help_style")+"' class='"+$j(element).attr("help_style")+" "+helper_class+"' style='display:none;'></div>"); | |
| $j(element).html(icon) | |
| } | |
| function display_help_for(element) { //Load the help content via AJAX if it's not already loaded, then display it | |
| url = $j(element).attr("href"); //The URL to load via AJAX | |
| help_text_element = "#"+$j(element).attr("id")+"_"+$j(element).attr("help_style"); //The ID of the element to fill with the result | |
| if ($j(help_text_element).html() == "") { //If the content is already loaded, don't get it again | |
| $j.get(url, { }, | |
| function(data){ | |
| $j(help_text_element).html(data); //Load the content in to the element | |
| if ($j(element).attr("help_style") == "dialog") { activate_dialog_for(element,$j(element).attr("modal")); } //activate the dialog if it's a dialog | |
| toggle_display_of(help_text_element); //Toggle the content | |
| }); | |
| } | |
| else { toggle_display_of(help_text_element); } //Toggle the content | |
| } | |
| function toggle_display_of(element) { //Toggles for the different display modes | |
| switch(display_method_of(element)) { | |
| case "dialog": //open the element using the dialog widget from jQuery UI | |
| if ($j(element).dialog('isOpen')) { $j(element).dialog('close'); } else { $j(element).dialog('open'); } break; | |
| case "undefined": | |
| $j(element).toggle("slide"); break; | |
| default: | |
| $j(element).toggle(display_method); | |
| } | |
| } | |
| function display_method_of(element) { | |
| helper_class_regex = new RegExp(" "+helper_class); | |
| if ($j(element).hasClass("dialog")) //Dialog adds extra classes, so we just want to see if the first one is dialog | |
| { display_method = "dialog"; } | |
| else //Remove the helper class, use what's left to figure out the display method | |
| { display_method = $j(element).attr("class").replace(helper_class_regex,""); } | |
| return display_method; | |
| } | |
| function activate_dialog_for(element,modal) { | |
| if (modal == "true") | |
| { $j("#"+$j(element).attr("id")+"_dialog").dialog({modal:true, draggable: false}); } //Activate the dialog | |
| else | |
| { $j("#"+$j(element).attr("id")+"_dialog").dialog(); } //Activate the dialog | |
| $j("#"+$j(element).attr("id")+"_dialog").dialog('close'); //Close the dialog | |
| } | |
| function set_icon_to(help_icon) { | |
| is_image = /jpg|jpeg|png|gif$/ | |
| if (help_icon == undefined) //If there's nothing, use the default | |
| { icon = "[?]"; } | |
| else if (is_image.test(help_icon)) //If it matches the regex above then it's an image, so wrap it in an <img> tag | |
| { icon = "<img src='"+help_icon+"'>"; } | |
| else //Use whatever was passed | |
| { icon = help_icon; } | |
| } | |
| function set_helper_class_to(class_name) { | |
| if (class_name == undefined) //If there's nothing, use the default | |
| { helper_class = "help_dialog"; } | |
| else //Use whatever was passed | |
| { helper_class = class_name; } | |
| } | |
| function random_string() { | |
| var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; | |
| var string_length = 8; | |
| var randomstring = ''; | |
| for (var i=0; i<string_length; i++) { | |
| var rnum = Math.floor(Math.random() * chars.length); | |
| randomstring += chars.substring(rnum,rnum+1); | |
| } | |
| return randomstring; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment