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

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

المستوي الثالث مبرمج متوسط


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


submit to reddit

تلميح بالجاكويري 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>

 

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

رابط الموضوع
http://citystarit.com/Article_details.aspx?id=81