.NET Tips: افزونه جملات قصار 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 آن مهم است و در قسمت نمايش جملات قصار مورد جستجو قرار مي‌گيرد).

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

۱۳۸۷/۱۱/۱۶

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