×

سيتي بقت فودلارا

سيتم نقل محتوي موقع سيتي الي موقعنا الجديد فودلارا


مميزات جديدة في الدورات وتشغيل الدورات
لو مشترك معانا بموقعنا سيتي هتقدر تدخل فودلارا بحسابك القديم في موقع فودلارا مجانا
و خلال شهر نوفمبر وديسمبر فلاش سيل وتخفيضات من 30 وحتي 50 بالمائة علي جميع الدورات
اضغط هنا .. 👇👇
www.vodlara.com
تلميح بالجاكويري  Tooltip in asp.net

تلميح بالجاكويري Tooltip in asp.net

عندما تقف بالماوس علي كلمة او جملة ويظهر تلميح لها بالاعلي

عندما تقف بالماوس علي كلمة او جملة ويظهر تلميح لها بالاعلي
تلميح بالجاكويري  Tooltip in asp.net


 

tooltipQjuery

 

 

يمكنك تحميل المثال من موقعنا علي الرابط التالي

http://www.citystarit.com/upload/projects/tooltip.zip

 

خطوات عملQuery tags

1-وضع سكربت الجاكويري في رأس الصفحة او الهيدر  head


    <script src="js/jquery.js"></script>

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    

    <script>

        /*
            TOOLTIP
        */

        $( 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 );
            });
        });

        /*
            ---
        */

    </script>

    <script>

        /*
        سكربت الجاكويري
        */
       
        ( function( doc )
        {
            var addEvent = ''addEventListener'',
                type     = ''gesturestart'',
                qsa         = ''querySelectorAll'',
                scales     = [ 1, 1 ],
                meta     = qsa in doc ? doc[ qsa ]( ''meta[name=viewport]'' ) : [];
       
            function fix()
            {
                meta.content = ''width=device-width,minimum-scale='' + scales[ 0 ] + '',maximum-scale='' + scales[ 1 ];
                doc.removeEventListener( type, fix, true );
            }
       
            if( ( meta = meta[ meta.length - 1 ] ) && addEvent in doc )
            {
                fix();
                scales = [ .25, 1.6 ];
                doc[ addEvent ]( type, fix, true );
            }
       
        }( document ) );

    </script>

 

2-كتابة جسم الصفحة او الموضوع في الصفحة في وسم الفورم او البودي   form or body

<div id="container">

    <div id="info"><abbr title="هنا يظهر التلميح المراد ظهوره" rel="tooltip"></div>

    <p>قف بالماوس علي الصورة </p>

</div>

 

بواسطة
مصر
سيتي ستار لتكنولوجيا المعلومات
سيتي ستار لتكنولوجيا المعلومات

عودة لمقالات الموقع