آموزش ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری jQuery

1 دیدگاه

آموزش جی کوئری

در این مطلب آموزشی قصد داریم طریقه ساخت پلاگینی برای ایجاد رویداد سه بار کلیک در جی کوئری 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>

<body>

</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;
}

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>

1	<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);

// @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>

1	<script src="tripleclick.js" type="text/javascript"></script>

تا اینجا بیشتر کارامونو انجام دادیم. حالا باید از پلاگینی که قرار دادیم استفاده کنیم. به دو صورت میتونین از اون استفاده کنین که تقریبا با هم فرقی ندارن و با هم کدوم که راحت تر بودین ، از اون استفاده کنین :

روش اول :

$("#element").bind("tripleclick", function()
{
    // Actions
});

$("#element").bind("tripleclick", function()

{

// Actions

});

روش دوم :

$("#element").on("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
});

$("#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>

// 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>

برای تازه شدن دیر نیست،موفق و پیروز باشید.

سورس باران دات کام

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی