كتاب تعليم jquery الشامل من موقع مطور فى تطوير وبرمجة المواقع

..
..
..
..
, ,
,
,

,
jquery
,
-1 jquery
-2 jquery
-3 jquery
-4 jquery
-5 jquery
-6 jquery
-7 jquery
-8 tabs jquery
-9 jquery
-10 jquery
-1 jquery

:jquery javascript , mozilla
john resig
24 ,
mozilla

john resig
:jquery , ,
jquery ,
jquery

:
:Dom document object model ,
, ,
elements effects ,

: ,
dom,
.......
:effects&animations ,
jquery
:
, jquery

:1
:2
:3
:4
jquery,

:ajax xml ,
jquery, jquery ajax
:css manipulations jquery,
css, ,
,
;
.......
,
,
,
css jquery
css,

jquery
:
-1 jquery ,
, ,
jquery ,

-2 jquery ,

,
......
: jquery
,
jquery

:
html html .......
css web2 .......
, , , ,
...........
: jquery
:
jquery jquery : jquery
:
, jquery.js jquery js
javascript
jquery head
:
><script type="text/javascript" src="jquery.js"></script
:
-1
-2
,
jquery - :

,

.... ,
, :
, jquery ,
:
<script type="text/javascript" src="js.js"></script>
js.js
:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
//function to do when click alink
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content'; //load data in href only in div content
//once disappear using hide,load the load content function
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
..... :
:
jquery ,
,
.........
:
: jquery:
:
)($(selector).action
:
:
)($("p").hide
jquery
fadein
stop
.........
jquery,
,
: jquery
jquery
-1
-2
:
: :
- :
jquery
, jquery
.........
-1 jquery :
jsjquery-1.2.6.pack.js
:
:
><script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script
-2 jquery index.html
,
: jquery script
:
:
>"<script type="text/javascript
jquery
></script
: jquery ,
head
:
><head
><title>Title</title
><script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script
jquery
></script
></head
,
...........
jquery:
index.html
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(function() {
var i = $('li').size() + 1;
$('a#add').click(function() {
$('<li>' + i + '</li>').appendTo('ul');
i++;
});
$('a#remove').click(function() {
$('li:last').remove();
i--;
});
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</a><br />< a href="#" id="add">
</a>< a href="#" id="remove">
</body>
</html>
:
, ,
.....
:
code.js jquery -1
script jquery -2
..... , -3
index2.html
index2.html
:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</a><br />< a href="#" id="add">
</a>< a href="#" id="remove">
</body>
</html>
jquerycode.js

......
......
, jquery
)(
: jquery
,
,

.....
: ....
:
-1

:
:gallery
:lib jquery jquery-1.4.2.min.js +
jquery.jcarousel.jsjquery.jcarousel.min.js
:skins ...
:style.css css
:index.html ....
:
-2 :

....
-1 ,

-2 , , ,

-3
, style.css
, style.css ,
!!!!......
:
-1 ,
css style.css style2.css
,
body ,
body
......
, style.css ,
style2.css ,
style.css
,
...
, ,
css ,
, .......
: :
-1 css head
:
><link href="style.css" rel="stylesheet" type="text/css" /
-2 jquery head
:
><script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script
-3 jquery.jcarousel.min.js
head
:
><script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script
-4
:
><link rel="stylesheet" type="text/css" href="skins/tango/skin.css" /
-5 jquery qjuery,
script head
:
{ )(jQuery(document).ready(function
{(jQuery('#mycarousel').jcarousel
'wrap: 'circular
;)}
;)}
></script
jquery circular
,

-6 div list
, divwrap
:
<div align="center" id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="gallery/images/199481236_dc98b5abb3_s.jpg" width="75"
height="75" alt="" /></li>
<li><img src="gallery/images/199481072_b4a0d09597_s.jpg" width="75"
<li><img src="gallery/images/199481087_33ae73a8de_s.jpg" width="75"
<li><img src="gallery/images/199481108_4359e6b971_s.jpg" width="75"
<li><img src="gallery/images/199481143_3c148d9dd3_s.jpg" width="75"
<li><img src="gallery/images/199481203_ad4cdcf109_s.jpg" width="75" height="75"
alt="" /></li>
<li><img src="gallery/images/199481218_264ce20da0_s.jpg" width="75"
<li><img src="gallery/images/199481255_fdfe885f87_s.jpg" width="75" height="75"
alt="" /></li>
<li><img src="gallery/images/199480111_87d4cb3e38_s.jpg" width="75"
<li><img src="gallery/images/229228324_08223b70fa_s.jpg" width="75"
</ul>
</div>
:
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<!-jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>
<!-jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap: 'circular'
});
});
</script>
</head>
<body>
<li><img src="gallery/images/199481236_dc98b5abb3_s.jpg" width="75"
<li><img src="gallery/images/199481072_b4a0d09597_s.jpg" width="75"
<li><img src="gallery/images/199481087_33ae73a8de_s.jpg" width="75"
<li><img src="gallery/images/199481108_4359e6b971_s.jpg" width="75"
<li><img src="gallery/images/199481143_3c148d9dd3_s.jpg" width="75"
<li><img src="gallery/images/199481203_ad4cdcf109_s.jpg" width="75" height="75"
alt="" /></li>
<li><img src="gallery/images/199481218_264ce20da0_s.jpg" width="75"
<li><img src="gallery/images/199481255_fdfe885f87_s.jpg" width="75" height="75"
alt="" /></li>
<li><img src="gallery/images/199480111_87d4cb3e38_s.jpg" width="75"
<li><img src="gallery/images/229228324_08223b70fa_s.jpg" width="75"
</ul>
</div>
</body>
</html>
: .
,

# .....
: jsor-jcarousel-0.2.4-0-gf1351b7.zip
.......
, examples,

: jquery
,

,
......
:
, ,

-1 index.php
:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</title>< title>
<?php
if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
else $style = 'day';
?>
<link id="stylesheet" type="text/css" href="css/<?php echo $style
?>.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
src="js/styleswitcher.jquery.js"></script>
</head>
<body>
<div id="container">
</h1>< h1>
<div id="banner"></div>
<div id="content">
<div id="style-switcher">
</h4>< h4 >:
<ul>
<li id="day"><a href="style</a></li>switcher.php?style=day">
<li id="night"><a href="style</a></li>switcher.php?style=night">
</ul>
</div>
</div>
$('#style-switcher a').styleSwitcher();
</script>
</body>
</html>
:
php: , php :-1
:
:
<?php
if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
else $style = 'day';
?>
style
style, ,
night day ,
day ,
,

: css , -2
:
<link id="stylesheet" type="text/css" href="css/<?php echo $style
>?>.css" rel="stylesheet" /
href css, style ,
day, css day ,
night
-3 , ,
:
:
></a></li>"<li id="day"><a href="style-switcher.php?style=day
></a></li>"<li id="night"><a href="style-switcher.php?style=night
href syle ,
,

-4 jquery:
:
;)($('#style-switcher a').styleSwitcher
></script
, jquery ,
...
-2css:
: day.css : css, night.css : css, , ,
, ,
......
-3 style-switcher.php : php,
:
:
:
<?php
;]'$style = $_GET['style
;)setcookie("style", $style, time()+604800
{ ))]'if(isset($_GET['js
;echo $style
{ } else
;)]'header("Location: ".$_SERVER['HTTP_REFERER
}
>?
php, style ,
,

, ,
604800 ,
,
js jquery,
....
,
-4 js:
jquery.js : jquery styleswitcher.jquery.js : jquery,

, ,

-5 img
,
.........
: jquery
,
,
jquery :
index.html: -1
:
.... css, -1
:
<link rel="stylesheet" type="text/css" href="css/style.css" />
div , li , -2
keyboard ,
textarea, list
..
:
<div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span><span
class="on">~</span></li>
<li class="symbol"><span class="off">1</span><span
class="on">!</span></li>
class="on">@</span></li>
class="on">#</span></li>
class="on">$</span></li>
class="on">%</span></li>
class="on">^</span></li>
class="on">&</span></li>
class="on">*</span></li>
class="on">(</span></li>
class="on">)</span></li>
<li class="symbol"><span class="off">-</span><span
class="on">_</span></li>
<li class="symbol"><span class="off">=</span><span
class="on">+</span></li>
<li class="delete lastitem">delete</li>
<li class="tab">tab</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="symbol"><span class="off">[</span><span
class="on">{</span></li>
<li class="symbol"><span class="off">]</span><span
class="on">}</span></li>
<li class="symbol lastitem"><span class="off">\</span><span
class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="symbol"><span class="off">;</span><span
class="on">:</span></li>
<li class="symbol"><span class="off">'</span><span
class="on">"</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li class="symbol"><span class="off">,</span><span
class="on"><</span></li>
<li class="symbol"><span class="off">.</span><span
class="on">></span></li>
<li class="symbol"><span class="off">/</span><span
class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem"> </li>
</ul>
</div>
js : -3
: jquery: -1
:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
: jquery -2
:
><script type="text/javascript" src="js/keyboard.js"></script
:
break

.......
:
,
jquery ,
,

jquery ,

:
:index.html :
,

:
:
<li class="green">
</a></p><p><a href="#">
</p>< p class="subtext">
</li>
<li class="yellow">
</a></p><p><a href="#">
</li>
<li class="red">
</a></p><p><a href="#">
</li>
<li class="blue">
</a></p><p><a href="#">
</li>
<li class="purple">
</a></p><p><a href="#">
</li>
</ul>
<ul>
: ,
:
-1 ul , li
-2 li , class css
, class green , ,
css:
:
};.green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat
.......
-3 p , classsubtext
,
, .......

.....
:style.css :
css ,
index.html :
:
><link rel="stylesheet" href="style.css"/
, ,
, :
:
/*Menu Color Classes*/
};.green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat
};.yellow{background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat
};.red{background:#D52100 url('images/red-item-bg.jpg') top left no-repeat
};.purple{background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat
};.blue{background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat
, , ,
,
:js:
:
:jqueryeasy.js jquery ,

:animated-menu.js
index.html, jquery ,

:
"<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js
>type="text/javascript"></script
><script src="js/jqueryeasy.js" type="text/javascript"></script
><script src="js/animated-menu.js" type="text/javascript"></script
:images:
, ..........
:
,
, ,
.....
: +....

: tabs
jquery,
jquery, tabs
:tabs ,
tabs , tabs.
tabs
:
tabs
tabs ,
:
:index.html tabs , :ui.tabs.css css tabs:jquery.js jquery:ui.tabs.js tabs:core.js jquery:tab.png tab : index.html
tabs , !
tabs , :
-1 div id rotate
:
>"<div id="rotate
></div
-2 div , ui , li ,
a
:
><ul
><li
<a href="#>"><span ></span></a
></li
></ul
, id , div

, + :
:
><li><a href="#fragment-1"><span
>"<div id="rotate
><ul
></span></a></li
></span></a></li
></span></a></li
></span></a></li
></span></a></li
></ul
>"<div id="fragment-1
><p

..
..
..
..
></p
></div
></div
-3 , .....
-4 ,

......
,
, tabs , :
1 2 , 3 tabs panel5 ,
, ,
........
:
, ,
,
, ,
.........
......
,
.....
,
, jquery....
:
: :

jquery jquery
,
-1 index.php
:
><body
>"<div id="wrapper
>? ;)'<?php include('includes/header.php
>? ;)'<?php include('includes/nav.php
>"<div id="content
||><a href="#"><h3 >||</h1></a
><h3 ></h3
><p
,
, ,
, ,
. ,
, ,
, ...
></p
><p
></div
>? ;)'<?php include('includes/sidebar.php
>? ;)'<?php include('includes/footer.php
></div
></body
:
css+js -1
:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<!-jQuery library
-->
-->
-->
jquery: -2
:
wrap: 'circular'
});
});
</script>
: -3
:
<li><img src="gallery/images/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481072_b4a0d09597_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481087_33ae73a8de_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481108_4359e6b971_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481218_264ce20da0_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481255_fdfe885f87_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/229228324_08223b70fa_s.jpg" width="75" height="75" alt=""
/></li>
</ul>
</div>
: index.php -4
:
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<!-jQuery library
-->
-->
-->
wrap: 'circular'
});
});
</script>
jquery</title>< title>
</head>
<body>
<div id="wrapper">
<?php include('includes/header.php'); ?>
<?php include('includes/nav.php'); ?>
<li><img src="gallery/images/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481072_b4a0d09597_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481087_33ae73a8de_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481108_4359e6b971_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481218_264ce20da0_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199481255_fdfe885f87_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt=""
/></li>
<li><img src="gallery/images/229228324_08223b70fa_s.jpg" width="75" height="75" alt=""
/></li>
</ul>
</div>
<div id="content">
||</h1></a>< a href="#"><h3>||
</h3>< h3>
<p>
,
, ,
, ,
, .
, ,
, ...
></p
></div
>? ;)'<?php include('includes/sidebar.php
>? ;)'<?php include('includes/footer.php
></div
></body
: :
, ,
..........
: :
:
><script type="text/javascript" src="js/styleswitcher.jquery.js"></script
><link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" /
: :
:
><script type="text/javascript" src="js/styleswitcher.jquery.js"></script
><link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" /
, ,
...
, div +
:
<div id="style-switcher">
<h4 >:< /h4>
<ul>
<li id="day"><a href="style-switcher.php?style=day"></a></li>
<li id="night"><a href="style-switcher.php?style=night"></a></li>
</ul>
</div>
</div>
$('#style-switcher a').styleSwitcher();
</script>
css ,
......... css
day.css -1
:
navigation: -1
content area -2
, night.css
,
, , ,
,
........
, css,
...
:
{ #style-switcher
;position: absolute
;width: 100%
;top: 0
;left: 0
;right: 0
;height: 34px
;)background: #79a3cc url(../img/day-ss-bg.jpg
;border-bottom: 1px solid white
}
{ #style-switcher ul
;direction:rtl
;float: right
}
............
:
jquery
......
-1 ...
:
><script src="js/jqueryeasy.js" type="text/javascript"></script
><script src="js/animated-menu.js" type="text/javascript"></script
><link re="stylesheet" href="stylemenu.css"/
-2 ,
......
nav.php includes
......
:
>"<div id="menu
><ul
>"<li class="green
></a></p
>"<p><a href="#
></p
>"<p class="subtext
></li
>"<li class="yellow
></a></p
>"<p><a href="#
></p
>"<p class="subtext
></li
>"<li class="red
></a></p
>"<p><a href="#
></p
>"<p class="subtext
></li
>"<li class="blue
></a></p
>"<p><a href="#
></p
>"<p class="subtext
></li
>"<li class="purple
></a></p
>"<p><a href="#
></p
>"<p class="subtext
></li
></ul
></div
,
, ,
,
, index.php , div ,
.....
:
>"<div style="margin-top:90px;" align="center" id="wrap
style.css
..........
: tabs
,
, ,
tabs
..........
......

:) 8 (
,
jquery,
8 jquery
, jefeery way
, ,
, jquery
, ,
jquery ,
, ,
..........
..
........
, ,

jquery, ...........
.......
3RAPIDSHARE,HOTFILE,MEDIAFIRE
mirrorcreator
: , 3
:
: +
jquery
, ,

vista-design :
:
vista-design :
: www.mtwer.com
vista-design :
:
-: www.advphp.com- www.mtwer.com
http://www.mtwer.com/vb/dev73.html :

كتاب تعليم jquery الشامل من موقع مطور فى تطوير وبرمجة المواقع

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

كتاب تعليم jquery الشامل من موقع مطور فى تطوير وبرمجة المواقع

Cargado por

Copyright:

Formatos disponibles

..

jquery.js : jquery styleswitcher.jquery.js : jquery,

También podría gustarte