آموزش ساخت پلاگین توضیحات(Tooltip)

آموزش ساخت پلاگین توضیحات(Tooltip)

در این آموزش ما به شما نحوه ساخت توضیحات یک کلمه به صورت Tooltip رو آموزش می دهیم.همانطور که میدانید Tooltip به عنوان راهنمای یک کاربر در مورد یک کلمه،آیکون یا هر چیزی که مدیر سایت لازم میبیند تا در مورد آن اطلاعات بیشتری به کار بدهد.خوب کاری که ما در این آموزش میکنیم این است که یک شکل فانتزی و جالب به Tooltip ها می دهیم که در بالای هر کلمه مورد نظر ظاهر می شود.

برای مشاهده لینک وارد شود

خوب همانطور که میدانید این قابلیت در خود HTML وجود دارد که به شکل ساده یک Tooltip را به نمایش در می آورد مثل نمونه کد زیر:

<a href="http://tutorialzine.com/" class="blue" title="Go to Tutorialzine">Tutorialzine</a>

و کد جی کوئری ما آن را به شکل زیر تبدیل می کند:

<a class="blue colorTipContainer" href="http://8np.it/">BNP
<span class="colorTip" style="margin-left: -60px;">Go to BNP
<span class="pointyTipShadow"></span>
<span class="pointyTip"></span>
</span>
</a>

CSS

برای به نمایش در آوردن Tooltip های رنگی شما نیاز دارید تا استایل های خود را به کد HTML خود وارد نمایید.

<link rel="stylesheet" type="text/css" href="colortip-1.0/colortip-1.0-jquery.css"/>

قطعه کد زیر انواع موقعیت و رنگ Tooltip ها را مشخص می کند که شما میتونید هر چندتا خواستید به آنها اضافه کنید که ما در این جا ۶ رنگ را تعریف کردیم که به دلیل سادگی نیاز به توضیح ندارند.

.colorTipContainer{
    position:relative;
    text-decoration:none !important;
}

.colorTip{
    /* This class is assigned to the color tip span by jQuery */

    display:none;
    position:absolute;
    left:50%;
    top:-30px;
    padding:6px;

    background-color:white;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-style:normal;
    line-height:1;
    text-decoration:none;
    text-align:center;
    text-shadow:0 0 1px white;
    white-space:nowrap;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

.pointyTip,.pointyTipShadow{
    /* Setting a thick transparent border on a 0x0 div to create a triangle */
    border:6px solid transparent;
    bottom:-12px;
    height:0;
    left:50%;
    margin-left:-6px;
    position:absolute;
    width:0;
}

.pointyTipShadow{
    /* The shadow tip is 1px larger, so it acts as a border to the tip */
    border-width:7px;
    bottom:-14px;
    margin-left:-7px;
}

/* ۶ Available Color Themes */

.white .pointyTip{ border-top-color:white;}
.white .pointyTipShadow{ border-top-color:#ddd;}
.white .colorTip{
    background-color:white;
    border:1px solid #DDDDDD;
    color:#555555;
}

.yellow .pointyTip{ border-top-color:#f9f2ba;}
.yellow .pointyTipShadow{ border-top-color:#e9d315;}
.yellow .colorTip{
    background-color:#f9f2ba;
    border:1px solid #e9d315;
    color:#5b5316;
}

.blue .pointyTip{ border-top-color:#d9f1fb;}
.blue .pointyTipShadow{ border-top-color:#7fcdee;}
.blue .colorTip{
    background-color:#d9f1fb;
    border:1px solid #7fcdee;
    color:#1b475a;
}

.green .pointyTip{ border-top-color:#f2fdf1;}
.green .pointyTipShadow{ border-top-color:#b6e184;}
.green .colorTip{
    background-color:#f2fdf1;
    border:1px solid #b6e184;
    color:#558221;
}

.red .pointyTip{ border-top-color:#bb3b1d;}
.red .pointyTipShadow{ border-top-color:#8f2a0f;}
.red .colorTip{
    background-color:#bb3b1d;
    border:1px solid #8f2a0f;
    color:#fcfcfc;
    text-shadow:none;
}

.black .pointyTip{ border-top-color:#333;}
.black .pointyTipShadow{ border-top-color:#111;}
.black .colorTip{
    background-color:#333;
    border:1px solid #111;
    color:#fcfcfc;
    text-shadow:none;
}

jQuery

ابتدا شما کتابخانه های مربوط به جی کوئری را به کد HTML خود وارد کنید.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

خوب در زیر میتونید کد مربوط به جی کوئری را مشاهده کنید

(function($){
    $.fn.colorTip = function(settings){

        var defaultSettings = {
            color		: 'yellow',
            timeout		: ۵۰۰
        }

        var supportedColors = ['red','green','blue','white','yellow','black'];

        /* Combining the default settings object with the supplied one */
        settings = $.extend(defaultSettings,settings);

        /*
        *	Looping through all the elements and returning them afterwards.
        *	This will add chainability to the plugin.
        */

        return this.each(function(){

            var elem = $(this);

            // If the title attribute is empty, continue with the next element
            if(!elem.attr('title')) return true;

            // Creating new eventScheduler and Tip objects for this element.
            // (See the class definition at the bottom).

            var scheduleEvent = new eventScheduler();
            var tip = new Tip(elem.attr('title'));

            // Adding the tooltip markup to the element and
            // applying a special class:

            elem.append(tip.generate()).addClass('colorTipContainer');

            // Checking to see whether a supported color has been
            // set as a classname on the element.

            var hasClass = false;
            for(var i=0;i<supportedColors.length;i++)
            {
                if(elem.hasClass(supportedColors[i])){
                    hasClass = true;
                    break;
                }
            }

            // If it has been set, it will override the default color

            if(!hasClass){
                elem.addClass(settings.color);
            }

وقتی شما پلاگین را فراخوانی می کنید ،رنگ مورد نظر و همچنین محو شدن Tooltip بعد از کشیدن موس از روی آن را اجرا می کند.شما میتونید یکی از ۶ تم مورد نظر را به دلخواه اعمال کنید.

  // On mouseenter, show the tip, on mouseleave set the
            // tip to be hidden in half a second.

            elem.hover(function(){

                tip.show();

                // If the user moves away and hovers over the tip again,
                // clear the previously set event:

                scheduleEvent.clear();

            },function(){

                // Schedule event actualy sets a timeout (as you can
                // see from the class definition below).

                scheduleEvent.set(function(){
                    tip.hide();
                },settings.timeout);

            });

            // Removing the title attribute, so the regular OS titles are
            // not shown along with the tooltips.

            elem.removeAttr('title');
        });

    }

    /*
    /	Event Scheduler Class Definition
    */

    function eventScheduler(){}

    eventScheduler.prototype = {
        set	: function (func,timeout){

            // The set method takes a function and a time period (ms) as
            // parameters, and sets a timeout

            this.timer = setTimeout(func,timeout);
        },
        clear: function(){

            // The clear method clears the timeout

            clearTimeout(this.timer);
        }
    }

در بخش دوم کد ما رویداد های مربوط به موس را به هم متصل کردیم .

   /*
    /	Tip Class Definition
    */

    function Tip(txt){
        this.content = txt;
        this.shown = false;
    }

    Tip.prototype = {
        generate: function(){

            // The generate() method returns either a previously generated element
            // stored in the tip variable, or generates and saves it in tip for
            // later use, after which returns it.

            return this.tip || (this.tip = $(''+this.content+
                                             ''));
        },
        show: function(){
            if(this.shown) return;

            // Center the tip and start a fadeIn animation
            this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
            this.shown = true;
        },
        hide: function(){
            this.tip.fadeOut();
            this.shown = false;
        }
    }

})(jQuery);

در کد آخر ما کلاس tip را تعریف کردیم که کار نمایش،هاید کردن و مقدار دهی اولیه Tooltipها را بر عهده دارد و در آخر هم ما پلاگین را فراخوانی می کنیم و Tooltip ها را به تمام لینک های موجود در متن مورد نظر اعمال می کنیم.

$(document).ready(function(){

    /* Adding a colortip to any tag with a title attribute: */

    $('[title]').colorTip({color:'yellow'});

});

شما میتونید سوالات مریوط به همین پلاگین را با ارسال نظرات از ما بپرسید.

پایان

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


سه + 8 =