تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


رویداد ( ) 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> 

 

 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین