• اسکریپت,قالب جوملا,قالب وردپرس,مرجع اسکریپت,نال شده,نال

  • تبلیغات



    موضوعات

    به پایگاه تخصصی اسکریپت پارسی زبانان خوش آمدید.
    modiranhosting




    ساخت تولتیپ خودکار با کمک جی کوئری

    ساخت تولتیپ خودکار با کمک جی کوئری

    تاریخ : چهارشنبه، 23 جولای 2014
    0دیدگاه
    نوشته:مدیر

    مدتی پیش ، یکی از دوستان سؤالی رو مطرح کرده بود که “چطور میشه حالت پیشفرض تولتیپ رو در لینک های سایتمون شخصی سازی کنیم؟ “، در پاسخ به این دوست عزیز، امروز فرصتی پیدا کردم تا با یک پست آموزشی جدید در خدمت همراهان همیشگی  اسکریپت باز باشم.

    Auto-Tooltip ساخت تولتیپ خودکار با کمک جی کوئری

    و اما بعد…

    اولین و مهمترین مرحله در انجام این کار، تعریف یک تابع جی کوئری! اما کار این تابع چیه؟!؟
    محوریت کار این تابع، گرفتن توضیحات (Description) از خاصیت (attribute) عنوان (title) یک لینک، حذف حالت پیشفرض و تعیین حالتی جدید… این عملیات رو میتونیم به راحتی با کمک جی کوئری پیاده سازی کنیم. به همین منظور، تابع زیر رو تعریف کردیم:

    JQuery

     

    
    
    $( document ).ready( function()
    {
    	var targets = $( '[rel~=tooltip]' ),
    		target	= false,
    		tooltip = false,
    		title	= false;
    
    	targets.bind( 'mouseenter', function()
    	{
    		target	= $( this );
    		tip		= target.attr( 'title' );
    		tooltip	= $( '<div id="tooltip"></div>' );
    
    		if( !tip || tip == '' )
    			return false;
    
    		target.removeAttr( 'title' );
    		tooltip.css( 'opacity', 0 )
    			   .html( tip )
    			   .appendTo( 'body' );
    
    		var init_tooltip = function()
    		{
    			if( $( window ).width() < tooltip.outerWidth() * 1.5 )
    				tooltip.css( 'max-width', $( window ).width() / 2 );
    			else
    				tooltip.css( 'max-width', 340 );
    
    			var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
    				pos_top	 = target.offset().top - tooltip.outerHeight() - 20;
    
    			if( pos_left < 0 )
    			{
    				pos_left = target.offset().left + target.outerWidth() / 2 - 20;
    				tooltip.addClass( 'left' );
    			}
    			else
    				tooltip.removeClass( 'left' );
    
    			if( pos_left + tooltip.outerWidth() > $( window ).width() )
    			{
    				pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
    				tooltip.addClass( 'right' );
    			}
    			else
    				tooltip.removeClass( 'right' );
    
    			if( pos_top < 0 )
    			{
    				var pos_top	 = target.offset().top + target.outerHeight();
    				tooltip.addClass( 'top' );
    			}
    			else
    				tooltip.removeClass( 'top' );
    
    			tooltip.css( { left: pos_left, top: pos_top } )
    				   .animate( { top: '+=10', opacity: 1 }, 50 );
    		};
    
    		init_tooltip();
    		$( window ).resize( init_tooltip );
    
    		var remove_tooltip = function()
    		{
    			tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
    			{
    				$( this ).remove();
    			});
    
    			target.attr( 'title', tip );
    		};
    
    		target.bind( 'mouseleave', remove_tooltip );
    		tooltip.bind( 'click', remove_tooltip );
    	});
    });
    
    

     

    چون یه مقدار دستورات زیاد، من دیگه تک تک خطوط رو توضیح نمیدم! فقط به این چند مورد اشاره میکنم که توابع مهم ما عبارتند از: attr (تابع پیشفرض جی کوئری) که به همراه مقدار title، وظیفه گرفتن توضیحات خاصیت یک عنوان رو داره – init_tooltip مربوط به بحث موقعیت (position) سازی – remove_tooltip هم برای این که وقتی موس رو از روی یک لینک برداشتیم، کادر تولتیپ رو مخفی کنه…

    اما یک بخش مهم دیگه در تابع بالا، تعریف یک متغیر با نام targets که مقدار خاصیت “rel=”tooltip رو (در صورت موجود بودن) میگیره و انجام کلیه توابع رو محدود به وجود این متغیر میکنه. حالا با توجه به این توضیحات، جهت استفاده از تابع بالا، تنها کافیه که خاصیت  “rel=”tooltip رو به لینک هامون اضافه کنیم. به عنوان نمونه:

    HTML

     

    <a href="#" title="بیست اسکریپت" rel="tooltip">مشاهده تولتیپ</a>

     

    توجه: یادتون باشه که برای کار کردن تولتیپ، حتما باید لینک هاتون دارای خاصیت عنوان (title) باشند.

    تا اینجا بخش مهمی از کار رو انجام دادیم، فقط چون این حالت جدید فارق از یک استایل مشخص، با استفاده از نام آی دی tooltip (که تعریفش رو در متغیر tooltip ریخته بودیم)، یک استایل زیبا رو به فرم زیر ایجاد میکنیم که شباهت زیادی به تولتیپ بوت استرپ داره:

    CSS

     

    #tooltip
    {
    	font-family: Tahoma, sans-serif;
    	font-size: 0.875em;
    	text-align: center;
    	text-shadow: 0 1px rgba( 0, 0, 0, .5 );
    	line-height: 1.5;
    	color: #fff;
    	background: #333;
    	background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .8 ) ), to( rgba( 0, 0, 0, .8 ) ) );
    	background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
    	background: -moz-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
    	background: -ms-radial-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
    	background: -o-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
    	background: linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	position: absolute;
    	z-index: 100;
    	padding: 15px;
    }
    
    #tooltip:after
    {
    	width: 0;
    	height: 0;
    	border-left: 10px solid transparent;
    	border-right: 10px solid transparent;
    	border-top-color: #333;
    	border-top: 10px solid rgba( 0, 0, 0, .8 );
    	content: '';
    	position: absolute;
    	left: 50%;
    	bottom: -10px;
    	margin-left: -10px;
    }
    #tooltip.top:after
    {
    	border-top-color: transparent;
    	border-bottom-color: #333;
    	border-bottom: 10px solid rgba( 0, 0, 0, .8 );
    	top: -20px;
    	bottom: auto;
    }
    
    #tooltip.left:after
    {
    	left: 10px;
    	margin: 0;
    }
    
    #tooltip.right:after
    {
    	right: 10px;
    	left: auto;
    	margin: 0;
    }
    
    

     

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

    فقط فراموش نکنید که کتابخانه جی کوئری هم حتما باید در قالبتون فراخوانی شده باشه.
    دوستان وردپرسی میتونن، تابع رو در یک فایل js و کدهای css رو در شیوه نامه قرار بدن.در آخر هم برای لینک هاشون خاصیت rel رو که توضیحش رو دادم تعریف کنند.

     

     

     

    دانلود
    حجم:


    تبلیغات


    خرید میزبانی وب، سرور مجازی و اختصاصی، ثبت دامنه

    آخرین ارسال ها

    نرم افزارهای ضروری

    XAMPP XAMPP
    5.6.8
    NotePad++ NotePad++
    6.8.1
    FileZilla FileZilla
    3.7.3

    تبلیغات متنی

    [DBSAdWord]
    با عضویت در خبرنامه ی ما از آخرین مطالب ما در ایمیل خود با خبر شوید