==================================== PimenTech-scripts : jquery.jframe.js ==================================== :Author: Frederic de Zorzi :Contact: fredz@_nospam_pimentech.net :Revision: $Revision: 1.35 $ :Date: $Date: 2011-06-07 16:32:49 $ :Copyright: 2007 PimenTech SARL :Tags: ajax javascript pimentech english jquery Thanks to jQuery_ library, jFrame provides an easy way to get an HTML frame-like behaviour on DIV Elements with AJAX. It comes with `Pimentech Scripts` library. Also alvaiable on jQuery_site_ . .. _jQuery: http://jquery.com .. _jQuery_site: http://jquery.com/plugins/project/jframe With jFrame, you can build smart, complex modern, internet apps without leaving the main page, without a single line of JavaScript ! A jFrame is a DIV tag with a src attribute. In a jFrame, click events on and tags will be handled by jframe and loaded in ajax. -------------- Recent Changes -------------- - 2011-06-07 : anchor link support - 2010-12-15 : removed log messages, stupid - Fixed IE problem with form validation - You can now activate a link outside a jframe : - Toggle attribute on tags : with toggle="off" , the jframe is loaded on the first click, hidden on the second, etc... ------------ Requirements ------------ The following JavaScript files must be included in the head section of your HTML page : - jquery.js : http://docs.jquery.com/Downloading_jQuery - jquery.form.js : http://www.malsup.com/jquery/form/#download - jquery.jframes.js : http://garage.pimentech.net/pimentech/js/jquery.jframe.js ------------- Usage Example ------------- Here_ a demo. .. _Here: http://garage.pimentech.net/examples/jquery_jframes/ By popular demand, complete demo source are located there, but it is written in Django_ : - http://trac.pimentech.org/pimentech/browser/garage/site_garage/examples - http://trac.pimentech.org/pimentech/browser/garage/templates/examples .. _Django: http://www.djangoproject.com -------- Elements -------- jFrame : DIV with src attribute =============================== Attributes ---------- - id : jFrame id, required. - src : url or "#", required. After a jFrame load, the src attribute value is replaced by the loaded url. Links and Submit Buttons ======================== Inside jFrames, onclick events on each link and submit button are redirected to jFrame plugin. A link ------ - With target attribute, the href value is loaded by an xmlhttprequest in
. Without target attribute, the href value is loaded in the current jframe. JFrame can be desactivated on a particular link with *jframe="no"* attribute (same for submit buttons). - You can activate a link outside a jframe DIV with *jframe="activate"* attribute - With *toggle="off"*, the first click will load the url link in target jframe and set *toggle* attribute to *on*. Then a second click will hide the target jframe (see demo above). - Links with anchors are supported ( ... ) INPUT type="submit" ------------------- The submit buttons also support a target attribute, like tags. jFrame forms support get and post method, onsubmit form attribute. BUTTON type="submit" are also supported. ---------- jQuery API ---------- - *$(div element).loadJFrame(url, callback)* : like ajax.load function. - *$(div element).activateJFrames()* : the div element becomes a jFrame. - *$(element).getJFrameTarget()* : if exists, return the first jFrame parent element. - *$(element).waitingJFrame()* : Overload this function in your code if you want for example a "waiting" message. Example : :: jQuery.fn.waitingJFrame = function () { $(this).html("loading..."); } ------ Source ------ .. include:: ../src/js/jquery.jframe.js :literal: ---- Tips ---- Loading two jframes with one link ================================= The base idea of jframe is "iframe alternative with ajax", and I don't want to add a non html behaviour like ' a href="url1|url2" '. If you want to load 2 jframes with one link, you have to do it in JavaScript, like : :: click here