ИЗБРАННЫЕ ПРИМЕРЫ JQUERY (теория и примеры)

HTML ↴

<!doctype html>
 
<html lang="en">
<head>
    <title>jQuery UI Draggable - Events</title>
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <style>
    #draggable { width: 16em; padding: 0 1em; }
    #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
    #draggable ul li span.ui-icon { float: left; }
    #draggable ul li span.count { font-weight: bold; }
    </style>
    <script>
    $(function() {
        var $start_counter = $( "#event-start" ),
            $drag_counter = $( "#event-drag" ),
            $stop_counter = $( "#event-stop" ),
            counts = [ 0, 0, 0 ];
 
        $( "#draggable" ).draggable({
            start: function() {
                counts[ 0 ]++;
                updateCounterStatus( $start_counter, counts[ 0 ] );
            },
            drag: function() {
                counts[ 1 ]++;
                updateCounterStatus( $drag_counter, counts[ 1 ] );
            },
            stop: function() {
                counts[ 2 ]++;
                updateCounterStatus( $stop_counter, counts[ 2 ] );
            }
        });
 
        function updateCounterStatus( $event_counter, new_count ) {
            // first update the status visually...
            if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
                $event_counter.addClass( "ui-state-hover" )
                    .siblings().removeClass( "ui-state-hover" );
            }
            // ...then update the numbers
            $( "span.count", $event_counter ).text( new_count );
        }
    });
    </script>
</head>
<body>
 
<div id="draggable" class="ui-widget ui-widget-content">
 
    <p>Drag me to trigger the chain of events.</p>
 
    <ul class="ui-helper-reset">
        <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
        <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
        <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
    </ul>
</div>
 
 
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

размер Kb

ПРИМЕР ↴

✔ пример в полном окне

на главную страницу примеров - клавиша ESC

ИЗБРАННЫЕ ПРИМЕРЫ JQUERY (теория и примеры)

document.write(document.title)

HTML ↴

размер Kb

ПРИМЕР ↴