<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery PHP library</title>
<meta name="keywords" content="php, ajax, jquery, javascript" />
<meta name="description" content="jQuery PHP library" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/jquery.php.js" type="text/javascript"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
// example php extension to jQuery (example)
jQuery.extend({
php: function (params) {
// do an ajax post request
$.ajax({
// AJAX-specified URL
url: "http://"+document.domain+"/ajax.php",
// JSON
type: "POST",
data: params,
dataType : "json",
/* Handlers */
// Handle the beforeSend event
beforeSend: function(){
return php.beforeSend();
},
// Handle the success event
success: function(data, textStatus){
return php.success(data, textStatus);
},
// Handle the error event
error: function (xmlEr, typeEr, except) {
return php.error(xmlEr, typeEr, except);
},
// Handle the complete event
complete: function (XMLHttpRequest, textStatus) {
return php.complete(XMLHttpRequest, textStatus);
}
})
}
});
// example registering simple callback function for messages
php.messages.myCallBack = function (msg, params){
alert ("My messages CallBack func: " + msg);
}
// example registering simple callback function for errors
php.errors.myCallBack = function (msg, params){
alert ("My errors CallBack func: " + msg);
}
</script>
<!-- start header -->
<div id="header">
<h1><a href="http://www.hohli.com">HoHl<span>i</span></a></h1>
<h2><a href="http://jquery.hohli.com">jQuery PHP</a> <span>beta</span></h2>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<a name="introduction"></a>
<h2 class="title">jQuery - AJAX - PHP:</h2>
<p class="meta"><small>Create JSON response for jQuery</small></p>
<div class="entry">
<h3>Description</h3>
<p>jQuery-PHP - is PHP library for work with jQuery JavaScript framework. jQuery-PHP have very similar syntax to javascript.</p>
<h3>Initialize</h3>
PHP: require jQuery library
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #b1b100;">require_once</span> <span style="color: #ff0000;">'libraries/jQuery.php'</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// many actions</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// ...</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> </div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// get JSON response</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">getResponse</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
HTML: initialize jQuery and jQuery.php
<div class="source">
<pre class="html4strict"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"javascript/jquery.js"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script></span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"javascript/jquery.php.js"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script></span></span></div></li></ol></pre> </div>
JavaScript: call AJAX (example)
<div class="source js">
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// do an ajax post request (example)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$.<span style="color: #006600;">ajax</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">{</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> <span style="color: #009900; font-style: italic;">// AJAX-specified URL</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> url: <span style="color: #3366CC;">"http://"</span>+document.<span style="color: #006600;">domain</span>+<span style="color: #3366CC;">"/ajax.php"</span>,</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> <span style="color: #009900; font-style: italic;">// JSON</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> type: <span style="color: #3366CC;">"POST"</span>,</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> data: <span style="color: #66cc66;">{</span><span style="color: #66cc66;">}</span>,</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> dataType : <span style="color: #3366CC;">"json"</span>,</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> <span style="color: #009900; font-style: italic;">// Handle the success event</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> <span style="color: #009900; font-style: italic;">// response parser call (it's requried for work php)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> success: <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span>data, textStatus<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> <span style="color: #000066; font-weight: bold;">return</span> php.<span style="color: #006600;">success</span><span style="color: #66cc66;">(</span>data, textStatus<span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> <span style="color: #66cc66;">}</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">}</span><span style="color: #66cc66;">)</span></div></li></ol></pre> </div>
</div>
</div>
<div class="post">
<a name="requirements"></a>
<h2 class="title">Requirements:</h2>
<p class="meta"><small>System requirements</small></p>
<div class="entry">
<ul>
<li>PHP 5.2.0 or higher (with JSON extension)</li>
<li>jQuery 1.1.2 or higher</li>
</ul>
</div>
</div>
<div class="post">
<a name="download"></a>
<h2 class="title">Download:</h2>
<p class="meta"><small>Google Code</small></p>
<div class="entry">
Web Access:
<div class="source">
<a href="http://code.google.com/p/jquery-php/downloads/list" title="Download jQuery-PHP from Google Code">http://code.google.com/p/jquery-php/downloads/list</a>
</div>
SVN Command-Line Access:
<div class="source">
svn checkout http://jquery-php.googlecode.com/svn/trunk/ jquery-php-read-only
</div>
</div>
</div>
<div class="post">
<h2 class="title">Ads:</h2>
<p class="meta"><small>Google Ads</small></p>
<div class="entry">
<script type="text/javascript"><!--
google_ad_client = "pub-3214048546347572";
//728x90, создано 04.01.08
google_ad_slot = "0794216339";
google_ad_width = 728;
google_ad_height = 90;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div class="post">
<a name="examples"></a>
<h2 class="title">Examples:</h2>
<p class="meta"><small>Should be work...</small></p>
<div class="entry">
<a name="examples-jquery"></a>
<h3>jQuery</h3>
<div>
Assign html by ID (<a href="#" onclick="javascript:$.php({'act':'test0'});return false;">click to run</a>):
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">jQuery</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'#test0'</span><span style="color: #66cc66;">)</span> -> <span style="color: #006600;">html</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'new content'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
This is PHP code equal JavaScript (<a href="#" onclick="javascript:$('#test0').html('new content');return false;">click to run</a>):
<div class="source js">
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// set new content to element with ID test0</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">(</span><span style="color: #3366CC;">'#test0'</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">html</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'new content'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
<div class="example" id="test0">old content</div>
</div>
<br/>
<div>
Assign html and chage CSS by ID (<a href="#" onclick="javascript:$.php({'act':'test1'});return false;">click to run</a>):
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">jQuery</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'#test1'</span><span style="color: #66cc66;">)</span> -> <span style="color: #006600;">html</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'new content'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> -> <span style="color: #006600;">css</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'backgroundColor'</span> , <span style="color: #ff0000;">'#ffff00'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
This is PHP code equal JavaScript (<a href="#" onclick="javascript:$('#test1').html('new content').css('backgroundColor' , '#ffff00');return false;">click to run</a>):
<div class="source js">
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// set new content to element with ID test1 and change CSS options</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">(</span><span style="color: #3366CC;">'#test1'</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">html</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'new content'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> .<span style="color: #006600;">css</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'backgroundColor'</span> , <span style="color: #3366CC;">'#ffff00'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
<div class="example" id="test1">old content</div>
</div>
<br/>
<div>
Assign html and chage CSS by Path (<a href="#" onclick="javascript:$.php({'act':'test2'});return false;">click to run</a>):
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">jQuery</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'#test2 div'</span><span style="color: #66cc66;">)</span> -> <span style="color: #006600;">html</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'new content'</span><span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">jQuery</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'#test2 div.red'</span><span style="color: #66cc66;">)</span> -> <span style="color: #006600;">html</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'new content'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> -> <span style="color: #006600;">css</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'backgroundColor'</span> , <span style="color: #ff0000;">'#ff0000'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
This is PHP code equal JavaScript (<a href="#" onclick="javascript:$('#test2 div').html('new content');$('#test2 div.red').html('new content').css('backgroundColor' , '#ff0000');return false;">click to run</a>):
<div class="source js">
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// set new content to element by Path and change CSS options by another Path</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">(</span><span style="color: #3366CC;">'#test2 div'</span><span style="color: #66cc66;">)</span> .<span style="color: #006600;">html</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'new content'</span><span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">(</span><span style="color: #3366CC;">'#test2 div.red'</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">html</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'new content'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> .<span style="color: #006600;">css</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'backgroundColor'</span> , <span style="color: #3366CC;">'#ff0000'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
<div class="example" id="test2">
<div>old content</div>
<div class="red">old content</div>
<div>old content</div>
</div>
</div>
<br/>
<div>
Bind event by Path(<a href="#" onclick="javascript:$.php({'act':'test3'});return false;">click to run</a>):
<script language="JavaScript" type="text/javascript">
function eventAlert(event) {
alert('Run "eventAlert": ' + event.data.test);
}
</script>
<div class="source js">
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// event function</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> eventAlert<span style="color: #66cc66;">(</span>event<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> <span style="color: #000066;">alert</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'Run "eventAlert": '</span> + event.<span style="color: #006600;">data</span>.<span style="color: #006600;">test</span><span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">}</span></div></li></ol></pre> </div>
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">jQuery</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'#test3 div'</span><span style="color: #66cc66;">)</span> -> <span style="color: #006600;">bind</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'click'</span>, <a href="http://www.php.net/array"><span style="color: #000066;">array</span></a><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'test'</span>=><span style="color: #ff0000;">'answer'</span><span style="color: #66cc66;">)</span>, <span style="color: #ff0000;">'eventAlert'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> -> <span style="color: #006600;">css</span> <span style="color: #66cc66;">(</span><span style="color: #ff0000;">'cursor'</span>, <span style="color: #ff0000;">'pointer'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> -> <span style="color: #006600;">css</span> <span style="color: #66cc66;">(</span><span style="color: #ff0000;">'color'</span>, <span style="color: #ff0000;">'#0000ff'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> -> <span style="color: #006600;">css</span> <span style="color: #66cc66;">(</span><span style="color: #ff0000;">'textDecoration'</span>, <span style="color: #ff0000;">'underline'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
This is PHP code equal JavaScript (<a href="#" onclick="javascript:$('#test3 div').bind('click', {'test':'answer'}, eventAlert).css('cursor', 'pointer').css('color', '#0000ff').css('textDecoration', 'underline');return false;">click to run</a>):
<div class="source js">
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// set event to elements by Path and change CSS options</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">(</span><span style="color: #3366CC;">'#test3 div'</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'click'</span>, <span style="color: #66cc66;">{</span><span style="color: #3366CC;">'test'</span>:<span style="color: #3366CC;">'answer'</span><span style="color: #66cc66;">}</span>, eventAlert<span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> .<span style="color: #006600;">css</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'cursor'</span>, <span style="color: #3366CC;">'pointer'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> .<span style="color: #006600;">css</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'color'</span>, <span style="color: #3366CC;">'#0000ff'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> .<span style="color: #006600;">css</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'textDecoration'</span>, <span style="color: #3366CC;">'underline'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
<div class="example" id="test3">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
</div>
<br/>
<div>
Use animate (<a href="#" onclick="javascript:$.php({'act':'test4'});return false;">click to run</a>, <a href="#" onclick="javascript:$.php({'act':'test4-restore'});return false;">restore</a>):
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">jQuery</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'#test4 div.hide'</span><span style="color: #66cc66;">)</span>-> <span style="color: #006600;">css</span> <span style="color: #66cc66;">(</span><span style="color: #ff0000;">'color'</span>, <span style="color: #ff0000;">'#ff0000'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> -> <span style="color: #006600;">animate</span> <span style="color: #66cc66;">(</span><a href="http://www.php.net/array"><span style="color: #000066;">array</span></a><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'opacity'</span>=><span style="color: #ff0000;">'show'</span><span style="color: #66cc66;">)</span>, <span style="color: #cc66cc;">1000</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
This is PHP code equal JavaScript (<a href="#" onclick="javascript:$('#test4 div.hide').css('color', '#ff0000').animate({'opacity':'show'}, 1000);return false;">click to run</a>):
<div class="source js">
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> </div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">(</span><span style="color: #3366CC;">'#test4 div.hide'</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">css</span> <span style="color: #66cc66;">(</span><span style="color: #3366CC;">'color'</span>, <span style="color: #3366CC;">'#ff0000'</span><span style="color: #66cc66;">)</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> .<span style="color: #006600;">animate</span> <span style="color: #66cc66;">(</span><span style="color: #66cc66;">{</span><span style="color: #3366CC;">'opacity'</span>:<span style="color: #3366CC;">'show'</span><span style="color: #66cc66;">}</span>, <span style="color: #CC0000;">1000</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
<div class="example" id="test4">
<div class="hide" style="display:none">content</div>
<div class="show">old content</div>
<div class="hide" style="display:none">content</div>
</div>
</div>
<br/>
<div>
Use animate with callback (<a href="#" onclick="javascript:$.php({'act':'test5'});return false;">click to run</a>, <a href="#" onclick="javascript:$.php({'act':'test5-restore'});return false;">restore</a>):
<script language="JavaScript" type="text/javascript">
var eventHideCounter = 0;
function eventHide() {
alert('Run "eventHide" (count:'+ ++eventHideCounter +')');
}
</script>
<div class="source js">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">var</span> eventHideCounter = <span style="color: #cc66cc;">0</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">function</span> eventHide<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> alert<span style="color: #66cc66;">(</span><span style="color: #ff0000;">'Run "eventHide" (count:'</span>+ ++eventHideCounter +<span style="color: #ff0000;">')'</span><span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">}</span></div></li></ol></pre> </div>
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">jQuery</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'#test5 div.hide'</span><span style="color: #66cc66;">)</span>-> <span style="color: #006600;">slideUp</span><span style="color: #66cc66;">(</span><span style="color: #cc66cc;">500</span>, <span style="color: #ff0000;">'eventHide'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
This is PHP code equal JavaScript (<a href="#" onclick="javascript:$('#test5 div.hide').slideUp(500, eventHide);return false;">click to run</a>):
<div class="source js">
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">(</span><span style="color: #3366CC;">'#test5 div.hide'</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">slideUp</span><span style="color: #66cc66;">(</span><span style="color: #CC0000;">500</span>, eventHide<span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
<div class="example" id="test5">
<div class="hide">content</div>
<div class="show">old content</div>
<div class="hide">content</div>
</div>
</div>
<br/>
<a name="examples-actions"></a>
<h3>Additional Actions</h3>
<div>
<h4>addMessage():</h4>
Return message (<a href="#" onclick="javascript:$.php({'act':'msg'});return false;">click to run</a>):
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">addMessage</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'Message 1...'</span><span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">addMessage</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'Message 2...'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
Message handler: you can reset default callback function:
<div class="source javascript">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// example registering simple callback function for messages</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">php.messages.defaultCallBack = <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #66cc66;">(</span>msg, params<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> alert <span style="color: #66cc66;">(</span><span style="color: #ff0000;">"My messages CallBack func: "</span> + msg<span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">}</span></div></li></ol></pre> </div>
Or create own callback function:
<div class="source javascript">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// example registering simple callback function for messages</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">php.messages.myCallBack = <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #66cc66;">(</span>msg, params<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"> alert <span style="color: #66cc66;">(</span><span style="color: #ff0000;">"My messages CallBack func: "</span> + msg<span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">}</span></div></li></ol></pre> </div>
and call it from PHP:
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">addMessage</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'Message...'</span>, <span style="color: #ff0000;">'myCallBack'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
</div>
<br/>
<div>
<h4>addError():</h4>
Return error (<a href="#" onclick="javascript:$.php({'act':'err'});return false;">click to run</a>):
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">addError</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'Error 1...'</span><span style="color: #66cc66;">)</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">addError</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'Error 2...'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
Errors handler equal to messages handler
</div>
<br/>
<div>
<h4>evalScript():</h4>
Eval script (<a href="#" onclick="javascript:$.php({'act':'eval'});return false;">click to run</a>):
<div class="source php">
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery::<span style="color: #006600;">evalScript</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">'alert("Eval script...");'</span><span style="color: #66cc66;">)</span>;</div></li></ol></pre> </div>
</div>
</div>
</div>
</div>
<!-- end content -->
</div>
<!-- end page -->
<div id="footer">
<p id="legal">©2007 All Rights Reserved. | Developed by <a href="http://anton.shevchuk.name/">Anton Shevchuk</a></p>
</div>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
