Examples:

Default options:

Section 1

In the words of jQuery‘s principal developer, John Resig, “jQuery is a simple JavaScript library that helps you to write the code that you want to write and really simplifies the interaction between JavaScript and HTML.”

Section 2

Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. We have tutorials for all skill levels, and each entry is categorized by level of difficulty.

Section 3

Writing jQuery function is relatively easy (thanks to the wonderful documentation). The key point you have to learn is how to get the exact element that you want to apply the effects.

  • $("#header") = get the element with id="header"
  • $("h3") = get all <h3> element
  • $("div#content .photo") = get all element with class="photo" nested in the <div id="content">
  • $("ul li") = get all <li> element nested in all <ul>
  • $("ul li:first") = get only the first <li> element of the <ul>

Section 4

jQuery is fast becoming a must-have skill for front-end developers. The purpose of this site is to provide an overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning.

JavaScript can be included inline or by including an external file via a script tag. The order in which you include JavaScript is important: dependencies must be included before the script that depends on them.


<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		text
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		text
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		text
		</p>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		text
		</p>
	</div>
</div>

<?=$ajax->accordion('accordion');?>
            

No auto hight and navigation

Try to open this page with #section2 at the end. It should open 2nd panel at start. (Make sure that you refresh the page - enter is not enought :) ). Also you ca try with #othercontent and it should open last panel, because it contains link with that href.

Section 1

Ajax is not new. These techniques have been available to developers targeting Internet Explorer on the Windows platform for many years. Until recently, the technology was known as web remoting or remote scripting.

Section 2

Web developers have also used a combination of plug-ins, Java applets, and hidden frames to emulate this interaction model for some time. What has changed recently is the inclusion of support for the XMLHttpRequest object in the JavaScript runtimes of the mainstream browsers.

Section 3

Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Object Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML ( Ajax) has emerged recently to describe this interaction model.

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
Link to other content

<div id="accordion2">
	<h3><a href="#section1">Section 1</a></h3>
	<div>
		<p>text</p>
	</div>
	<h3><a href="#section2">Section 2</a></h3>
	<div>
		<p>text</p>
	</div>
	<h3><a href="#section3">Section 3</a></h3>
	<div>
		<p>long text</p>
		<a href="#othercontent">Link to other content</a>
	</div>
</div>
<?=$ajax->accordion('accordion2', array(
    'autoHeight' => false, 
    'navigation' => true
));?>
            

Open on mouseover:

Section 1

Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events.

Section 2

By now, nearly everyone who works in web development has heard of the term Ajax, which is simply a term to describe client-server communication achieved without reloading the current page. Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques aren't limited to just XMLHttp. There are several other methods;

Section 3

The first alternate Ajax technique is dynamic script loading. The concept is simple: create a new cygwin <script/> element and assign a JavaScript file to its src attribute to load JavaScript that isn't initially written into the page. The beginnings of this technique could be seen way back when Internet Explorer 4.0 and Netscape Navigator 4.0 ruled the web browser market. At that time, developers learned that they could use the document.write() method to write out a <script/> tag.

  • List item one
  • List item two
  • List item three

Section 4

Everyone's favourite AJAX technology app is Google Maps. Google have done a stunning job... But when I came to try to bookmark a page I had to hunt around for 'link to this page' over on the right hand side. Why have they broken such a basic function of the web? I use bookmarks A LOT and the extra effort bothered me. I got over it though, and life went on.
Then I came to flick through the drop down on Kottke.org (now removed) and I kept hitting the back button on my mouse by accident, taking me off the site. Really irritating. The most fundamental online behaviour - click then back, is broken.


<div id="accordion3">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		text
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		text
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		text
		</p>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		text
		</p>
	</div>
</div>

<?=$ajax->accordion('accordion3', array('event' => 'mouseover'));?>
            

Comments

  1. Ayo wrote:

    Can I have html tables as text in the accordions?
    seem to me messing up my whole layout.

  2. kvas wrote:

    Hi Ayo,
    I never tried to use tables, but if you put them into divs you shouldn't have problems...

Post a comment

 

Additional options:

  • $options['var'] - name of variable that stores handler to accordion method
 

jQuery Ajax Helper

CakePHP is distributed under flexible licence - MIT Licence. I decided to publish my code on the same licence, so you can freely use IT!

If I made you interested go and download it now!