مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
ویژه تولتیپ زیبا به سبک قالب مای بی پرو

[ویژه] تولتیپ زیبا به سبک قالب مای بی بی پرو
Star 
سلام
دیدم تولتیپی که در انجمن گذاشته جالبه اما دوستان میگن کمی گرافیکی تر ، خب من هم این رو براتون قرار میدم تا ازش استفاده کنید .
دمو :

تصویر: http://up.wikivb.ir/images/wd0rmntevn3bo3su199h.png

کد زیر را در دو مسیر زیر قرار بدید :
الف )
قالب ها » ایندکس » بعد از تگ Head :


کد:
<script type="text/javascript" src="http://toolsdl.com/wp-content/uploads/tooltip.js"></script>
ب )
قالب ها » هدر » بعد از قسمت منو ( menu ) :


کد:
<script type="text/javascript" src="http://toolsdl.com/wp-content/uploads/tooltip.js"></script>

حالا باید به قسمت Global.css قالبتون مراجعه کنید و این استایل رو قرار بدید :


کد:
#tooltip{
    font-family:Tahoma;
    font-size:11px;
    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,.6 ) ),to( rgba( 0,0,0,.8 ) ) );
    background:-webkit-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );
    background:-moz-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );
    background:-ms-radial-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );
    background:-o-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );
    background:linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow:0 3px 5px rgba( 0,0,0,.3 );
    -moz-box-shadow:0 3px 5px rgba( 0,0,0,.3 );
    box-shadow:0 3px 5px rgba( 0,0,0,.3 );
    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,.7 );
    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,.6 );
    top:-20px;
    bottom:auto
}

#tooltip.left:after{
    left:10px;
    margin:0
}

#tooltip.right:after{
    right:10px;
    left:auto;
    margin:0
}

حالا برای استفاده از این تگ در میان کد هاتون استفاده کنید :


کد:
rel="tooltip" title="آموزش های ویژه مای بی بی"
مانند کد زیر :


کد:
<a href="http://toolsdl.com/"><div class="bottom-banner-botton" rel="tooltip" title="آموزش های ویژه مای بی بی ">آموزش ها</div></a>

موفق باشید .
اعتبار یادتون نره ها تصویر: images/smilies/biggrin.gifتصویر: images/smilies/heart.gif


فایل‌های پیوست

.zip   tooltip.zip (اندازه 740 بایت / تعداد دانلود: 62)


تصویر: http://toolsdl.com/banner2.gif
 
من یه کادر درست کردم
بعد داخلش چند تا لینک قرار دادم
که میخوام وقتی رو کادر موس میاد همین تولتیپ نشون داده بشه
, و لینک های داخلی از ورژن دومی که قرار دادین داخل انجمنتون , از اون استفاده کنم
اما الان من فقط از یکی از تولتیپ ها میتونم استفاده کنم , وقتی کدهاشو میزنم بازم نشون نمیده
,  چی کار کنم که از این دو توتلیپ یه جا استفاده کنم؟
سلام.
واقعا تولتیپ قشنگی هستش.
ممنون.
ولی همونطور که میدونید کلاس دادن به همه تولتیپ های سایت کار واقعا زمانگیر و سختیه.
راهی نداره کدی چیزی نداره که به یک باره تمامی تولتیپ ها به این شکل در بیان و نخوایم دونه دونه بهشون کلاس اضافه کنیم؟
به جای کد:
کد:
<script type="text/javascript" src="http://toolsdl.com/wp-content/uploads/tooltip.js"></script>
از کد
کد:
<script>
        jQuery(document).ready(function ($)
        {
            var targets = $( '*' ),
                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 );
            });
        });
</script>


دعای خیر برای اعضای گروه مای بی‌بی فارسی را فراموش نکنید!تصویر: http://www.cdn.my-bb.ir/images/smilies-v6/lightbulb.gif

HeartHeart خیلی التماس دعا دارم... دعام کنید لطفا HeartHeart

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


 


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش زیبا سازی قسمت Navigation Tofighi 79 15,467 ۲۳ آبان ۱۳۹۳، ۰۳:۳۸ ب.ظ
آخرین ارسال: KalKalForum
  کد لینک باکس ویژه با لینک های متحرک KoG 6 2,195 ۱۷ شهریور ۱۳۹۳، ۰۷:۴۸ ب.ظ
آخرین ارسال: saze20
Star آموزش ایجاد تولتیپ ویژه v2 KoG 10 3,165 ۲۵ دى ۱۳۹۲، ۱۲:۵۵ ب.ظ
آخرین ارسال: Arsalan
  باکس تبلیغات بنری زیبا برای بنر های شما KoG 12 3,220 ۱۳ مرداد ۱۳۹۲، ۱۲:۱۵ ب.ظ
آخرین ارسال: ar 98
  [هدیه ویژه] باکس تاپیک های کارآمد برای انجمن شما KoG 12 2,431 ۲۰ تير ۱۳۹۲، ۱۰:۵۳ ق.ظ
آخرین ارسال: KoG
Thumbs Up آموزش دکمه Css زیبا با قابلیت درخشندگی hamidkag 8 4,492 ۰۱ فروردین ۱۳۹۲، ۱۱:۱۹ ب.ظ
آخرین ارسال: mybb

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir