-
نکات و ترفند های jQuery.
سلام.
این تاپیک محلی برای به اشتراک گذاری نکته ها و ترفند های jQuery می باشد.
- از پرسیدن سوال خودداری شود.
- اگر پستی می گزارید و نکته یا تکه کدی را مطرح می کنید حتما توضیح فارسی درباره عملکرد بدهید.
- لطفا کدهای خود را Highlight کنید .(Syntax Highlighting )
- برای Index گزاری بهتر لطفا هر نکته/تکه کد خود را در یک پست قرار دهید.
- اگر در این تاپیک پلاگین خاصی را معرفی می کنید حتما یک تکه کد از عملکرد اون پلاگین قرار دهید.
- از گزاشتن لینک به سایت های دیگر خودداری بفرمایید.
به مرور زمان سعی می کنم همه ی پست ها را Index گذاری کنم.
همکاری شما در این تاپیک باعث مسرت هست.
با تشکر.
-
نقل قول: نکات و ترفند های jQuery.
کسی برای گروه بندی Index ها پیشنهادی دارد؟ (لطفا به من پیام خصوصی بزنید.)
-
غیر فعال کردن راست کلیک
غیر فعال کردن راست کلیک :
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
-
نقل قول: نکات و ترفند های jQuery.
شناسایی نوع مرورگر کاربر :
$(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
}
});
-
نقل قول: غیر فعال کردن راست کلیک
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;>
-
نقل قول: نکات و ترفند های jQuery.
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;
});
});
-
نقل قول: غیر فعال کردن راست کلیک
برگشت به بالای صحفه با 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>
});
-
نقل قول: غیر فعال کردن راست کلیک
دریافت محل ماوس
$(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>
});
-
نقل قول: غیر فعال کردن راست کلیک
چک کردن برای خالی بودن یک عنصر.
$(document).ready(function() {
if ($('#id').html()) {
// do something
}
});
-
نقل قول: غیر فعال کردن راست کلیک
جایگزاری یک عنصر.
$(document).ready(function() {
$('#id').replaceWith('
<div>I have been replaced</div>
');
});
-
نقل قول: غیر فعال کردن راست کلیک
بررسی وجود یک عنصر :
$(document).ready(function() {
if ($('#id').length) {
// do something
}
});
-
نقل قول: غیر فعال کردن راست کلیک
قرار دادن یک عنصر در وسط صحفه.
$(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();
});
-
نقل قول: غیر فعال کردن راست کلیک
شمارش تعداد یک عنصر در صحفه.
$(document).ready(function() {
$("p").size();
});
-
نقل قول: غیر فعال کردن راست کلیک
جلوگیری از اجرای رفتار پیشفرض یک کنترل (مثلا کلیک در یک دکمه)
$('#close').click(function(e){
e.preventDefault();
});
/* OR */
$('#close').click(function(){
return false;
});
<a href="#" id="close"></a>
-
نقل قول: نکات و ترفند های jQuery.
در این تاپیک قرار بر این بوده که علاوه بر تکه کد و ترفند با نمونه کد اگر نکته ی خاصی هم به نظر رسید اینجا قرار بدیم :
استفاده از برگه های تقلب
این یک نکته ی خاصی برای jQuery نیست . در اکثر زبان های برنامه نویسی برگه هایی وجود دارد به نام Cheat sheet یا همان برگ تقلب که نمونه های زیادی برای jQuery
یافت می شود.
این یک Cheat Sheet برای jQuery ورژن 1.5 هست.
-
نقل قول: نکات و ترفند های jQuery.
یک نکته ی کوچک در jQuery که می تواند سرعت کد نویسی را افزایش دهد :
استفاده از
$(function (){
// your code
});
به جای
$(document).ready(function (){
// your code
});
می باشد.
-
نقل قول: نکات و ترفند های jQuery.
استفاده از متد داخلی 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 را اینجا ببینید
-
نقل قول: نکات و ترفند های jQuery.
یکی از ویژگیهای بسیار جالب 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
-
نقل قول: نکات و ترفند های jQuery.
جستجوی عبارت انتخاب شده و تغییر در آن.
اگر بخواهید در یک متن عبارت 'شاهین' را جستجو کنید و هر جا که پیدا شد در آن تغییری دهید(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);
);
});
-
نقل قول: نکات و ترفند های jQuery.
لود عکس از فایل 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 داریم که عکس های لود شده داخل آن لیست خواهند شد.
-
نقل قول: نکات و ترفند های jQuery.
شما می توانید عناصر درون عنصرهای دیگر در DOM را انتخاب کنید با پاس دادن پارامتر دوم به jQuery initializer :
<div id="outer">
<div id="inner"> </div>
</div>
DIV درونی به این صورت انتخاب می شود :
$('#outer').find('#inner')
//or shorter:
$('#inner', $('#outer'))
//or even shorter:
$('#inner', '#outer')
-
نقل قول: نکات و ترفند های jQuery.
اضافه و حذف کردن آیتم به یک لیست
<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--;
});
});
-
نقل قول: نکات و ترفند های jQuery.
تغییر اندازه متن توسط 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);
}
});
});
-
نقل قول: نکات و ترفند های jQuery.
ساختن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();
});
-
نقل قول: نکات و ترفند های jQuery.
نحوه نوشتن پلاگین برای jQuery با یک مثال ساده :
$fn.makeRed = function(){
return $(this).css({"color":"red"})
}
$('div').makeRed()
-
نقل قول: نکات و ترفند های jQuery.
نوشتن Enum برای JavaScript و jQuery:
var MessageType = { _OK_Cancel: "1", _OK: "2", _Yes_No: "3" }
نحوه استفاده :
var mess = MessageType._OK
در نتیجه مقدار mess مساوی با عدد 2 می شود .
-
نقل قول: نکات و ترفند های jQuery.
يك دست سازي ي و ك دريافتي در صفحات وب
برای حل مشکل یک دست سازی ی و ک برای نرم افزار های تحت وب فارسی راههای زیادی سمت سرور و سمت دیتابیس موجود هست.
اما جناب وحید نصیری اسکریپتی با استفاده از jQuery برای این کار نوشته اند که فقط کافی هست اسکریپت را در صحفه خود قرار دهید.
توضیحات بیشتر و مشاهده سورس و نحوه عملکرد در اینجا
نقل قول:
اين اسكريپت با IE، فايرفاكس، اپرا ، كروم گوگل و Safari شركت اپل سازگار است و تفاوتي هم نمي‌كند كه در يك html ساده استفاده شود يا در صفحات ASP ، PHP ، ASP.NET ، JSP يا هر چي!
-
نقل قول: نکات و ترفند های jQuery.
یک ابزار Offline و یک ابزار Online برای امتحان کدهای jQuery
http://www.paulstovell.com/favicon.icojQueryPadبرنامه‌اي است قابل حمل و كم حجم براي تمرين و همچنين آزمايش سريع اسكريپت‌هاي مبتني بر jQuery . مي‌توان در قسمت سمت چپ آن قطعه كد HTML ايي را نوشت و در TextBox سمت راست آن، قطعه كد جاوا اسكريپتي مبتني بر jQuery . سپس با فشردن دكمه F5 بلافاصله نتيجه‌ي تركيب اين دو در پايين صفحه نمايش داده مي‌شود.
-----------
jsfiddle یک ابزار Onlineو یک زمین بازی برای توسعه دهنده گان وب هست . که می توان از ان به برای ویرایش و ایجاد Css , HTML , Javascript استفاده کرد. از این ابزار می توان برای اشتراک گزاری کدهای Javascript نیز استفاده نمود.این ابزار از Framework های مختلف Javascript از جمله jQuery پشتیبانی می کند. توضیحات بیشتر.
-
نقل قول: نکات و ترفند های jQuery.
بایند کردن یک Function به یک Event :
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
لیست Event ها را اینجا مشاهده بفرمایید.
-
نقل قول: نکات و ترفند های jQuery.
مجبور کردن لینک ها به باز شدن در یک 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;
});
-
نقل قول: نکات و ترفند های jQuery.
مجبور کردن لینک ها به باز شدن در Tab جدید :
jQuery('a.newTab').live('click', function(){
newwindow=window.open($(this).href);
jQuery(this).target = "_blank";
return false;
});
-
نقل قول: نکات و ترفند های jQuery.
چک کردن وضعیت فعال یا غیر فعال بودن 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
}
-
نقل قول: نکات و ترفند های jQuery.
جایگزاری همه 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();
-
نقل قول: نکات و ترفند های jQuery.
گرفتن URL صفحه جاری :
$(document).ready(function() {
var pathname = window.location.pathname;
});
-
نقل قول: نکات و ترفند های jQuery.
اجرای 5 باره ی یک تابع با یک بازه زمانی 20 ثانیه ای
var count = 0; function myFunction() { count++; if(count > 5) clearInterval(timeout); //do something } var timeout = setInterval(myFunction, 20000);
-
نقل قول: نکات و ترفند های jQuery.
افزودن یک سطر به یک جدول :
$('#myTable tr:last').after('<tr>...</tr>');
-
نقل قول: نکات و ترفند های jQuery.
گرفتن IP کاربر :
$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
alert( "Your ip: " + data.ip);
});
اگر امتحان کردید و جواب نداد :
You are accessing this page from a forbidden country.
-
نقل قول: نکات و ترفند های jQuery.
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);
-
نقل قول: نکات و ترفند های jQuery.
نقل قول:
نوشته شده توسط
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;
});
سلام
سوال :این تابع همه لینک های صفحه رو تو popup باز میکنه..؟؟
