هایپر سورس

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

دانلود ابزار 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>




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

توجه :

بنا به درخواست کاربران عزیز وبسایت، گروه برنامه نویسی و طراحی راه اندازی کردیم که امیدواریم جایی برای به اشتراک گذاشتن دانسته ها،تجارب برنامه نویسی و طراحی کاربران باشد.
جهت عضویت اینجا در گروه اینجا کلیک کنید .


نام محصول : دانلود ابزار tooltip برای وبسایت و وبلاگ ها و آموزش استفاده خرید
قیمت : 0 تومان بعد از پرداخت به صفحه دانلود هدایت خواهید شد
اگر میخواهید لینک دانلود را در ایمیل خود نیز داشته باشید ، ادرس ایمیلتان را هم وارد نمائید

    
در صورتی که سوالی راجع به این آموزش دارید در بخش نظرات همین پست مطرح و از ارسال ان از بخش ارتباط با ما خود داری نمائید
در صورتی که تمایل دارید بعد از درج اخرین پست در این زمینه از طریق پیامک اگاه شوید ، شماره خود را در باکس زیر بنویسید
نام شما (فارسی)
شماره موبایل
موضوع ها
در صورت امکان برای ثبت شماره خود ، از خطوط ایرانسل استفاده نمائید ، در صورتی که در خطوط همراه اول پیامک های مارا دریافت نمیکنید ، دلیل ان میتواند تلقی شدن پیامک های اگاه سازی ما از نوع تبلیغاتی توسط اپراتور شما و عدم ارسال ان در به شما باشد (این امر مواقعی اتفاق میافتد که دریافت پیام های تبلیغاتی از طرف شما یا اپراتور بلاک شده باشد)
نویسنده : ParSa رتبه کاربر : تعداد پست های کاربر : 156 این کاربر تا به حالا توسط 0 کاربر مورد تقدیر و تشکر واقع شده پیام نویسنده :


عادل پارسا هستم کارشناس مهندسی نرم افزار
کار برنامه نویسی رو از سال 86 با زبان C شروع کردم و الان بیشتر از 6 ساله که بصورت حرفه ای در زمینه طراحی وب ، برنامه نویسی ویندوز ، وب ، ربات های وبگرد و ... فعالیت دارم

فعالیت و مهارت ها :

Asp.Net MVC C# / C/C++ Android Programming (Java)
Css3 & Html5 Js & Jquery Advanced Ajax Bootstrap & ResponsiVe Design
Reporting Tools SEO Sql Server SQLite



بهنام 1393/6/15 11:25
سلام فایل نمونه باز نمیشه.
pet prescription discount card blog.suntekusa.com cialis discount coupons
cleocin cream mattnichols.co.uk cleocin ovuli
celebrex eureka read celebrex prix maroc



admin 1393/6/16 12:47
یادم رفت اینو بگم کاش بحث ای جکس رو تو کتاب استفاده میکردید جاش خالیه (اون موقع کاملتر بود)


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


ارتباط با ما

double click for close / دوبار کلیک برای بستن پنجره