نکات و ترفند های jQuery.

[ricky22]

سلام.
این تاپیک محلی برای به اشتراک گذاری نکته ها و ترفند های jQuery می باشد.

• از پرسیدن سوال خودداری شود.
• اگر پستی می گزارید و نکته یا تکه کدی را مطرح می کنید حتما توضیح فارسی درباره عملکرد بدهید.
• لطفا کدهای خود را Highlight کنید .(Syntax Highlighting )
• برای Index گزاری بهتر لطفا هر نکته/تکه کد خود را در یک پست قرار دهید.
• اگر در این تاپیک پلاگین خاصی را معرفی می کنید حتما یک تکه کد از عملکرد اون پلاگین قرار دهید.
• از گزاشتن لینک به سایت های دیگر خودداری بفرمایید.

به مرور زمان سعی می کنم همه ی پست ها را Index گذاری کنم.
همکاری شما در این تاپیک باعث مسرت هست.
با تشکر.

[ricky22]

کسی برای گروه بندی Index ها پیشنهادی دارد؟ (لطفا به من پیام خصوصی بزنید.)

• شناسایی نوع مرورگر
• غیر فعال کردن راست کلیک
  
• Preloading Images
• Font Resizing
• برگشت به بالای صحفه با Animation
• دریافت محل ماوس
• چک کردن برای خالی بودن یک عنصر
• جایگزاری یک عنصر
• بررسی وجود یک عنصر
• قرار دادن یک عنصر در وسط صحفه
• شمارش تعداد یک عنصر در صحفه
• جلوگیری از اجرای رفتار پیشفرض یک کنترل (مثلا کلیک در یک دکمه)
• استفاده از Cheat Sheet
• خلاصه نویسی Document Ready
• استفاده از متد Data برای نگهداری وضعیت به صورت Key/value
• متدهای Chainable (زنجیری)
• جستجو در یک Html و تغییر در آن
• لود عکس از فایل xml و نمایش آن بصورت داینامیک با استفاده از jQuery AJAX
• اضافه و حذف کردن آیتم به یک لیست
• تغییر اندازه متن توسط end user
• ساختنAccordion Menu
• نحوه نوشتن پلاگین برای jQuery با یک مثال ساده
• نوشتن Enum برای JavaScript و jQuery
• يك دست سازي ي و ك دريافتي در صفحات وب با jQuery
• یک ابزار Offline و یک ابزار Online برای امتحان کدهای jQuery
• بایند کردن یک Function به یک Event
• مجبور کردن لینک ها به باز شدن در یک Pop up
• مجبور کردن لینک ها به باز شدن در Tab جدید
• چک کردن وضعیت فعال یا غیر فعال بودن Cookie
• جایگزاری همه URL ها در صحفه با لینک قابل کلیک
• گرفتن URL صفحه جاری
• اجرای تابع به تعداد دفعات مشخص در بازه زمانی مشخص
• افزودن یک سطر به یک جدول
• گرفتن IP کاربر
• 3 رقم 3 رقم جدا کردن یک عدد(مقادیر پولی)

[ricky22]

غیر فعال کردن راست کلیک :

$(document).ready(function(){

    $(document).bind("contextmenu",function(e){

        return false;

    });

});

[ricky22]

شناسایی نوع مرورگر کاربر :

$(document).ready(function() {

// Target Firefox 2 and above

if ($.browser.mozilla && $.browser.version >= "1.8" ){

    // do something

}



// Target Safari

if( $.browser.safari ){

    // do something

}



// Target Chrome

if( $.browser.chrome){

    // do something

}



// Target Camino

if( $.browser.camino){

    // do something

}



// Target Opera

if( $.browser.opera){

    // do something

}



// Target IE6 and below

if ($.browser.msie && $.browser.version <= 6 ){

    // do something

}



// Target anything above IE6

if ($.browser.msie && $.browser.version > 6){

    // do something

}

});

[ricky22]

Preloading images


این تکه کد کمک می کند همه ی عکس ها با هم بارگزاری نشوند مناسب برای زمانی که سایت شما عکس های زیادی دارد.

$(document).ready(function() {

jQuery.preloadImages = function()

{

  for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);

  }

}

// how to use

$.preloadImages("image1.jpg");

});

</arguments.length;>

[ricky22]

Font resizing

آیا قصد دارید به کاربر اجازه دهید اندازه ی فونت ها را تغییر دهد؟

$(document).ready(function() {

  // Reset the font size(back to default)

  var originalFontSize = $('html').css('font-size');

    $(".resetFont").click(function(){

    $('html').css('font-size', originalFontSize);

  });

  // Increase the font size(bigger font0

  $(".increaseFont").click(function(){

    var currentFontSize = $('html').css('font-size');

    var currentFontSizeNum = parseFloat(currentFontSize, 10);

    var newFontSize = currentFontSizeNum*1.2;

    $('html').css('font-size', newFontSize);

    return false;

  });

  // Decrease the font size(smaller font)

  $(".decreaseFont").click(function(){

    var currentFontSize = $('html').css('font-size');

    var currentFontSizeNum = parseFloat(currentFontSize, 10);

    var newFontSize = currentFontSizeNum*0.8;

    $('html').css('font-size', newFontSize);

    return false;

  });

});

[ricky22]

برگشت به بالای صحفه با Animation.

$(document).ready(function() {

$('a[href*=#]').click(function() {

 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')

 && location.hostname == this.hostname) {

   var $target = $(this.hash);

   $target = $target.length && $target

   || $('[name=' + this.hash.slice(1) +']');

   if ($target.length) {

  var targetOffset = $target.offset().top;

  $('html,body')

  .animate({scrollTop: targetOffset}, 900);

    return false;

   }

  }

  });

// how to use

// place this where you want to scroll to

<a name="top"></a>

// the link

<a href="#top">go to top</a>

});

[ricky22]

دریافت محل ماوس

$(document).ready(function() {

   $().mousemove(function(e){

     //display the x and y axis values inside the div with the id XY

    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);

  });

// how to use

<div id="XY"></div>



});

[ricky22]

چک کردن برای خالی بودن یک عنصر.

$(document).ready(function() {

  if ($('#id').html()) {

   // do something

   }

});

[ricky22]

جایگزاری یک عنصر.

$(document).ready(function() {

   $('#id').replaceWith('

<div>I have been replaced</div>



');

});

[ricky22]

بررسی وجود یک عنصر :

$(document).ready(function() {

   if ($('#id').length) {

  // do something

  }

});

[ricky22]

قرار دادن یک عنصر در وسط صحفه.

$(document).ready(function() {

  jQuery.fn.center = function () {

      this.css("position","absolute");

      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");

      return this;

  }

  $("#id").center();

});

[ricky22]

شمارش تعداد یک عنصر در صحفه.

$(document).ready(function() {

   $("p").size();

});

[ricky22]

جلوگیری از اجرای رفتار پیشفرض یک کنترل (مثلا کلیک در یک دکمه)

$('#close').click(function(e){  

     e.preventDefault();

}); 

 

/* OR */

 

$('#close').click(function(){  

    return false;

}); 

<a href="#" id="close"></a>

[ricky22]

در این تاپیک قرار بر این بوده که علاوه بر تکه کد و ترفند با نمونه کد اگر نکته ی خاصی هم به نظر رسید اینجا قرار بدیم :
استفاده از برگه های تقلب
این یک نکته ی خاصی برای jQuery نیست . در اکثر زبان های برنامه نویسی برگه هایی وجود دارد به نام Cheat sheet یا همان برگ تقلب که نمونه های زیادی برای jQuery
یافت می شود.
این یک Cheat Sheet برای jQuery ورژن 1.5 هست.

[ricky22]

یک نکته ی کوچک در jQuery که می تواند سرعت کد نویسی را افزایش دهد :
استفاده از

$(function (){

    // your code

});

به جای

$(document).ready(function (){

    // your code

});

می باشد.

[ricky22]

استفاده از متد داخلی Data برای ذخیره وضعیت.
این متد برای ذخیره یک اطلاعات به صورت Key/Value برای هر عنصر DOM استفاده می شود.
ذخیره کردن یک تکه داده به همین سادگی هست :

$('#myDiv').data('currentState', 'off');

به حالت Key/Value توجه کنید.
-----
مثالی برای این متد :

$('.button').click(function() {



    var menuItem = $(this).parent();

    var panel = menuItem.find('.panel');



    if (menuItem.data('collapsed')) {

        menuItem.data('collapsed', false);

        panel.slideDown();  

    }

    else {

        menuItem.data('collapsed', true);

        panel.slideUp();

    }

});

ما از یک HTML استفاده کرده ایم و برای نشان دادن وضعیت از متد Data استفاده کرده ایم.
جالبه ! بقیه Internal های jQuery را اینجا ببینید

[ricky22]

یکی از ویژگیهای بسیار جالب jQuery متدهای Chainable هست . یعنی شما می توانید متدها رو دنبال هم بنویسید :
فرض کنید می خواهید یک Class را از یک عنصر بنویسید و کلاس دیگری به آن عنصر بدهید اینگونه عمل می کنیم :

$('myDiv').removeClass('off').addClass('on');

شما در jQuery می توانید کد شکسته بنویسید(چون jQuery = Javascript) :

$('#mypanel')

    .find('TABLE .firstCol')

    .removeClass('.firstCol')

    .css('background' : 'red')

    .append('<span>This cell is now red</span>');

اگر عادت کنید کد زنجیری بنویسید باعث از دفعات استفاده از Selector کاسته بشه
So Write Less Do More

[ricky22]

جستجوی عبارت انتخاب شده و تغییر در آن.
اگر بخواهید در یک متن عبارت 'شاهین' را جستجو کنید و هر جا که پیدا شد در آن تغییری دهید(highlight کنید یا Replcae کنید)؟
jQuery این کار را برای ما آسان کرده با html():
مثال :

$(function(){

    //First define your search string, replacement and context:

    var phrase = "your search string";

    var replacement = "new string";

    var context = $(body);

 

    //

    context.html(

        context.html().replace('/'+phrase+'/gi', replacement);

    );

 

});

[Amir Oveisi]

لود عکس از فایل xml و نمایش آن بصورت داینامیک با استفاده از Ajax و JQuery

فرض کنید فرمت فایل xml به شکل زیر است:

<?xml version="1.0" encoding="utf-8"?>

<images>

  <image>

    <src>"Images/1.jpg"</src>

    <description>"some text"</description>

    

    <title>"title"</title>

  </image> 

</images>

کد JQuery برای لود اطلاعات از فایل و اضافه کردن تگ img به ازای هر عکس لود شده:

 $(document).ready(function () {

            $.ajax({ type: "GET",

                url: "xmlfile.xml",

                dataType: "xml",

                success: parseXml

            });

            function parseXml(xml) {

                $(xml).find("image").each(function (index) {

                    $('<li><img src=' + $(this).find("src").text() + ' title=' + $(this).find("title").text() + ' alt=' + $(this).find("description").text() + ' /></li>').appendTo('#images');



                });



            }

        });

فرض بر آن است که یک تگ ul با id = images داریم که عکس های لود شده داخل آن لیست خواهند شد.

[ricky22]

شما می توانید عناصر درون عنصرهای دیگر در DOM را انتخاب کنید با پاس دادن پارامتر دوم به jQuery initializer :

<div id="outer">

  <div id="inner"> </div>

</div>

DIV درونی به این صورت انتخاب می شود :

$('#outer').find('#inner')

//or shorter:

$('#inner', $('#outer'))

//or even shorter:

$('#inner', '#outer')

[mohsen_zelzela00]

اضافه و حذف کردن آیتم به یک لیست

 <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

        <a href="#" id="add">add List Item</a><br />

        <a href="#" id="remove">remove List Item</a>

و کد jQ

$(function () {



            var i = $("li").size() + 1;

            $('a#add').click(function () {



                $('<li>' + i + '</li>').appendTo('ul');

                i++;

            });

            $('a#remove').click(function () {



                $('li:last').remove();

                i--;

            });

        });

[mohsen_zelzela00]

تغییر اندازه متن توسط end user

<a href="#" id="larger">Larger</a><br />

    <a href="#" id="smaller">Smaller</a>

    <p>

    Event handling in jQuery begins by connectingan event

    </p>

کد jQ

 $(function () {

            $('a').click(function () {



                var os = $('p').css('font-size');

                var num = parseFloat(os, 10);

                var uom = os.slice(-2);

                if (this.id == 'larger') {

                    $('p').css('font-size', num * 1.4 + uom);

                }

                else if (this.id == "smaller") {



                    $('p').css('font-size', num / 1.4 + uom);

                }



            });



        });

[mohsen_zelzela00]

ساختنAccordion Menu

کدهای html

 <ul id="accordion">

        <li>

            <div>

                Sports</div>

            <ul>

                <li><a href="#">Golf</a></li>

                <li><a href="#">Cricket</a></li>

                <li><a href="#">Football</a></li>

            </ul>

        </li>

        <li>

            <div>

                Technology</div>

            <ul>

                <li><a href="#">iPhone</a></li>

                <li><a href="#">Facebook</a></li>

                <li><a href="#">Twitter</a></li>

            </ul>

        </li>

        <li>

            <div>

                Latest</div>

            <ul>

                <li><a href="#">Obama</a></li>

                <li><a href="#">Iran Election</a></li>

                <li><a href="#">Health Care</a></li>

            </ul>

        </li>

    </ul>

کد های css

 #accordion

        {

            list-style: none;

            padding: 0 0 0 0;

            width: 170px;

        }

        #accordion div

        {

            display: block;

            background-color: #FF9927;

            font-weight: bold;

            margin: 1px;

            cursor: pointer;

            padding: 5 5 5 7px;

            list-style: circle;

            -moz-border-radius: 10px;

            -webkit-border-radius: 10px;

            border-radius: 10px;

        }

        #accordion ul

        {

            list-style: none;

            padding: 0 0 0 0;

        }

        #accordion ul

        {

            display: none;

        }

        #accordion ul li

        {

            font-weight: normal;

            cursor: auto;

            background-color: #fff;

            padding: 0 0 0 7px;

        }

        #accordion a

        {

            text-decoration: none;

        }

        #accordion a:hover

        {

            text-decoration: underline;

        }

و کد jQ

 $(function () {



            $("#accordion > li > div").click(function () {



                if (false == $(this).next().is(':visible')) {

                    $('#accordion ul').slideUp(300);

                }

                $(this).next().slideToggle(300);

            });



            $('#accordion ul:eq(0)').show();



        });

[majidmjh]

نحوه نوشتن پلاگین برای jQuery با یک مثال ساده :

$fn.makeRed = function(){

return $(this).css({"color":"red"})

}



$('div').makeRed()

[majidmjh]

نوشتن Enum برای JavaScript و jQuery:

var MessageType = {         _OK_Cancel: "1",         _OK: "2", _Yes_No: "3"     }

نحوه استفاده :

var mess =  MessageType._OK

در نتیجه مقدار mess مساوی با عدد 2 می شود .

[ricky22]

يك دست سازي ي و ك دريافتي در صفحات وب

برای حل مشکل یک دست سازی ی و ک برای نرم افزار های تحت وب فارسی راههای زیادی سمت سرور و سمت دیتابیس موجود هست.
اما جناب وحید نصیری اسکریپتی با استفاده از jQuery برای این کار نوشته اند که فقط کافی هست اسکریپت را در صحفه خود قرار دهید.
توضیحات بیشتر و مشاهده سورس و نحوه عملکرد در اینجا

• دريافت اين اسكريپت: (+)

• نسخه‌ي فشرده شده آن: (+)

• يك پروژه‌ي ساده ASP.NET نمونه در مورد استفاده از آن: (+)

اين اسكريپت با IE، فايرفاكس، اپرا ، كروم گوگل و Safari شركت اپل سازگار است و تفاوتي هم نمي‌كند كه در يك html ساده استفاده شود يا در صفحات ASP ، PHP ، ASP.NET ، JSP يا هر چي!

[ricky22]

یک ابزار Offline و یک ابزار Online برای امتحان کدهای jQuery
jQueryPadبرنامه‌اي است قابل حمل و كم حجم براي تمرين و همچنين آزمايش سريع اسكريپت‌هاي مبتني بر jQuery . مي‌توان در قسمت سمت چپ آن قطعه‌ كد HTML ‌ايي را نوشت و در TextBox سمت راست آن، قطعه‌ كد جاوا اسكريپتي مبتني بر jQuery . سپس با فشردن دكمه F5 بلافاصله نتيجه‌ي تركيب اين دو در پايين صفحه نمايش داده مي‌شود.
-----------
jsfiddle یک ابزار Onlineو یک زمین بازی برای توسعه دهنده گان وب هست . که می توان از ان به برای ویرایش و ایجاد Css , HTML , Javascript استفاده کرد. از این ابزار می توان برای اشتراک گزاری کدهای Javascript نیز استفاده نمود.این ابزار از Framework های مختلف Javascript از جمله jQuery پشتیبانی می کند. توضیحات بیشتر.

[ricky22]

بایند کردن یک Function به یک Event :

$('#foo').bind('click', function() {

  alert('User clicked on "foo."');

});

لیست Event ها را اینجا مشاهده بفرمایید.

[ricky22]

مجبور کردن لینک ها به باز شدن در یک Pop up .

jQuery('a.popup').live('click', function(){

    newwindow=window.open($(this).attr('href'),'','hei  ght=200,width=150');

    if (window.focus) {newwindow.focus()}

    return false;

});

[ricky22]

مجبور کردن لینک ها به باز شدن در Tab جدید :

jQuery('a.newTab').live('click', function(){

    newwindow=window.open($(this).href);

    jQuery(this).target = "_blank";

    return false;

});

[ricky22]

چک کردن وضعیت فعال یا غیر فعال بودن Cookie :

  var dt = new Date();

    dt.setSeconds(dt.getSeconds() + 60);

    document.cookie = "cookietest=1; expires=" + dt.toGMTString();

    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;

    if(!cookiesEnabled)

    {

        //cookies have not been enabled

    }

[ricky22]

جایگزاری همه URL ها در صحفه با لینک قابل کلیک :

$.fn.replaceUrl = function() {

        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;

        this.each(function() {

            $(this).html(

                $(this).html().replace(regexp,'<a href="$1">$1</a>‘)

            );

        });

        return $(this);

    }

    //usage

    $('p').replaceUrl();

[ricky22]

گرفتن URL صفحه جاری :

$(document).ready(function() {

    var pathname = window.location.pathname;

})

;

[ricky22]

اجرای 5 باره ی یک تابع با یک بازه زمانی 20 ثانیه ای

var count = 0; function myFunction() {     count++;     if(count > 5) clearInterval(timeout);     //do something } var timeout = setInterval(myFunction, 20000);

[ricky22]

افزودن یک سطر به یک جدول :

$('#myTable tr:last').after('<tr>...</tr>');

[ricky22]

گرفتن IP کاربر :

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){

    alert( "Your ip: " + data.ip);

});

اگر امتحان کردید و جواب نداد :
You are accessing this page from a forbidden country.

[ricky22]

3 رقم 3 رقم جدا کردن یک عدد :

<div id="result">12343778</div>

var delimiter = '.';

$('#result').html()

            .toString()

            .replace(new RegExp("(^\\d{"+($this.html().toString().length%3|  |-1)+"})(?=\\d{3})"),"$1" + delimiter)

            .replace(/(\d{3})(?=\d)/g,"$1" + delimiter);

[Saber Mogaddas]

مجبور کردن لینک ها به باز شدن در یک Pop up .

jQuery('a.popup').live('click', function(){

    newwindow=window.open($(this).attr('href'),'','hei  ght=200,width=150');

    if (window.focus) {newwindow.focus()}

    return false;

});

سلام
سوال :این تابع همه لینک های صفحه رو تو popup باز میکنه..؟؟