در این مطلب آموزشی قصد داریم طریقه ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری jQuery رو از سایت سورس باران آموزش بدیم. کسانی که با Javascript و jQuery و … کار کرده باشند با رویدادهای click و dblclick آشنا هستند. رویداد click زمانی اتفاق میوفته که کاربر یکبار روی عنصر مورد نظر کلیک کنه. رویداد dblclick زمانی اتفاق میوفته که کاربر روی عنصر مورد نظر دو بار کلیک کنه. گاهی اوقات برام پیش اومده که بخوام وقتی کاربر روی عنصری سه بار کلیک کرد ، رویدادی اتفاق بیوفته. اما چنین رویدادی از قبل تعریف نشده و یا خودمون باید براش برنامه بنویسیم یا از برنامه هایی که دیگران نوشتن استفاده کنیم. آموزش کامل ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری jQuery در ادامه مطلب موجود می باشد.
جهت مشاهده آموزش ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری jQuery به ادامه مطلب مراجعه نمایید.
دمو
در این دمو سه مربع به رنگهای قرمز و سبز و آبی موجوده که به ترتیب روی آنها عنصر 1 و عنصر 2 و عنصر 3 نوشته شده. با سه بار کلیک بر روی هر کدام از این عناصر ، جمله ای در مستطیل سیاه رنگ پایینی نوشته میشه. دقت کنید که باید این سه کلیک را پشت سر هم انجام بدین و بین اونا نباید زیاد فاصله زمانی باشه. بطور پیش فرض کاربر باید این سه کلیک رو در مدت 1 ثانیه انجام بده. این زمان رو میشه کم و زیاد کرد. در این مورد توضیح خواهم داد.
ابتدا کدهای HTML :
<body> <div id="one">عنصر 1</div> <div id="two">عنصر 2</div> <div id="three">عنصر 3</div> <pre id="debug"></pre> </body>
سه تا Div همون مربع ها هستن و اون تگ pre هم نتایج رو نشون میده.
کدهای CSS :
div { width: 100px; height: 100px; margin: 20px; float: left; padding: 10px; font-weight: bold; } #one { background: #f00; } #two { background: #0f0; } #three { background: #00f; } #debug { clear: both; background: #000; color: #fff; width: 100%; display: block; margin-top: 2em; min-height: 100px; padding-bottom: 1em; font-family: monospace; }
تا اینجا ظاهرشو ساختیم. مرحله بعد اینه که کتابخانه jQuery رو به سندمون اضافه کنیم. برای این کار به صورت زیر عمل کنید :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
خب در مرحله بعد یه فایل جاوااسکریپت به نام tripleclick.js ایجاد کنید و کدهای زیر رو درونش قرار بدین :
// @author Rich Adams <rich@richadams.me> // Implements a triple-click event. Click (or touch) three times within 1s on the element to trigger. ;(function($) { // Default options var defaults = { threshold: 1000, // ms } function tripleHandler(event) { var $elem = jQuery(this); // Merge the defaults and any user defined settings. settings = jQuery.extend({}, defaults, event.data); // Get current values, or 0 if they don't yet exist. var clicks = $elem.data("triclick_clicks") || 0; var start = $elem.data("triclick_start") || 0; // If first click, register start time. if (clicks === 0) { start = event.timeStamp; } // If we have a start time, check it's within limit if (start != 0 && event.timeStamp > start + settings.threshold) { // Tri-click failed, took too long. clicks = 0; start = event.timeStamp; } // Increment counter, and do finish action. clicks += 1; if (clicks === 3) { clicks = 0; start = 0; event.type = "tripleclick"; // Let jQuery handle the triggering of "tripleclick" event handlers if (jQuery.event.handle === undefined) { jQuery.event.dispatch.apply(this, arguments); } else { // for jQuery before 1.9 jQuery.event.handle.apply(this, arguments); } } // Update object data $elem.data("triclick_clicks", clicks); $elem.data("triclick_start", start); } var tripleclick = $.event.special.tripleclick = { setup: function(data, namespaces) { $(this).bind("touchstart click.triple", data, tripleHandler); }, teardown: function(namespaces) { $(this).unbind("touchstart click.triple", data, tripleHandler); } }; })(jQuery);
همونطور که در خط 9 میبینین مقدار پیش فرض threshold برابر با 1000 میلی ثانیه هست. یعنی کاربر باید 3 تا کلیکشو در طول 1000 میلی ثانیه یا 1 ثانیه انجام بده. این مقدار قابل تغییر دادن هست که در انتها در موردش توضیح میدم.
بعد از اینکار باید این فایلی که درست کردین رو به سندتون اضافه کنین. دقت کنین که کد زیر رو باید بعد از خطی قرار بدین که jQuery رو قرار دادین.
<script src="tripleclick.js" type="text/javascript"></script>
تا اینجا بیشتر کارامونو انجام دادیم. حالا باید از پلاگینی که قرار دادیم استفاده کنیم. به دو صورت میتونین از اون استفاده کنین که تقریبا با هم فرقی ندارن و با هم کدوم که راحت تر بودین ، از اون استفاده کنین :
روش اول :
$("#element").bind("tripleclick", function() { // Actions });
روش دوم :
$("#element").on("tripleclick", function() { // Actions });
میبینید که دو روش همه چیزشون شبیه به هم هست ، با این تفاوت که در اولی از bind استفاه شده و در دومی از on. اگر با نحوه ی کار کرد on و bind آشنا نیستین میتونین در گوگل سرچ کنید. من در اینجا روش اول رو مقداری براتون توضیح میدم. ابتدا باید به وسیله ی $(“#element”) عنصر مورد نظرتون رو انتخاب ( Select ) کنید. در قسمت بعدی از تابع bind استفاده شده. اگه بخوام بطور ساده کارکردشو براتون بگم ، اینه که مشخص میکنه هر وقت رویدادی اتفاق افتاد ، تابعی اجرا بشه و دستورات درون اون خونده بشه و انجام بشه. در اینجا tripleclick نوشتیم. یعنی هر وقت سه بار کلیک شد ، اون تابع و کدهاش باید انجام بشن. در قسمت Actions هم ، کدهایی که میخوایم اجرا بشن رو قرار میدیم.
حالا برای اینکه اون مقدار پیش فرض Threshold رو تغییر بدیم باید به صورت زیر عمل کنیم :
$("#element").on("tripleclick", { threshold: 2000 }, function() { // Actions });
در اینجا ما Threshold رو برابر با 2000 میلی ثانیه ( 2 ثانیه ) قرار دادیم. یعنی اینکه کاربر میتونه در مدت 2 ثانیه سه بار کلیکشو انجام بده. اگه بیشتر از 2 ثانیه طول بکشه ، اون کدها اجرا نمیشن.
خب اینم از نحوه ی استفاده از این پلاگین.حالا بریم و کدهامونو کامل کنیم. برای این کار باید در فایل HTML خودمون بعد از قرار دادن jQuery و tripleclick.js کدهای زیر رو قرار بدین :
<script type="text/javascript"> // Usage $(function() { $("#one").bind("tripleclick", function() { $("#debug").append("\nروی عنصر 1 ، سه بار کلیک شد"); }); $("#two").on("tripleclick", function() { $("#debug").append("\nروی عنصر 2 ، سه بار کلیک شد"); }); $("#three").on("tripleclick",{ threshold: 5000 }, function() { $("#debug").append("\nروی عنصر 3 ، سه بار کلیک شد"); }); }); </script>
برای تازه شدن دیر نیست،موفق و پیروز باشید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۰ شهریور ۱۳۹۳
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
عالی بود خیلی دنبال چنین چیزی بودم