კეთილი იყოს თქვენი მობრძანება ფორუმზე სტუმარო

გვერდი 1 დან1
GEOweb ფორუმი » ვებ სკრიფტების გარჩევა » Javascript » jQuery Tutorial (jQuery ტუტორიალები ქართულად!)
jQuery Tutorial
რომანითარიღი: კვირა, 13.06.2010, 02:31 | შეტყობინება # 1
რომანი კანდელაკი
ჯგუფი: რომანი კანდელაკი

შეტყობინებები: 26
ჯილდოები: 0
რეპუტაცია: 100
სტატუსი: Offline
jQuery Tutorial

jQuery, წესისამებრ, ერთვის ვებ გვერთდს, როგორც ერთი გარე JavaScript-ფაილი:

Code
<head>
<scripttype="text/javascript"src="გზა/ფაილამდე/jQuery.js"></script>
</head>

jQuery-ის მთელი მუშაობა მიდის $ ფუნქციის დახმარებით. თუ საითზე კიდევ გამოიყენება სხვა JavaScript ბილიოთეკები, რომლებიც სავარაუდოდ $-ს იყენებენ თავიაანთი საჭიროებისათვის, შესაძლებელია გამოყენებული იქნას მისი სინონიმი — jQuery. მეორე მეთოდი ითვლება უფრო სწორად, იმისათვის კი, რომ კოდი არ გამოჩნდეს ძალიან მოუქნელი, შეიძლება ჩაიწეროს შემდეგნაირად:

Code
jQuery(
function($) {
// აქ უკვე სკრიპტის კოდი, სადაც $-ში იქნება jQuery
}
)

jQuery-სთან მუშაობა შეიძლება გაიყოს 2 ტიპად:
jQuery-ობიექტის მიღება $() ფუნქციის დახმარებით. მაგალითად, მასში CSS-სელექტორის გადაცემით, შესაძლებელია კრიტერიუმში შემავალი ყველა HTML ელემენტის jQuery-ობიექტის მიღება და შემდეგში მათზე მოქმედებები jQuery-ობიექტის სხვადასხვა მეთოთების დახმარებით.
$ ობიექტის გლობალური მეთოდების გამოძახება, მაგალითად, მასივზე მოსახერხებელი იტერატორებისა.

ერდროულად რამოდენიმუ DOM კვანძით მანიპულირების ტიპიური მაგალითია $ ფუნქციის გამოძახება CSS-ის სელექტორის სტრიქონით, რომელიც აბრუნებს jQuery ობიექტს HTML-გვერდის ელემენტების გარკვეული რიცხვით. ეს ელამენტები შემდეგში

მუშავდება jQuery-ის მეთოდებით. მაგალითად,

Code
$("div.test").add("p.quote").addClass("blue").slideDown("slow");

პოულობს ყველა <div> ელემენტს test კლასით, აგრეთვე ყველა <p> ელემენტს quote კლასით, შემდეგ ყველა მათგანს დაუმატებს blue კლასს და ვიზუალურად ნელა დაუშვებს ქვემოთ.

მეთოდები, რომლებიც იწყება Методы, начинающиеся с $., მოსახერხებელია გლობალური ობიექტების დასამუშავებლად, მაგალითად:

Code
$.each(
[1,2,3],function() {
document.write(this+1);
}
);

გვერდზე დაამატებს 234-ს.

$.ajax და შესაბამისი ფუნქციები საშუალებას იძლება AJAX მეთოდების გამოყენებისა, მაგალითად:

Code
$.ajax(
{
type:"POST",
url:"some.php",
data: {name:'John', location:'Boston'},
success:function(msg){
alert( "Data Saved: "+ msg);
}
}
);

ამ მაგალითში მიმართვა ხდება some.php სკრიპტზე name=John&location=Boston პარამეტრებით და მიღებული შედეგი გამოტანება alert() ფუნქციის დახმარებით.

მაგალითი, სადაც jQuery-ს მეშვეობით ელემენტს ემატება click-ის დამუშავება:

Code
jQuery(
function($) {
$("a").click(
function() {
alert("Hello world!");
}
);
}
);

ამ შემთხვევაში <A> ელემენტზე დაჭერისას გამოიძახება alert("Hello world!") ფუნქცია.


GEOweb.moy.su

კანდელაკი რომანი

GEOweb Search in Google

 
რომანითარიღი: კვირა, 13.06.2010, 04:58 | შეტყობინება # 2
რომანი კანდელაკი
ჯგუფი: რომანი კანდელაკი

შეტყობინებები: 26
ჯილდოები: 0
რეპუტაცია: 100
სტატუსი: Offline
Slide Panel
ბევრ რამეში შეიძლება გამოგადგეთ ეს პატარა და მოხერხებული სკრიფტი, მაგალითად თქვენს საიტზე რეკლამის განსათავსებლად, ან თუნდაც პოპულარული სიახლეებისთვის, ან კიდევ სხვა smile

Code
$(document).ready(function(){
      $(".btn-slide").click(function(){
          $("#panel").slideToggle("slow");
          $(this).toggleClass("active");
      });
});

დემო ვერსია შეგიძლიათ იხილოთ აქ: Slide Panel

რათქმაუნდა მხოლოდ ეს მცირე კოდი არ არის საჭირო რომ ასეთი შედეგი მივიღოთ, მაგრამ ეს არის ძირითადი კოდი, რასაც მოაქვს ზუსტად ის შედეგი რაზეც ვსაუბრობთ.

ესეც სრული სკრიფტი:

Code
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Slide Panel</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

<script type="text/javascript">
$(document).ready(function(){

   $(".btn-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
   });
     
      
});
</script>

<style type="text/css">
body {
   margin: 0 auto;
   padding: 0;
   width: 570px;
   font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
   outline: none;
}
#panel {
   background: #754c24;
   height: 200px;
   display: none;
}
.slide {
   margin: 0;
   padding: 0;
   border-top: solid 4px #422410;
   background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
   background: url(images/white-arrow.gif) no-repeat right -50px;
   text-align: center;
   width: 144px;
   height: 31px;
   padding: 10px 10px 0 0;
   margin: 0 auto;
   display: block;
   font: bold 120%/100% Arial, Helvetica, sans-serif;
   color: #fff;
   text-decoration: none;
}
.active {
   background-position: right 12px;
}
</style>
</head>

<body>

<div id="panel">
   <!-- you can put content here -->
</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

</body>
</html>


GEOweb.moy.su

კანდელაკი რომანი

GEOweb Search in Google

 
რომანითარიღი: კვირა, 13.06.2010, 05:08 | შეტყობინება # 3
რომანი კანდელაკი
ჯგუფი: რომანი კანდელაკი

შეტყობინებები: 26
ჯილდოები: 0
რეპუტაცია: 100
სტატუსი: Offline
jQuery მენიუ #1

Code
$(document).ready(function(){
     $(".menu a").hover(function() {
         $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
     }, function() {
         $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
     });
});

დემო ვერსია: jQuery მენიუ #1


GEOweb.moy.su

კანდელაკი რომანი

GEOweb Search in Google

 
GEOweb ფორუმი » ვებ სკრიფტების გარჩევა » Javascript » jQuery Tutorial (jQuery ტუტორიალები ქართულად!)
გვერდი 1 დან1
ძებნა: