آموزش jquery رویداد focusin قسمت دهم

رویداد ( ) focusin در jQuery :
رویداد focusin زمانی اتفاق می افتد که یک عنصر فرزند ( عنصری که در درون یک عنصر دیگر قرار گرفته است )، فوکوس برنامه را به دست آورد . عنصری که در هر لحظه انتخاب شده و تمرکز برنامه بر روی آن است ، فوکوس برنامه را در اختیار دارد . دقت کنید که برای رخ دادن این رویداد ، باید یک عنصر فرزند فوکوس را به دست آورد و نه خود عنصر . بدیهی است این رویداد در مورد تگ هایی که عنصر فرزند ندارند ، اجرا نمی شود .
برای مثال فرض کنید که یک تگ < div > طراحی کرده ایم که در درون آن دو کادر متن قرار دارد . زمانی که هر کدام از کادرهای متین درون آن ، فوکوس برنامه را به دست آورد ، این رویداد اتفاق می افتد .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax     $ ( " selector " ).focusin ( function ( ) { ... some code ... } ;

syntax توضیح

selector- selector کنترل یا عنصری است که یک عنصر فرزند آن فوکوس برنامه را به دست می آورد .  
( ) function- این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .  

مثال :

$ ( " #div_1 " ).focusin ( function ( ) { ... some code } ; 

در چند مثال سعی می کنیم تا استفاده از رویداد focusin را در عمل به شما نمایش دهیم .
مثال : در مثال اول یک تگ < div > داریم که دو عدد کادر متن به عنوان عنصر فرزند در درون آن قرار گرفته است . کدی طراحی کرده ایم که با اجرای آن ، در هنگامی که یکی از کادرهای متن کنترل فوکوس برنامه را به دست آورد ، رنگ پس زمینه کنترل مادر یعنی تگ < div > تغییر می کند . برای مشاهده خروجی هر کدام از کادر های متن را انتخاب کنید :

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
       $ (document). ready ( function( ) {
         $ (" #div_1 ") . focusin ( function( ){
           $ ( this ) . css( " background-color " , " Gray " );
           });
         }); 
     </script> 
   </head>
 <body>
   <div id="div_1" style="border: 1px solid black ; padding : 10px" >
      Name : < input type="text" id="Text1" size="10" />
      Family : < input type="text" id="Text2" size="10" />  
   < div >
 </body>
 </html> 

مثال 2 : در مثال دوم همان مثال اول را تکرار کرده ایم با این تفاوت که در این مورد ، با بدست آوردن فوکوس برنامه توسط هر یک از کادر های متن ، فونت نوشته عنصر مادر یعنی تگ div به صورت bold در می آید .

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
       $ (document). ready ( function( ) {
         $ (" #div_2 ") . focusin ( function( ){
           $ ( this ) . css( " font-weight " , " bold " );
           });
         }); 
     </script> 
   </head>
 <body>
   <div id="div_2" style="border: 1px solid black ; padding : 10px" >
      Name : < input type="text" id="Text3" size="10" />
      Family : < input type="text" id="Text4" size="10" />  
   < div >
 </body>
 </html> 

رویداد ( ) hover در jQuery :
رویداد ( ) hover ، دو تابع را تعیین می کند که در هنگام عبور موس از روی عنصر مورد نظر ، اجرا می شوند .  تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در هنگام خروح عنصر از روی عنصر اجرا می شود .
این رویداد هر دو رویداد mouseenter و mouseleave را فعال می کند .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax     $ ( " selector " ).hover ( inFunction , outFunction ) ;

syntax توضیح
selector- selector ، تعیین کننده id عنصری است که می خواهیم رویداد ( ) hover در هنگام عبور از روی آن اتفاق بیفتد . 

inFunction-این تابع زمانی اتفاق می افتد که رویداد mouseenter رخ می دهد . یعنی زمانی که موس بر روی عنصر مورد نظر وارد می شود .
outFunction -این تابع زمانی اتفاق می افتد که رویداد mouseleave رخ می دهد . یعنی زمانی که موس از روی عنصر مورد نظر خارج می شود .

نکته مهم : اگر فقط یک تابع در دستور رویداد ( ) hover تعیین شود ، این تابع برای هر رویداد اجرا می شود .

در چند مثال سعی می کنیم تا استفاده از رویداد  ( ) hover  را در عمل به شما نمایش دهیم .
مثال : در مثال زیر یک پاراگراف داریم که برای رویداد ( ) hover آن دو تابع را تعریف کرده ایم ، که در هنگام وارد شدن و خارج شدن موس از روی پاراگراف مثال ، رنگ پس زمینه آن را تغییر می دهد :

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
           $(document).ready(function(){
                $("p").hover(function(){
                        $("p").css("background-color","yellow");
                        },function(){
                       $("p").css("background-color","pink");
                   });
                }); 
     </script> 
   </head>
 <body>
     < p id="p1" > ! موس را بر روی پاراگراف حرکت دهید < /p >  
 </body>
 </html> 

 رویداد ( ) mousedown در jQuery :
رویداد mousedown زمانی اتفاق می افتد که دکمه سمت چپ موس را بر روی عنصر مورد نظر فشار دهید .
رویداد mousedown می تواند دو کار را انجام دهد :

باعث رخ دادن رویداد mousedown برای عنصر مورد نظر می شود . شکل استفاده از این حالت به صورت زیر است :

 $ ( " selector " ).mousedown ( ) ; 

مثال : در مثال زیر عبور موس از روی تگ div ، باعث رخ دادن رویداد mousedown کنترل button می شود . همانند این است که دکمه موس را بر روی دکمه فرمان button فشار دهید . برای مشاهده عملکرد مثال ، موس را بر روی تگ div ببرید :

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
        $(document).ready(function(){
            $("button").mousedown(function( ){   $("p").slideToggle( );    });
            $("div").mouseover(function( ){  $("button").mousedown( );    });
                                                        });
     </script> 
   </head>
 <body>
     <p>This is a paragraph.</p>
     <button>Toggle</button><br><br>
     <div>mouse over this text to trigger the mousedown event for the button above.</div>
 </body>
 </html> 

یا باعث اجرا شدن تابع یا دستوری در هنگام فشرده شده دکمه موس بر روی عنصر مورد نظر می شود . شکل استفاده از این حالت به صورت زیر است :

$ ( " selector " ).mousedown ( functoin ) ;

مثال : در مثال زیر فشار دادن دکمه موس بر روی تگ div در خروجی مثال ، باعث اضافه شدن یک پاراگراف به انتهای مثال می شود :

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
          $(document).ready(function(){
              $("div").mousedown(function(){
                      $(this).after("<p>Mouse button pressed down.</p>");
                      });
                });;
     </script> 
   </head>
 <body>
     <div> Press down the mouse button over this div element.</div>
 </body>
 </html> 

 رویداد ( ) mouseup در jQuery :
رویداد mouseup زمانی اتفاق می افتد که دکمه فشرده  شده موس را بر روی عنصر مورد نظر ، رها دهید .
رویداد mouseup می تواند دو کار را انجام دهد :
باعث رخ دادن رویداد mouseup برای عنصر مورد نظر می شود . شکل استفاده از این حالت به صورت زیر است :

 Syntax     $ ( " selector " ).mouseup ( ) ;

مثال : در مثال زیر عبور موس از روی تگ div ، باعث رخ دادن رویداد mouseup کنترل button می شود . همانند این است که دکمه موس را بر روی دکمه فرمان button فشار داده و رها نمایید . برای مشاهده عملکرد مثال ، موس را بر روی تگ div ببرید :

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
        $(document).ready(function(){
            $("button").mouseup(function( ){   $("p").slideToggle( );    });
            $("div").mouseover(function( ){  $("button").mouseup( );    });
                                                        });
     </script> 
   </head>
 <body>
     <p>This is a paragraph.</p>
     <button>Toggle</button><br><br>
     <div>mouse over this text to trigger the mouseup event for the button above.</div>
 </body>
 </html> 

2- یا باعث اجرا شدن تابع یا دستوری در هنگام فشرده شدن دکمه موس بر روی عنصر مورد نظر و پس از رها کردن آن می شود . شکل استفاده از این حالت به صورت زیر است :

$ ( " selector " ).mouseup ( functoin ) ;

مثال : در مثال زیر فشار دادن دکمه موس و سپس رها کردن آن بر روی تگ div در خروجی مثال ، باعث اضافه شدن یک پاراگراف به انتهای مثال می شود :

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
          $(document).ready(function(){
              $("div").mouseup(function(){
                      $(this).after("<p>Mouse button pressed down.</p>");
                      });
                });;
     </script> 
   </head>
 <body>
     <div> Press down the mouse button over this div element.</div>
 </body>
 </html> 

نمونه هایی شبیه به این بسیار زیاده که امیدوارم خودتون با کمک این آموزش بتونید به خواستتون برسید

پیروز باشید

نمونه ای از آخرین کارهای ما

آموزش jquery رویداد focusin قسمت دهمReviewed by Goolexacom on Mar 24Rating: 5.0آموزش jquery رویداد focusinآموزش jquery رویداد focusin

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت