هایپر سورس

مرجع کاربردی برنامه نویسان ایـــرانی

ارتباط با ما

ارسال
دانلود ابزار tooltip برای وبسایت و وبلاگ ها و آموزش استفاده
ابزار تول تیپ برای وبلاگها و وبسایت ها

همان tooltip ای که در همین سایت مورد استفاده قرار گرفته شده است

که با این شکل است کافی است موس خود را بر روی این متن قرار دهید



نحوه استفاده از این Tooltip ساده است

فقط کافی است بر روی هر تگی که میخواهید تول تیپ به نمایش در آید یک خاصیت _title اضافه و متن خود را درون ان اضافه کنید

گفتنی است این خاصیت مقادیر html نیز میپذیرد

برای مثال میخواهیم بر روی تگ span این ابزار نمایش داده شود :



<span _title="this is hypersource tooltip"> My Text</span>



برای فعال شدن این ابزار برای وبلاگ و یا وبسات شما کافی است کد زیر را در بخش هدر سایت یعنی بین تگ ها <head> قرار دهید  داخل تگ <script>

$(document).ready(function(){

// HyperSOurce Tooltip Start

$('[_title]').mousemove(function (e) {

        var text = $(this).attr('_title');

        $('.NormalTool').show().html(text).css({ top: e.clientY + 10, left: e.clientX + 15 });

    }).mouseout(function () {

        $('.NormalTool').hide();

        $(this).fadeTo(100, 0.7);

    });

});

همچنین باید Jquery را هم در سایت خود داشته باشید

در صورتی که ندارید کد زیر را در بالای این کد قرار دهید
<script src="http://wwwHypersource.ir/js/jquery-2.0.3.min.js"></script>



در پایان درون تگ Head تگ<style> را ایجاد کرده و استایل زیر را داخل ان کپی کنید :



><style>/*HyperSource ToolTip Style*/

.NormalTool { background-position: left center;width: auto;max-width: 320px; height: auto; max-height: 220px; padding: 14px; background-color: rgba(0,0,0,0.7); display: none; position: fixed; z-index: 999999; color: white; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; background-image: url('../Image/Help.png'); background-repeat: no-repeat; padding-left:29px; text-align:right; direction:rtl; }

</style>




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

چگونه میتوانم این محصول را با تخفیف دریافت نمایم ؟

  • 1) اگر عضو سایت باشید، 5% تخفیف در محصول اعمال میشود (برای اعمال شدن این مورد میبایست وارد حساب کاربری خود شوید)
  • 2) اگر موجودی حساب شما بالاتر از 1,000 تومان باشد، 10% تخفیف بر روی محصول اعمال خواهد شد (این مبلغ برای این محصول میباشد)
  • 3) در صورتی که در سایت به عنوان کاربر نویسنده باشید و حداقل 3 پست داشته باشید، 5% تخفیف اعمال خواهد شد
  • مشاهده وضعیت تخفیف ها برای این محصول
  • در صورتی که تمامی شرایط بالا را داشته باشید میتوانید این محصول را باقیمت 0 تومان دریافت نمایید.
  • همچنین میتوانید با وارد کردن کد تخفیف، از میزان تخفیف کد و شرایط بالا بصورت همزمان استفاده کنید

بستن
در صورتی که سوالی راجع به این آموزش دارید در بخش نظرات همین پست مطرح و از ارسال ان از بخش ارتباط با ما خود داری نمائید

ddd پاسخ

11s
هم اکنون نـــظر بدهید

HyperSourCe.ir

info@hypersource.ir

کلیه حقوق برای وب سایت هایپر سورس محفوظ است
CopyRight ©2014-2018
double click for close / دوبار کلیک برای بستن پنجره

لطفا منتظر بمانید. . .

پیام سیستم