راه حل ساده براي عكس‌هايي كه از كادر بيرون مي‌زنند

ارسال تصوير در سايت‌ها، انجمن‌ها و امثال آن هميشه مشكل زا است؛ خصوصا نمايش تصاويري در قطع يك تابلوي ديواري در يك كادر كوچك.
راه ساده و دم دستي زير، منهاي استفاده از اسكريپت‌هايي كه اندازه تصاوير را تشخيص داده و بر اين اساس خودشان آن‌ها را بند انگشتي نمايش مي‌دهند، هم براي حل اين مشكل وجود دارد:
فرض كنيد مطلبي كه قرار است ارسال شود در يك DIV نمايش داده مي‌شود و كلاس آن مثلا post-body است.
اولين كاري كه مي‌شود انجام داد اين است:
در CSS سايت قسمت مرتبط با post-body تعريف زير را اضافه مي‌كنيم تا اضافات عكس كه از كادر بيرون زده، خودبخود توسط مرورگر نمايش داده نشود:

overflow: hidden;

سپس در همين DIV كه كلاس آن post-body است، با استفاده از jQuery به دنبال تصاوير گشته و موارد يافت شده را داخل يك لينك پويا قرار مي‌دهيم (استفاده از متد wrap براي اين محصور سازي). اين لينك هم همان آدرس اصلي تصوير است. به اين ترتيب كاربر با كليك بر روي آن تصوير مي‌تواند نتيجه را در صفحه‌اي ديگر مشاهده كند:

$(document).ready(function(){  
 $('.post-body img').each(function(){
    var $img = $(this);
    var src = $img.attr("src");
    $img.attr({border:"0"}).wrap('<a target="_blank" alt="Click here to enlarge (opens new window)" title="Click here to enlarge (opens new window)" href="'+src+'" />');
 }); 
});

معرفي برنامه jQueryPad

jQueryPad برنامه‌اي است قابل حمل و كم حجم براي تمرين و همچنين آزمايش سريع اسكريپت‌هاي مبتني بر jQuery . مي‌توان در قسمت سمت چپ آن قطعه‌ كد HTML ‌ايي را نوشت و در TextBox سمت راست آن، قطعه‌ كد جاوا اسكريپتي مبتني بر jQuery . سپس با فشردن دكمه F5 بلافاصله نتيجه‌ي تركيب اين دو در پايين صفحه نمايش داده مي‌شود.

اگر نياز به استفاده از نگارش خاصي از jQuery را داشتيد مي‌توان فايل js موجود در پوشه‌ي template آن‌را تغيير داد.
كار انجام شده شبيه به برنامه‌ي LINQ-Pad است؛ البته برنامه‌ي LINQ-Pad در نگارش تجاري آن داراي intellisense هم هست.

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

با استفاده از jQuery ، تحت نظر قرار دادن ورودي‌هاي كاربران در تمام فيلدهاي ورودي صفحه كار ساده‌اي است؛ اما جايگزيني مثلا ى فارسي با ي عربي و برعكس درست در لحظه‌ي تايپ آن‌ها كار ساده‌اي نيست و هر مرورگر روش خاص خودش را دارد و بعضي‌ها هم اصلا اجازه‌ي تغيير رخدادهاي رسيده را نمي‌دهند.
اسكريپت زير كار يك دست سازي ي و ك دريافتي در صفحات وب را انجام مي‌دهد (براي مثال اگر كاربر ي تايپ كند به صورت خودكار به ى تبديل مي‌شود):

// <![CDATA[
function substituteCharInFireFox(charCode, e) {
   var keyEvt = document.createEvent("KeyboardEvent");
   keyEvt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, charCode);
   e.target.dispatchEvent(keyEvt);
   e.preventDefault();
}

function substituteCharInChrome(charCode, e) {
   //it does not work yet! /*$.browser.webkit*/
   //https://bugs.webkit.org/show_bug.cgi?id=16735
   var keyEvt = document.createEvent("KeyboardEvent");
   keyEvt.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 0, charCode);
   e.target.dispatchEvent(keyEvt);
   e.preventDefault();
}

function insertAtCaret(myValue, e) {
   var obj = e.target;
   var startPos = obj.selectionStart;
   var endPos = obj.selectionEnd;
   var scrollTop = obj.scrollTop;
   obj.value = obj.value.substring(0, startPos) + myValue + obj.value.substring(endPos, obj.value.length);
   obj.focus();
   obj.selectionStart = startPos + myValue.length;
   obj.selectionEnd = startPos + myValue.length;
   obj.scrollTop = scrollTop;
   e.preventDefault();
}

$(document).ready(function () {
   $(document).keypress(function (e) {

       var keyCode = e.keyCode ? e.keyCode : e.which;
       var arabicYeCharCode = 1610;
       var persianYeCharCode = 1740;
       var arabicKeCharCode = 1603;
       var persianKeCharCode = 1705;

       if ($.browser.msie) {
           switch (keyCode) {
               case arabicYeCharCode:
                   event.keyCode = persianYeCharCode;
                   break;
               case arabicKeCharCode:
                   event.keyCode = persianKeCharCode;
                   break;
           }
       }
       else if ($.browser.mozilla) {
           switch (keyCode) {
               case arabicYeCharCode:
                   substituteCharInFireFox(persianYeCharCode, e);
                   break;
               case arabicKeCharCode:
                   substituteCharInFireFox(persianKeCharCode, e);
                   break;
           }
       }
       else {
           switch (keyCode) {
               case arabicYeCharCode:
                   insertAtCaret(String.fromCharCode(persianYeCharCode), e);
                   break;
               case arabicKeCharCode:
                   insertAtCaret(String.fromCharCode(persianKeCharCode), e);
                   break;
           }
       }
   });
});
// ]]>

تابع substituteCharInChrome قرار است در نگارش‌هاي آتي گوگل كروم كار كند! كروم فعلا هر نوع شبيه سازي فشرده شدن كليدهاي صفحه كليد را به صفر ترجمه مي‌كند. به همين جهت از روش insertAtCaret در مورد آن استفاده شد. هر دو تابع substituteChar ذكر شده در مورد فايرفاكس و كروم و يا روش ساده IE (با توجه به اينكه keyCode در IE فقط خواندني نيست)، با اپرا كار نمي‌كنند!

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

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

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

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


مطالب مشابه:

• مشكل ي و ك فارسي و عربي در يك ديتابيس اس كيوال سرور

• يكسان سازي ي و ك دريافتي حين استفاده از NHibernate

• يكسان سازي "ي" و "ك" دريافتي در حين استفاده از Entity framework

• يكسان سازي "ي" و "ك" دريافتي در حين استفاده از WCF RIA Services

چند خبر كوتاه در مورد jQuery

• نگارش جديد جي‌كوئري (jQuery 1.4 Alpha 1) منتشر شد : + و +

• انتخاب jQuery به عنوان بهترين كتابخانه‌ي سورس باز سال 2009 از طرف مجله‌ي دات نت: +

• بهترين افزونه‌هاي jQuery سال 2009 :+

JSLint.VS

JSLint.VS افزونه‌اي است رايگان براي VS.Net2005/2008 جهت بررسي ساده‌تر مشكلات دستوري در فايل‌هاي JavaScript يك پروژه.

اكنون بجاي اينكه در مرورگر به دنبال خطاهاي گزارش شده بگرديم، مي‌توان پيش از بررسي نهايي آن‌ها، در VS.Net‌ مشكلات ممكن را يافته و برطرف ساخت.
JSLint.VS به منوي كليك راست بر روي يك فايل js اضافه مي‌شود و يا در حالت انتخاب قطعه‌اي كد و سپس كليك راست و بررسي مشكلات موجود و يا در حالت يكپارچه با امكانات build پروژه قابل استفاده است (براي يكپارچه سازي با Build بايد به منوي Tools قسمت JSLint.VS options مراجعه كرد و سپس گزينه build را درصفحه ظاهر شده تيك زد).

مشاهده پروژه JSLint.VS در سايت CodePlex

پس از دريافت آن، محتويات پوشه bin آن‌را در مسير زير كپي نمائيد:

%My Documents%/Visual Studio 2008/Addins
Or
%My Documents%/Visual Studio 2005/Addins

NiftyDotNet!

NiftyDotNet يك كنترل ASP.Net 2.0 است كه امكان ساخت قطعاتي با گوشه‌هاي گرد را به سهولت ميسر مي‌سازد. اين كنترل در حقيقت محصور كننده‌ي مجموعه Nifty Corners Cube است.

صفحه‌ي اصلي در گوگل كد
يك سري مثال كاربردي
دريافت سورس، مثالها و فايل بايناري آن از رپيدشير

مثال:
گرد كردن گوشه‌هاي div ايي با id‌ مساوي box1 كه توسط خاصيت Selectors اين كنترل مشخص شده است (اگر class اين div براي مثال مساوي cls1 بود اين مقدار مي‌بايست مساوي div.cls1 قرار مي‌گرفت؛ شبيه به روش jQuery).

<%@ Register Assembly="NiftyDotNet" Namespace="NiftyDotNet" TagPrefix="cc1" %>

   <div id="container">
       <cc1:Nifty ID="Nifty1" runat="server" CornerSize="Big" Selectors="div#box1">
       </cc1:Nifty>
       <div id="box1" style="background: #e6e6e6; color: Black; width: 18em;">
           <h1>
               NiftyDotNet</h1>
           <p>
               Just drag & drop to round!</p>
       </div>
   </div>

نمايش خودكار مقدار يكDropDownList با كمك jQuery

نياز بود هنگام انتخاب يك آيتم دراپ داون ليست در كل برنامه و تمامي دراپ داون‌هاي آن، مقدار آن‌ها نيز به صورت يك برچسب در كنار آن نمايش داده شود.
براي مثال در ليست زير:

 <asp:DropDownList ID="ddlActive" runat="server">
     <asp:ListItem Value="Active">فعال</asp:ListItem>
     <asp:ListItem Value="Inactive">غيرفعال</asp:ListItem>
 </asp:DropDownList>

اگر آيتم فعال انتخاب شد، مقدار active نيز كنار آن نمايش داده شود و الي آخر.

راه حل اول:
در تمام صفحات به ازاي تك تك دراپ داون‌ها يك label اضافه كنيم و همچنين كدهاي تمام قسمت‌هاي برنامه را نيز اصلاح كنيم تا اين مورد را لحاظ كند.

راه دوم:
يك كنترل دراپ داون سفارشي را با خاصيت مورد نظر (همراه بودن با يك ليبل) ايجاد كرده و سپس تمام فرم‌ها را بايد اصلاح كرد تا از اين كنترل جديد استفاده كنند.

راه سوم:
استفاده از jQuery براي اعمال اين مهم به كل برنامه بدون نياز به تغييرات اساسي در آن (و همچنين سازگاري با تمام مرورگرها):

   //فقط در اين محدوده
   $("#mainFormReq select").change(function() {
       var currentId = $(this).attr("id"); //آي دي شيء جاري
       var val = $(this).val();        //مقدار
       var text = $('#' + currentId + ' option:selected').text(); //متن
       $("#lbl" + currentId).remove();        //اگر نمونه‌ي قبلي موجود است حذف شود
       if (val && (val.length > 0) && (text != val)) {
           //اگر متن و مقدار يكي نيست نمايش داده شود
           $(this).after('<label id="lbl' + currentId + '">' + val + '</label>');
       }
   });

توضيحات:
در يك محدوده مشخص شده با ID مساوي mainFormReq (مثلا استفاده از master page ها و نسبت دادن اين ID به content آن)، به دنبال تمام select هاي موجود در آن ناحيه مي‌گرديم (اگر mainFormReq حذف شود، اين جستجو در كل صفحه صورت خواهد گرفت) و تغييرات آن‌ها را تحت نظر قرار خواهيم داد.
سپس آي دي اين كنترل انتخابي را دريافت مي‌كنيم (از اين ID براي توليد ID برچسب مورد نظر استفاده خواهيم كرد).
در ادامه مقدارهاي text و value گزينه انتخابي دريافت مي‌شوند (+).
سپس بررسي خواهيم كرد كه آيا برچسبي با ID مشخص شده ما وجود دارد (در صورت انتخاب آيتم‌هاي ديگر، نبايد برچسبي غير منحصربفرد و تكراري در صفحه ايجاد كرد)
در ادامه اگر اين مقدار null نبود و همچنين مقدار text و value هم يكي نبودند (اگر يكي بودند لزوم وجود اين برچسب بي معنا است)، با استفاده از متد after كتابخانه jQuery يك برچسب را توليد و مقدار مورد نظر را پس از محل نمايش دراپ داون خود، نمايش خواهيم داد.

بهبود كد:
صورت مساله: اكنون نياز است بجز ناحيه mainFormReq، به سه ناحيه ديگر نيز اين تغييرات اعمال گردد. آيا بايد همين مقدار كد را سه بار ديگر copy/paste كرد؟
روش صحيح انجام اينكار در jQuery ، نوشتن يك افزونه بر اساس كدهاي فوق است كه روش انجام آن به صورت زير مي‌باشد (+):

//<![CDATA[
(function($) {
   $.fn.dropdownlabel = function() {
       return this.change(function() {
           var obj = $(this);
           var currentId = obj.attr("id"); //آي دي شيء جاري
           var val = obj.val();        //مقدار
           var text = $('#' + currentId + ' option:selected').text(); //متن           
           $("#lbl" + currentId).remove();        //اگر نمونه‌ي قبلي موجود است حذف شود
           if (val && (val.length > 0) && (text != val)) {
               //اگر متن و مقدار يكي نيست نمايش داده شود
               obj.after('<label id="lbl' + currentId + '">' + val + '</label>');
           }
       });       
   };
})(jQuery);
//]]>

و در نهايت نحوه استفاده از آن (فايلي به نام jquery.dropdownlabel.js ) به صورت زير خواهد بود:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestDropdownlabel.aspx.cs"
   Inherits="testWebForms87.TestDropdownlabel" %>

<!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 runat="server">
   <title></title>

   <script src="jquery.min.js" type="text/javascript"></script>
   <script src="jquery.dropdownlabel.js" type="text/javascript"></script>

   <script type="text/javascript">
       $(document).ready(function() {
           $("#mainFormReq select").dropdownlabel();
       });
   </script>

</head>
<body>
   <form id="form1" runat="server">
   <div id="mainFormReq">
       <asp:DropDownList ID="ddlActive" runat="server">
           <asp:ListItem Value=""></asp:ListItem>
           <asp:ListItem Value="Active">فعال</asp:ListItem>
           <asp:ListItem Value="Inactive">غيرفعال</asp:ListItem>
       </asp:DropDownList>
   </div>
   </form>
</body>
</html>

اعمال متداول با select (يا همان DropDownList / ComboBox) توسط jQuery

در اين مقاله مروري خواهيم داشت بر نحوه‌ي انجام يك سري از اعمال متداول با استفاده از jQuery بر روي select استاندارد HTML. قبل از شروع به عنوان قالب كار، صفحه ساده‌ي زير را در نظر بگيريد كه از يك DropDownList استاندارد ASP.Net تشكيل شده است:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="select.aspx.cs" Inherits="TestJQueryAjax.select" %>

<!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 runat="server">
   <title></title>
   <script src="js/jquery.js" type="text/javascript"></script>

   <script type="text/javascript">
   //...
   </script>

</head>
<body>
   <form id="form1" runat="server">
   <asp:DropDownList ID="ddlTest" runat="server">
       <asp:ListItem Value="1">آيتم يك</asp:ListItem>
       <asp:ListItem Value="2">آيتم دو</asp:ListItem>
       <asp:ListItem Value="3">آيتم سه</asp:ListItem>
       <asp:ListItem Value="4">آيتم چهار</asp:ListItem>
       <asp:ListItem Value="5">آيتم پنج</asp:ListItem>
   </asp:DropDownList>
   </form>
</body>
</html>

1) بدست آوردن value آيتم انتخاب شده

$("#<%=ddlTest.ClientID %>").val()

2) بدست آوردن text آيتم انتخاب شده

$("#<%=ddlTest.ClientID %> option:selected").text()

3) عكس العمل نشان دادن به انتخاب آيتم‌هاي مختلف

   <script type="text/javascript">
       $(document).ready(function() {
           $("#<%=ddlTest.ClientID %>").change(function() {
               alert($("#<%=ddlTest.ClientID %>").val());
           });
       });   
   </script>

4) انتخاب يك آيتم از طريق برنامه نويسي

$("#<%=ddlTest.ClientID %>").val(2);

5) افزودن يك آيتم به ليست از طريق برنامه نويسي

$("<option value='6'>آيتم شش</option>").appendTo("#<%=ddlTest.ClientID %>");

6) خالي و حذف كردن تمامي آيتم‌ها

$("#<%=ddlTest.ClientID %>").html("");

و براي تكميل بحث مي‌توان به اين برگه مرجع مراجعه كرد:
jQuery – Select element cheat sheet

استفاده از thickbox در بلاگر

Thickbox يكي از پلاگين‌هاي jQuery است كه جهت نمايش صفحات modal بكار مي‌رود.

روش استفاده بسيار ساده‌اي هم دارد:
الف) jquery.js بايد به صفحه معرفي شود.
ب) سپس thickbox.js بايد به صفحه الحاق شود.
ج) و فايل css آن يعني thickbox.css نيز بايد به صفحه افزوده شود.

براي استفاده از آن كافي است يك لينك به صفحه اضافه كنيد كه ويژگي class آن مساوي thickbox باشد. مثلا:

<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>

TB_inline و طول و عرض و غيره، جزو خواص استاندارد اين پلاگين است. inlineId جهت معرفي id يك div در صفحه بكار مي‌رود كه قرار است محتويات آن زمانيكه روي اين لينك كليك شد به صورت modal نمايش داده شود.

<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>

و يا مانند مثال فوق مي‌تواند يك صفحه خارجي را نيز به صورت modal بارگذاري و نمايش دهد. Title بكارگرفته شده، همان عنوان صفحه Modal ما خواهد بود.
و مثال‌هاي ديگري از اين دست كه در صفحه رسمي آن موجود است و نيازي به تكرار آن‌ها نيست.

اما مشكلي كه در بلاگر وجود دارد اين است كه شما نمي‌توانيد اين ويژگي‌ها را در بسياري از موارد به صورت دستي تنظيم كنيد. يك ويجت ظاهر مي‌شود كه فقط به شما امكان ثبت يك عنوان و لينك مربوطه را مي‌دهد و همين.
براي انتساب ويژگي‌هاي thickBox به اين نوع لينك‌ها كه كنترلي روي آن نيست مي‌توان از خود jQuery كمك گرفت:

$(document).ready(function(){
  $("a[href='http://www.mysite.com/page.htm?TB_iframe=true&height=340&width=530']").each(function(){
      var obj = $(this);
      obj.attr("title","Contact me");
      obj.attr("class","thickbox");
     }).bind("contextmenu",function(e){
        return false;
    });
});

در اينجا http://www.mysite.com/page.htm?TB_iframe=true&height=340&width=530 همان صفحه‌اي كه قرار است پس از كليك بر روي لينكي منتسب به آن در صفحه به صورت modal باز شود. با استفاده از جي‌كوئري آن‌را يافته (لينكي كه href آن مساوي مقدار ياد شده است) و سپس ويژگي‌هاي title و class آن را به صورت پويا تنظيم مي‌كنيم تا توسط thickbox قابل شناسايي شود.
همچنين در اينجا كليك راست نيز بر روي اين لينك بسته شده تا كاربر فقط كليك معمولي را انجام دهد (فقط روي همين يك لينك در صفحه اعمال مي‌شود و نه كل صفحه).

رفع تداخل jQuery با كتابخانه‌هاي مشابه

قبل از شروع، يك خبر!
VsDoc for jQuery 1.3.1 (جهت فعال سازي intellisense آخرين نگارش جي كوئري در VS.Net)


اگر سعي كنيد jQuery را به همراه ساير كتابخانه‌هاي جاوا اسكريپتي ديگر به صورت همزمان استفاده كنيد (مثلا mootools يا ASP.Net Ajax و امثال آن)، احتمالا قسمتي و يا تمامي كدهاي جاوا اسكريپتي شما كار نخواهند كرد. براي مثال update panel شما در ASP.Net Ajax از كار مي‌افتد، يا كدهاي mootools شما ديگر كار نمي‌كنند. علت اينجا است كه تمامي اين كتابخانه‌ها از نشانه $ به عنوان متغيري عمومي كه بيانگر نام مستعار كتابخانه مربوطه است استفاده مي‌كنند و در نهايت تمام اين‌ها با هم تداخل خواهند كرد.

خوشبختانه jQuery امكان رفع اين تداخل را پيش بيني كرده است كه به صورت زير مي‌باشد:

<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript">
   jQuery.noConflict();
   jQuery(document).ready(function($) {
       //tip-1
       $("select > option").each(function() {
           var obj = $(this);
           obj.attr("title", obj.attr("value"));
       });
       //tip-1
   });
</script>

كد مثال فوق، به تمامي آيتم‌هاي drop down list‌ هاي شما در يك صفحه، بر اساس value هر آيتم موجود در آن‌ها، يك tooltip اضافه مي‌كند. (با IE7 به بعد و فايرفاكس سازگار است)
در اينجا ابتدا jQuery.noConflict فراخواني شده و سپس document ready متداول هم بايد اندكي مطابق كد فوق تغيير كند. مابقي كدهاي شما از اين پس نيازي به تغيير نخواهند داشت. (روش‌هاي ديگري هم براي تغيير نام $ وجود دارند كه در مستندات مربوطه قابل مشاهده است)

افزونه جملات قصار jQuery

چندي قبل مطلبي را در مورد پردازش فايل‌هاي xml با استفاده از قابليت Ajax جي كوئري نوشتم. در سايت پي‌سافت، تعدادي فايل XML از شعرا و جملات قصار و امثال آن موجود است (با تقدير و تشكر از زحمات اين عزيزان) كه امروز قصد داريم از فايل XML جملات قصار آن يك افزونه jQuery درست كنيم تا آن‌ها را به صورت اتفاقي (random) در صفحه نمايش دهد:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>XML</title>
       <script src='jquery-1.3.min.js' type='text/javascript'></script>
       <script type="text/javascript">
           var ourXml = '';
           function parseXml(xml){
               ourXml = xml; //for our timer               
               var i;
               var rnd = Math.floor(Math.random() * 130) + 1; //we have 130 entries
               for (i = 1; i < 5; i++) //M1 to M4
               {
                   $(xml).find("Ghesaar" + rnd + " > M" + i).each(function(){
                      $("#output").append($(this).text() +' ');
                   });
               }
           }
          
           //ajax loader
           $(document).ready(function(){
               $.ajax({
                   type: "GET",
                   url: "Ghesaar.xml",
                   dataType: "xml",
                   success: parseXml
               });
           });
          
           //timer
           window.setInterval(function(){
               $("#output").empty().hide();
               parseXml(ourXml);               
               $("#output").fadeIn("slow");
           }, 10000);
       </script>
   </head>
   <body>
           <span id="output" dir="rtl" style=" "/>
   </body>

</html>

توضيحات:
همه چيز از قسمت Ajax كد فوق شروع مي‌شود. فايل Ghesaar.xml بارگذاري شده و به تابع parseXml ارسال مي‌شود. در اين تابع يك كپي از xml دريافت شده را نگهداري مي‌كنيم تا در تايمري كه بعدا جهت نمايش اتفاقي پيام‌ها درست خواهيم كرد، مجبور نشويم مجددا محتويات فايل xml را بارگذاري كنيم.
در تابع parseXml قصد داريم فايل xml ايي با فرمت زير را پردازش كنيم:

  <Ghesaar10>
   <M1>نااميدى، آخرين نتيجه گيرى    </M1>
   <M2>بى خردان است</M2>
   <M3>
   </M3>
   <M4>« ضرب المثل انگليسى »</M4>
 </Ghesaar10>

براي مثال در اينجا بايد به دنبال Ghesaar10>M1 براي يافتن متن تگ M1 گشت و الي آخر. كلا چهار تگ داريم كه در يك حلقه آن‌ها را استخراج خواهيم كرد. سپس يك عدد اتفاقي بين 1 تا 130 هم توليد كرده و بجاي عدد پس از Ghesaar قرار مي‌دهيم. يعني هر بار به صورت اتفاقي يك مجموعه از جملات قصار، دريافت و پردازش خواهند شد. نهايتا اين جملات استخراج شده را به يك span با id مساوي output‌ اضافه مي‌كنيم.
تا اينجا فقط يكي از جملات قصار در هنگام بارگذاري صفحه نمايش داده خواهند شد. براي تكرار نمايش، از يك تايمر مي‌توان كمك گرفت كه كد آن‌را در بالا ملاحظه مي‌كنيد.
همين!

براي تبديل آن به يك پلاگين/افزونه جي‌كوئري ، مي‌توان به صورت زير عمل كرد:

$.fn.ghesaar = function(options){
   var defaults = {
       interval: 1
   };   
   var options = $.extend(defaults, options);
  
   return this.each(function(){
       var obj = $(this);
       var ourXml = '';
       function parseXml(xml){
           ourXml = xml; //for our timer               
           var i;
           var rnd = Math.floor(Math.random() * 130) + 1; //we have 130 entries
           for (i = 1; i < 5; i++) //M1 to M4
           {
               $(xml).find("Ghesaar" + rnd + " > M" + i).each(function(){
                   obj.append($(this).text() + ' ');
               });
           }
       }
      
       //ajax loader       
       $.ajax({
           type: "GET",
           url: "Ghesaar.xml",
           dataType: "xml",
           success: parseXml
       });
      
       //timer
       window.setInterval(function(){
           obj.empty().hide();
           parseXml(ourXml);
           obj.fadeIn("slow");
       }, options.interval * 1000);
      
   });
  

};

فرمت اين فايل ساده و استاندارد است. نام فايل jquery.ghesaar.js خواهد بود.
سپس قسمت استاندارد توسعه options اضافه مي‌شود تا بتوان به تابع افزونه خود مقدار interval را پاس كرد تا از اين حالت خشك و جمود خارج شود.
كل وقايع افزونه درون تابع زير رخ مي‌دهد:

   return this.each(function(){
...

});

اينجا همان كدهايي را كه پيشتر توسعه داديم بدون هيچ تغييري قرار مي‌دهيم.
سپس در ابتداي كار شيء this كه اشاره‌گري است به شيء انتخاب شده توسط جي‌كوئري را دريافت كرده و هرجايي را كه قبلا $("#output") داشتيم، تبديل به obj مي‌كنيم. (يعني اين مورد هم به انتخاب كاربر خواهد شد)
جهت دريافت مقدار تنظيمي interval هم مي‌توان از options.interval استفاده كرد.
به اين صورت كد ما تبديل به يك افزونه جي‌كوئري مي‌شود.

اينبار نحوه‌ي استفاده از افزونه‌ي توليدي به صورت زير است: (عدد interval بر اساس ثانيه است)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>XML</title>
       <script src='jquery-1.3.min.js' type='text/javascript'></script>
  <script src='jquery.ghesaar.js' type='text/javascript'></script>
       <script type="text/javascript">
           $(document).ready(function(){
               $("#output").ghesaar({interval:5});    
           });
          
       </script>
   </head>
   <body>
           <span id="output" dir="rtl" style=" "/>
   </body>

</html>

بهتر شد، نه؟!

به صورت ساده:
براي استفاده از آن، سه فايل jquery-1.3.min.js (يا نگارش جديدتر آن)، jquery.ghesaar.js و Ghesaar.xml را بايد آپلود كنيد. چند سطري را كه در قسمت head صفحه فوق مشاهده مي‌نمائيد بايد اضافه شوند. سپس يك span يا div را جهت نمايش اين جملات قصار به هر جايي از ساختار صفحه خود كه علاقمند بوديد اضافه كنيد (id آن مهم است و در قسمت نمايش جملات قصار مورد جستجو قرار مي‌گيرد).

فايل‌هاي اين پروژه را از اينجا دريافت كنيد.

سازگار كردن GridView با افزونه‌هاي jQuery

افزونه‌ها/پلاگين‌هاي زيادي جهت كار با table استاندارد HTML وجود دارند و خروجي رندر شده‌ي يك ASP.Net GridView هم در نهايت يك جدول است. فرض كنيد قصد داريم افزونه زير را به GridView استاندارد ASP.Net اعمال كنيم.
jQuery quickSearch plug-in

ظاهرا بدون مشكل خاصي اعمال مي‌گردد. براي مثال در هدر صفحه داريم: (شبيه به مثال موجود در سايت اصلي آن، جهت اعمال به GridView1)

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.quicksearch.js" type="text/javascript"></script>

<script type="text/javascript">
 $(document).ready(function() {
     //جستجو در جدول
 $('table#<%=GridView1.ClientID %> tbody tr').quicksearch({
         position: 'before',
         attached: 'span#attachSearch',
         labelText: 'جستجو',
         isFieldset: true,
         loaderText: ' ... ',
         fixWidths: true
     });
 });
</script>

براي اعمال بر:
(در اينجا محل قرارگيري تكست باكس مربوط به جستجو، در span ايي با id مساوي attachSearch تنظيم شده است، مي‌توانيد از ID خود GridView هم استفاده كنيد.)

<span id="attachSearch"></span>
<br />
<asp:GridView ID="GridView1" runat="server"></asp:GridView>

نكته:
1- همانطور كه در مقاله مربوط به ClientID ذكر شد، هيچ الزامي ندارد كه ID‌ مربوط به GridView‌ شما براي مثال دقيقا همان GridView1 جهت استفاده در سمت كلاينت باشد و بسته به container آن، اين نام تركيبي از ID شيء(هاي) در بر گيرنده و شيء مورد نظر مي‌باشد. به همين جهت از GridView1.ClientID استفاده گرديد تا اسكريپت ما با آن مشكلي نداشته باشد.

2- خصوصيات ظاهري افزونه فوق از سلكتور quicksearch فايل css شما دريافت مي‌شوند. براي مثال:

.quicksearch
{
width:190px;
}

مشكل!
پس از هر بار جستجو، header مربوط به GridView محو مي‌شود، اما نمونه موجود در سايت اصلي افزونه، اين مشكل را ندارد. چرا؟!
GridView‌ مربوط به ASP.Net پس از رندر شدن، جدولي است كه تگ‌هاي thead را ندارد. اگر به سورس صفحه سايت افزونه دقت نمائيد، هدر جدول با تگ‌هاي thead محصور شده است اما GridView استاندارد ASP.Net به صورت پيش فرض اين‌كار را انجام نمي‌دهد و خروجي آن چيزي شبيه به جدول زير است: (هدر با th مشخص مي‌شود و از تگ thead خبري نيست)

<table >
<tr >
          <th scope="col">col1</th>
             <th scope="col">col2</th>
             <th scope="col">col3</th>
</tr>
     <tr>
       <td>1</td>
            <td>2</td>
            <td>3</td>
</tr>
.
.
.

حداقل دو راه حل براي رفع اين مشكل وجود دارد:
الف) راه حل سمت سرور
براي اضافه كردن thead بايد كمي كد نويسي كرد. پس از اينكه گريد شما بايند شد، چند سطر زير را اضافه كنيد:

         //سازگار با افزونه‌هاي جي كوئري
         if (GridView1.Rows.Count > 0)
         {
             //This replaces <td> with <th> and adds the scope attribute
             GridView1.UseAccessibleHeader = true;

             //This will add the <thead> and <tbody> elements
             GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

             //This adds the <tfoot> element.
             //Remove if you don't have a footer row
             //GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
         }

ب)راه حل سمت كلاينت
سطر مربوط به جستجو را به صورت زير هم مي‌توان نوشت:

$('table#<%=GridView1.ClientID %> tr:has(td)').quicksearch({

در اينجا به دنبال هرچي tr كه td دارد مي‌گرديم. به صورت پيش فرض در tr مربوط به هدر گريد، ما th داريم و نه td ، بنابراين مشكل محو شدن هدر به اين صورت حل خواهد شد.

نكته:
اگر مي‌خواهيد كه ناحيه مربوط به جستجوي افزونه فوق در پرينت صفحه ظاهر نشود به css صفحه چند سطر زير را اضافه كنيد:

@media print
{
     .quicksearch
     {
         display: none;
     }
}

تمرين!
افزونه جي كوئري زير را به يك ASP.Net GridView اعمال كنيد:
table sorter

پردازش فايل‌هاي XML با استفاده از jQuery

فرض كنيد مثال دريافت اطلاعات API فيدبرنر را بخواهيم با استفاده از jQuery پياده سازي كنيم، يعني امكان برنامه نويسي سمت سرور را نداريم و مي‌خواهيم با استفاده از جاوا اسكريپت، تعداد مشتركين فيد يك سايت را نمايش دهيم.
براي مثال آدرس دريافت اطلاعات مربوط به API فيدبرنر وبلاگ جاري به صورت زير است:

https://feedburner.google.com/api/awareness/1.0/GetFeedData?id=fhphjt61bueu08k93ehujpu234

و در حالت كلي :

http://api.feedburner.com/awareness/1.0/GetFeedData?uri=<feeduri>

كه حاصل آن براي مثال يك فايل XML با فرمت زير مي‌باشد:

<rsp stat="ok">
 <feed id="fhphjt61bueu08k93ehujpu234" uri="vahidnasiri">
  <entry date="2009-01-23" circulation="153" hits="276" reach="10"/>
 </feed>
</rsp>

همانطور كه مطلع هستيد چند روزي است كه jQuery 1.3.1 ارائه شده است. جهت استفاده از آخرين نگارش موجود آن تا اين زمان، مي‌توان از گوگل به عنوان هاست اين كتابخانه به صورت زير استفاده كرد:

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

نحوه خواندن مقدار circulation فايل xml ذخيره شده بر روي كامپيوتر:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>FeedBurner API</title>
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'>
     </script>
     <script type="text/javascript">
         function parseXml(xml){
             //find every entry and print the circulation
             $(xml).find("entry").each(function(){
                 $("#output").append($(this).attr("circulation"));
             });
         }
      
         $(document).ready(function(){
             $.ajax({
                 type: "GET",
                 url: "GetFeedData_local.xml",
                 dataType: "xml",
                 success: parseXml
             });
         });
     </script>
 </head>
 <body>
     <div dir="rtl" style="font-family:tahoma; font-size:12px;">
         تعداد مشتركين تغذيه خبري سايت:
         <div id="output">
         </div>
     </div>
 </body>
</html>

با استفاده از قابليت Ajax كتابخانه jQuery ، اطلاعات فايل محلي GetFeedData_local.xml دريافت شده و محتواي آن به تابع parseXml پاس مي‌شود (توسط قسمت success). سپس در اين تابع تمام تگ‌هاي entry يافت شده و مقدار circulation آن‌ها به يك div با ID معادل output اضافه مي‌شود.
مثال فوق در مورد خواندن اطلاعات از يك فايل xml مي‌تواند براي مثال اين كاربرد را در يك سايت داشته باشد:
نمايش اتفاقي سخن روز يا سخن بزرگان و امثال آن بدون برنامه نويسي سمت سرور جهت انجام اين كار از يك فايل xml تهيه شده، بدون نياز به استفاده از ديتابيس خاصي.

تا اينجاي كار مشكلي نيست. اما همانطور كه در مطلب مقابله با حملات CSRF نيز ذكر شد، مرورگرهاي جديد امكان ارسال يا دريافت اطلاعات به صورت Ajax را بين سايت‌ها ممنوع كرده‌اند (ماجرا هم از آنجا شروع شد كه يكبار جي‌ميل اين باگ امنيتي را داشته است). بنابراين اگر شما بجاي url قسمت Ajax فوق، آدرس سايت فيد برنر را قرار دهيد با خطاي زير متوقف خواهيد شد:

Access to restricted URI denied

تمام موارد ديگري هم كه در jQuery براي دريافت اطلاعات از يك فايل يا url موجود است (مثلا تابع load يا get و امثال آن) فقط به سايت جاري و دومين جاري بايد ختم شوند در غير اينصورت توسط مرورگرهاي جديد متوقف خواهند شد.

JQuery 1.3 ارائه شد

روز قبل، نگارش رسمي و نهايي jQuery 1.3 ارائه شد و بلافاصله هم فايل مخصوص آن جهت بكارگيري intellisense ويژوال استوديو، توسط علاقمندان تهيه و عرضه گرديد.

تازه‌هاي اين نگارش:

• Sizzle : يك موتور CSS selector قدرتمند (400 درصد بهبود سرعت نسبت به عملكرد كتابخانه قبلي در اين مورد)
• بازنگري در نحوه مديريت رخدادها
• موتور تزريق HTML‌ بسيار سريع (تا 15 برابر سريعتر نسبت به كتابخانه قبلي)
• موتور بسيار سريع موقعيت يابي
• تشخيص نوع مرورگر در آن متوقف شده و بجاي آن از تشخيص ويژگي‌ها براي ماندگاري بيشتر اين كتابخانه در سال‌هاي آتي استفاده گرديده است. (بجاي بررسي userAgent ، از باگ‌هاي شناخته شده يا ويژگي‌هاي خاص، جهت تشخيص مرورگر استفاده مي‌شود تا بازه وسيعي از محصولات مشابه را بتوانند پوشش دهند)

ليست كامل اين تغييرات را در اين آدرس مي‌توانيد ملاحظه نمائيد.

• جهت مشاهده و آزمايش بهبود كارآيي اين كتابخانه لطفا به اين صفحه مراجعه كنيد. (ليست كامل اين آزمايشات در انتهاي صفحه ليست تغييرات، قابل دسترسي است)

همچنين تيم مربوطه در پي آن است تا در طي يكي دو هفته آينده، نگارش jQuery 1.3.1 را نيز بر اساس بازخوردهاي جديد جامعه برنامه نويس‌ها ارائه دهد.

مانند هميشه اين كتابخانه در دو نگارش فشرده شده (جهت استفاده در سايت‌ها) و نگارش عادي و حجيم‌تر (جهت برنامه نويسي و ديباگ كردن كدها) ارائه شده است. چون كدها در Google code هاست شده احتمالا دسترسي به آن مشكل خواهد بود. اين مجموعه را از اين آدرس مي‌توانيد دريافت كنيد.

توصيه مي‌شود از سرورهاي سريع گوگل بعنوان هاست كتابخانه جي‌كوئري سايت‌هاي خود استفاده كنيد. براي اين منظور از آدرس زير مي‌توان استفاده كرد:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

تغيير ابعاد يك TextArea با استفاده از jQuery

اگر به سايت stackoverflow دقت كنيد، اندازه textarea ايي كه كاربران امكان ارسال مطلب دارند، قابل تغيير است:

شايد براي شما جالب باشد كه بدانيد به چه صورتي اينكار را انجام داده‌اند. اينكار با استفاده از افزونه TextArea Resizer صورت گرفته است. (دريافت كتابخانه به همراه مثال)

البته حالت عمومي‌تري نيز توسط jQuery-UI استاندارد پشتيباني مي‌شود (امكان تغيير اندازه يك المان با قابليت تغيير اندازه در حالت كلي). براي مثال به صفحه‌ي ساده‌ي ASP.Net زير دقت بفرمائيد:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="testWebForms87.WebForm5" %>
<!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 runat="server">
   <title></title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>

   <script type="text/javascript">
       $(function() {
           $("#resizableArea").resizable({
               handles: "s"               
           })
  .find("textarea").height("100%").width("100%");
       });
   </script>

</head>
<body>
   <form id="form1" runat="server">
   <div id="resizableArea" style="width:300px; height:200px" >
       <asp:TextBox ID="TextBox1" runat="server"  TextMode="MultiLine" ></asp:TextBox>
   </div>
   </form>
</body>
</html>

در اينجا با استفاده از jQuery-UI ابتدا div ايي با id مساوي resizableArea پيدا مي‌شود و تابع resizable به آن اعمال مي‌گردد. سپس در اين div ، تمامي عناصر textarea موجود يافت شده و طول و عرض آن‌ها به اندازه‌ي جديد تغيير يافته div تنظيم خواهد شد. در مورد تنظيم‌هاي ديگري مانند نمايش ناحيه تغيير يافته به صورت animation مي‌توان به راهنماي آن مراجعه نمود.
براي مثال با استفاده از اين روش مي‌توان يك GridView با قابليت تغيير اندازه ايجاد كرد و امثال آن. يا براي نمونه شايد با مثال‌هايي كه به گريد نمايش داده شده اسكرول بار اضافه مي‌كنند برخورده باشيد:

<div id="resizableArea" style="overflow:auto;height:200px;">
My Grid view ...
</div>

و يا استفاده از يك پنل:

<asp:Panel ID="pnlScroll" runat="server" Width="391px" Height="282px" ScrollBars="Vertical">
My Grid view ...
</asp:Panel>

با استفاده از روش عمومي فوق، مي‌توان به اين div امكان تغيير اندازه را نيز اضافه كرد و آن‌را از حالت غيرقابل تغيير بودن خارج نمود.

نمايش خودكار آيكون لينك‌هاي سايت‌هاي خارجي با استفاده از jQuery

اگر دقت كرده باشيد در كنار هر لينك خارجي (هر لينك ختم شده به خارج از سايت) در اين وبلاگ، آيكون آن سايت هم به صورت خودكار نمايش داده مي‌شود. از نظر من جالب بوده (خصوصا جهت مشخص كردن وجود يك لينك در ميان انبوهي متن، يا براي نمايش ليستي از لينك‌ها)، نظر شما رو نمي‌دونم!
اين‌كار در ادامه‌ي مطلبي است كه در مورد نوشتن اسكريپت‌هاي گريس مانكي چندي قبل منتشر كردم. البته بهبود يافته‌ي آن است. براي ايجاد يك چنين قابليتي در سايت فقط كافي است چند سطر اسكريپت زير را به هدر سايت خود اضافه كنيد.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript' />
<script type="text/javascript">
   $(document).ready(function(){
       $("a").each(function(){
           var $a = $(this);
           var href = $a.attr("href");
           // see if the link is external 
           if (href && href.match(/^http/))
               if (!href.match(document.domain)) {
                   var domain = href.replace(/<\S[^><]*>/g, "").split('/')[2];
                   var image = '<img src="http://' + domain +
                   '/favicon.ico" width="0" ' +
                   ' onload="this.width=16;this.height=16;this.style.paddingLeft=\'3px\';this.style.paddingRight=\'1px\';" ' +
                   ' style="border:0" ' +
                   ' onerror="this.src=\'http://vahid.nasiri.googlepages.com/weblink.gif\';" />';
                   $(this).prepend(image);
               }
       });
   });
</script>

توضيحاتي در مورد جزئيات برنامه نويسي آن:
با استفاده از jQuery ، زمانيكه document ما ready شد ( document.ready )، تمام لينك‌هاي موجود در صفحه را پيدا مي‌كنيم (يك به يك). سپس مقدار href آن‌ها را مي‌خوانيم (ببينيد با jQuery انجام اين نوع كارها چقدر ساده شده است). اكنون روي لينك دريافت شده بايد پردازش صورت گيرد و نام دومين آن جدا شود (اگر ختم به خارج از سايت بود). سپس بر اساس اين دومين ، يك تگ img منتهي به آيكون آن سايت طراحي و نمايش داده خواهد شد (به قبل از لينك اضافه مي‌شود).
عموما هر پروژه‌اي هر چند كوچك و به ظاهر كم اهميت، نكات خاصي را به همراه دارد.
براي مثال، در ابتداي كار width=0 در نظر گرفته نشد. مشكلي را كه ايجاد كرد اين بود كه يك سايت ممكن است اصلا favicon.ico نداشته باشد. فايرفاكس محترم اصلا به روي مبارك هم نخواهد آورد و شما متوجه نخواهيد شد كه در صفحه كمبود تصويري وجود دارد. اما در IE حتما جاي خالي آيكون و تصوير به نحوه واضحي گوشزد مي‌شود. بنابراين در ابتداي كار قرار نيست چيزي را نمايش دهيم (width=0). سپس در رخ‌داد onload تگ img، اگر تصوير واقعا وجود داشت و بارگذاري شد، طول و عرض آن‌را 16 در 16 قرار خواهيم داد (اين مورد هم لازم است. چون بعضي از سايت‌ها اندازه‌هاي بسيار بزرگي را براي آيكون خود در نظر مي‌گيرند كه اصلا مقصود ما را برآورده نخواهند كرد).
اين مورد (عدم نمايش تصاويري كه وجود ندارند) مشكلي را كه در ادامه ايجاد خواهد كرد، عدم يكنواختي در سايت است. يك سري از لينك‌هاي خارجي آيكون دارند و يك سري خير. نكته جالبي كه در مورد تگ img وجود دارد رخ‌داد onerror آن است. اگر مرورگر نتواند تصوير مورد نظر را پيدا يا بارگذاري كند، اين روال رخ‌داد‌ گردان فراخواني مي‌شود. همينجا از موقعيت استفاده شده و src تصوير جاري به يك آيكون مشخص و از قبل تعيين شده تنظيم مي‌شود.

ويديوهاي رايگان آموزش jQuery

آموزش مقدماتي jQuery

روز 1 : مشاهده سايت اصلي، دريافت
Day 1: Downloading the Library

روز 2 : مشاهده سايت اصلي، دريافت
Day 2: Fade, Slide, and Show Methods

روز 3 : مشاهده سايت اصلي، دريافت
Day 3: The Animate Method

روز 4 : مشاهده سايت اصلي، دريافت
Day 4: Advanced Selectors

روز 5 : مشاهده سايت اصلي، دريافت
Day 5: Creating and Removing Elements

روز 6 : مشاهده سايت اصلي، دريافت
Day 6: The toggle() and toggleClass() Methods

روز 7 : مشاهده سايت اصلي، دريافت
Day 7: The hover() Methods

روز 8 : مشاهده سايت اصلي، دريافت
Day 8: User Request - Image Slides

روز 9 : مشاهده سايت اصلي، دريافت
Day 9: Resizing Text

روز 10 : مشاهده سايت اصلي، دريافت
Day 10: Intro to AJAX: Using the Load Method

روز 11 : مشاهده سايت اصلي، دريافت
Day 11: Fun Image Hovering

روز 12 : مشاهده سايت اصلي، دريافت
Day 12: Advanced Tooltips: Part 1

روز 13 : مشاهده سايت اصلي، دريافت
Day 13: Submitting Information to a Database Asynchronously

چگونه يك اسكريپت گريس مانكي بنويسيم؟

گريس مانكي يكي از افزونه‌هاي فايرفاكس است كه توسط آن مي‌توان اسكريپت‌هايي را بر روي صفحات وب در حال مشاهده، جهت تغيير آن‌ها اجرا كرد. اين نوع تغييرات بيشتر در جهت بالا بردن كارآيي يا خوانايي سايت‌ها صورت مي‌گيرد. مثلا بررسي وجود لينك‌هاي ارائه شده در يك صفحه وب (قبل از اينكه به آن‌ها رجوع كنيم، مشخص شود كه آيا وجود دارند يا خير) و هزاران مثال شبيه به اين كه در سايت اسكريپت‌هاي آن قابل دريافت هستند.
گريس مانكي به خودي خود كار خاصي را انجام نمي‌دهد و فقط ميزبان اجرايي اسكريپت‌هايي است كه براي آن تهيه شده اند. به اين اسكريپت‌ها user scripts گفته مي‌شود و جهت تهيه آن‌ها از زبان جاوا اسكريپت استفاده مي‌گردد.
مطابق اصول نامگذاري آن، فايل اين اسكريپت‌ها حتما بايد به .user.js ختم شود تا توسط افزونه گريس مانكي قابل شناسايي باشد.

اسكريپت سلام دنياي گريس مانكي!

// ==UserScript==
// @name Hello World
// @namespace http://diveintogreasemonkey.org/download/
// @description example script to alert "Hello world!" on every page
// @include *
// @exclude http://diveintogreasemonkey.org/*
// @exclude http://www.diveintogreasemonkey.org/*
// ==/UserScript==
alert('Hello world!');

فرمت كلي و آناتومي يك اسكريپت گريس مانكي مطابق چند سطر فوق است. در ابتدا نامي را كه براي اسكريپت مشخص كرده‌ايد، ذكر خواهيد نمود. سپس فضاي نام آن مشخص مي‌گردد. اين فضاي نام يك آدرس وب خواهد بود (مثلا سايت شخصي شما) . به اين طريق گريس مانكي مي‌تواند اسكريپت‌هاي هم نام را بر اساس اين فضاهاي نام مختلف مديريت كند. سپس توضيحات مربوط به اسكريپت ارائه مي‌شود. در قسمت include مشخص خواهيد كرد كه اين اسكريپت بر روي چه سايت‌ها و آدرس‌هايي اجرا شود و در قسمت exclude سايت‌هاي صرفنظر شونده را تعيين خواهيد نمود. در مثال فوق، اسكريپت بر روي تمامي سايت‌ها اجرا خواهد شد، منهاي دو سايت و زير سايت‌هايي كه در قسمت exclude مشخص شده‌اند.
در پايان مثلا نام آن‌را hello.user.js خواهيم گذاشت (همانطور كه ذكر شد قسمت user.js آن بايد رعايت شود). براي نصب آن فقط كافي است اين فايل را به درون پنجره فاير فاكس كشيده و رها كنيم (drag & drop).

استفاده از jQuery در اسكريپت‌هاي گريس مانكي

عمده كاربردهاي اسكريپت‌هاي گريس مانكي در جهت اعمال تغييرات بر روي document object model صفحه (DOM) هستند. كتابخانه jQuery اساسا براي اين منظور تهيه و بهينه سازي شده است.

مثال:
فرض كنيد قصد داريم به نتايج خروجي جستجوي گوگل، fav icon سايت‌هاي يافت شده را اضافه كنيم (در كنار هر لينك، آيكون سايت مربوطه را نمايش دهيم). گوگل اين‌كار را انجام نداده است. اما ما علاقمند هستيم كه اين قابليت را اضافه كنيم!

// ==UserScript==
// @name            Google FavIcon
// @namespace       http://userscripts.org
// @description     Shows favicon for Google searches results
// @include         http://*.google.*/search?*

// ==/UserScript==

loadJquery();

$(document).ready(function(){
   $("h3.r > a.l").each(function(){
       var $a = $(this);
       var href = $a.attr("href");
       var domain = href.replace(/<\S[^><]*>/g, "").split('/')[2];
       var image = '<img src="http://' + domain + '/favicon.ico"  style="border:0;padding-right:4px;" />';
       //GM_log(">image:> " + image);
       $(this).prepend(image);
   });

});

نحوه پياده سازي تابع loadJquery را در سورس مربوطه مي‌توانيد مشاهده نمائيد.
دريافت سورس اين مثال

در اينجا ابتدا لينك‌هاي حاصل از جستجو پيدا مي‌شوند. سپس نام دومين مربوطه استخراج مي‌گردد (با استفاده از regular expressions) و در ادامه از اين نام دومين يك آدرس استاندارد http://domain/favico.ico ساخته شده و از آن يك تگ img درست مي‌شود. در آخر اين تگ به قبل از لينك‌هاي گوگل اضافه مي‌شود.

شايد سؤال بپرسيد از كجا مشخص شد كه بايد به دنبال h3.r > a.l گشت؟ به تصوير زير دقت نمائيد (نمايي است از يكي از توانايي‌هاي افزونه fireBug فايرفاكس).

هنگاميكه صفحه بارگذاري شد، بر روي آيكون سوسك موجود در status bar فايرفاكس كليك كنيد تا FireBug ظاهر شود (البته من اينجا سوسك ديدم شايد موجود ديگري باشد :) )
سپس بر روي دكمه inspect در نوار ابزار آن كليك كنيد. در همين حال اشاره‌گر ماوس را به يكي از لينك‌هاي نتيجه جستجوي گوگل نزديك كنيد. بلافاصله تگ‌ها و كلاس‌هاي مورد استفاده آن به شكل زيبايي ظاهر خواهند شد. به اين صورت صرفه جويي قابل ملاحظه‌اي در وقت صورت خواهد گرفت.

نتيجه اجراي اسكريپت فوق (پس از نصب) به صورت زير است:

نكته: نحوه ديباگ كردن اسكريپت‌هاي گريس مانكي

اگر نياز به مشاهده مقدار متغيرها در لحظه اجراي اسكريپت داشتيد، يكي از راه‌حل‌هاي موجود استفاده از تابع GM_log مربوط به API گريس مانكي است كه خروجي آن‌را در قسمت messages مربوط به error console فايرفاكس مي‌توان ديد.

جمع آوري آمار لينك‌هاي خروجي از سايت توسط Google analytics

چندي قبل مطلب كوتاهي را در مورد Google analytics نوشتم. در حين جستجو درباره‌ي jQuery در وب، به نحوه رديابي لينك‌هاي خروجي از سايت توسط Google analytics برخوردم كه نحوه پياده سازي آن به صورت زير است.
بديهي است قبل از هر كاري بايد اسكريپت مربوط به Google analytics را به انتهاي صفحه و جايي كه تگ body بسته مي‌شود اضافه كنيد (قابل دريافت درقسمت Add Website Profile . شماره اين اسكريپت براي هر پروفايلي كه ايجاد مي‌كنيد متفاوت است).
سپس:
الف) افزودن ارجاعي از كتابخانه jQuery به هدر صفحه كه آن‌را در مطلب شمسي كردن تاريخ بلاگر ملاحظه كرديد.
ب) افزودن چند سطر زير به هدر صفحه

<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
  var $a = $(this);
  var href = $a.attr("href");

  // see if the link is external
  if ( (href.match(/^http/)) && (! href.match(document.domain)) ) {

    // if so, register an event
    var category = "outgoing";
   var event = "click";
   var label = href;

   pageTracker._trackPageview('/outgoing/' + href);
   pageTracker._trackEvent(category, event, href);  
 }
});
});
</script>

البته اگر قبلا اسكريپت شمسي كردن تاريخ بلاگر را اضافه كرده بوديد فقط محتويات تابع document.ready را بايد اضافه كنيد (جهت مشاهده نمونه اعمال شده، روي صفحه جاري كليك راست كنيد و سورس صفحه را مشاهده نمائيد).

توضيحاتي در مورد كد فوق:
اين اسكريپت به روال رخ داد گردان onclick هر لينكي كه به خارج از سايت ختم مي‌شود (مثلا لينك به يك فايل يا يك سايت خارجي (خارج از سايت))، به صورت خودكار تابع trackPageview مربوط به Google analytics را اضافه مي‌كند. اين كار تاثيري در عملكرد سايت ندارد و كاربر چيزي را متوجه نخواهد شد، اما به اين طريق لينك‌هاي خروجي در آمار Google analytics ظاهر مي‌شوند (مطابق تصاوير زير).

از اين پس آمار تمام لينك‌هاي خروجي از سايت ، متمايز شده با outgoing ، جمع آوري و نمايش داده خواهند شد.

امكانات بيشتري مانند event tracking نيز قرار است به Google analytics اضافه شود كه هنوز در مرحله آزمايشي است و بر روي تمامي اكانت‌ها فعال نشده است.

اسكريپت گريس مانكي براي تاريخ فارسي بلاگر و ايميل ياهو

پيرو مطلب قبلي كه ارسال كرده بودم، خوب اگر بلاگ‌داري اين موارد را اعمال كند، تاريخ شمسي را به وبلاگ خودش اضافه كرده است. اما در مورد ديگران چطور؟ براي اين منظور، اسكريپت مطلب ارسالي را به يك اسكريپت گريس مانكي تبديل كردم كه به‌عنوان افزونه‌اي در فايرفاكس نصب خواهد شد و تمامي وبلاگ‌هاي بلاگري را پوشش مي‌دهد (حتي آنهايي كه در آدرسشان بلاگر يا بلاگ اسپات نيست).

نحوه استفاده: (همانند روش عنوان شده در اين مطلب)

• گريس مانكي را نصب كنيد

• سپس به صفحه زير مراجعه كرده و بر روي دكمه install‌ در بالاي صفحه كليك نمائيد.

Persian Date for Blogger

همچنين ستون تاريخ انگليسي ايميل‌هاي ياهو را هم به تاريخ شمسي تبديل كردم كه جزئي از اين مجموعه است (با قالب كلاسيك ايميل ياهو (نه اين قالب جديد) درست كار مي‌كند).

مزاياي اين روش:

• بلاگ‌دار لازم نيست چيزي را نصب كند.
• تمام بلاگ‌هاي مربوط به بلاگر (در دومين و خارج از دومين آن) تحت پوشش قرار مي‌گيرند.
• سريع است. (چون يكبار بر روي مرورگر شما نصب شده است و هيچ فايلي قرار نيست از اينترنت دريافت شود)

شايان ذكر است كه گريس مانكي در مرورگرهاي ديگر هم پشتيباني مي‌شود.

پ.ن.
اگر علاقمند به برنامه نويسي اسكريپت‌هاي گريس مانكي هستيد، كتابچه‌اي رايگان در اين باره را از اين آدرس مي‌توانيد دريافت نمائيد.