Как связать плагин jQuery в html документе

Я хочу связать плагин Social FloatingShare jQuery в документе HTML. Я пытаюсь связать этот плагин jQuery, но вызов функции плагина floatingShare() не работает, поскольку я исключен.

У меня есть два вопроса:

Как связать jQuery в моем html-документе?
Какую ошибку я совершил в своем коде?

Мой исходный код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jquery Plugin</title>
    <style>
        body { margin: 0px; padding: 0px; background: #ccc; }
        .container { height: 500px; width: 1000px; margin: 0px auto; padding: 0px; }
    </style>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <script type="text/javascript">
        $(function(){
            $("body").floatingShare();
        });
    </script>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.floating-share.js" type="text/javascript"></script>
</body>
</html>

Ответ 1

Вам необходимо включить jQuery-плагины перед его использованием, потому что перед использованием должны быть доступны все функции jQuery или jQuery, поэтому измените jquery-библиотеку и script как показано ниже -

ПРИМЕЧАНИЕ. Рекомендуется хранить тег script непосредственно в теге <body> или <head> вместо любого другого элемента html.

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/jquery.floating-share.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){
   $("body").floatingShare();
  });
</script> 
<div class="container"> 

</div>

</body>

Ответ 2

Включить все .js файлы в конце блока Body - хорошая практика для загрузки характеристик. Затем вам нужно обязательно вызвать любые функции JavaScript из ваших ссылок после полной загрузки страницы.

Два общих варианта, которые я обычно выбираю:

Вариант 1. Включите библиотеку jQuery в Head и сохраните все остальные файлы .js в конце блока Body. В вашем случае код части, относящийся к JavaScript, должен быть следующим:

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    </head>
    <body>
        <div class="container"> 
            <script type="text/javascript">
                $(document).ready(function(){
                    $("body").floatingShare();
                });
            </script> 
        </div>
        <script src="js/jquery.floating-share.js" type="text/javascript"></script>
    </body>

Вариант 2. Храните все .js файлы в конце блока Body, а затем используйте $(document).ready() в JavaScript, а не в библиотеке jQuery. Согласно ресурсу jQuery, эквивалентная чистая реализация JavaScript $(document).ready():

    var ready = (function(){    

        var readyList,
            DOMContentLoaded,
            class2type = {};
            class2type["[object Boolean]"] = "boolean";
            class2type["[object Number]"] = "number";
            class2type["[object String]"] = "string";
            class2type["[object Function]"] = "function";
            class2type["[object Array]"] = "array";
            class2type["[object Date]"] = "date";
            class2type["[object RegExp]"] = "regexp";
            class2type["[object Object]"] = "object";

        var ReadyObj = {
            // Is the DOM ready to be used? Set to true once it occurs.
            isReady: false,
            // A counter to track how many items to wait for before
            // the ready event fires. See #6781
            readyWait: 1,
            // Hold (or release) the ready event
            holdReady: function( hold ) {
                if ( hold ) {
                    ReadyObj.readyWait++;
                } else {
                    ReadyObj.ready( true );
                }
            },
            // Handle when the DOM is ready
            ready: function( wait ) {
                // Either a released hold or an DOMready/load event and not yet ready
                if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) {
                    // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                    if ( !document.body ) {
                        return setTimeout( ReadyObj.ready, 1 );
                    }

                    // Remember that the DOM is ready
                    ReadyObj.isReady = true;
                    // If a normal DOM Ready event fired, decrement, and wait if need be
                    if ( wait !== true && --ReadyObj.readyWait > 0 ) {
                        return;
                    }
                    // If there are functions bound, to execute
                    readyList.resolveWith( document, [ ReadyObj ] );

                    // Trigger any bound ready events
                    //if ( ReadyObj.fn.trigger ) {
                    //  ReadyObj( document ).trigger( "ready" ).unbind( "ready" );
                    //}
                }
            },
            bindReady: function() {
                if ( readyList ) {
                    return;
                }
                readyList = ReadyObj._Deferred();

                // Catch cases where $(document).ready() is called after the
                // browser event has already occurred.
                if ( document.readyState === "complete" ) {
                    // Handle it asynchronously to allow scripts the opportunity to delay ready
                    return setTimeout( ReadyObj.ready, 1 );
                }

                // Mozilla, Opera and webkit nightlies currently support this event
                if ( document.addEventListener ) {
                    // Use the handy event callback
                    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
                    // A fallback to window.onload, that will always work
                    window.addEventListener( "load", ReadyObj.ready, false );

                // If IE event model is used
                } else if ( document.attachEvent ) {
                    // ensure firing before onload,
                    // maybe late but safe also for iframes
                    document.attachEvent( "onreadystatechange", DOMContentLoaded );

                    // A fallback to window.onload, that will always work
                    window.attachEvent( "onload", ReadyObj.ready );

                    // If IE and not a frame
                    // continually check to see if the document is ready
                    var toplevel = false;

                    try {
                        toplevel = window.frameElement == null;
                    } catch(e) {}

                    if ( document.documentElement.doScroll && toplevel ) {
                        doScrollCheck();
                    }
                }
            },
            _Deferred: function() {
                var // callbacks list
                    callbacks = [],
                    // stored [ context , args ]
                    fired,
                    // to avoid firing when already doing so
                    firing,
                    // flag to know if the deferred has been cancelled
                    cancelled,
                    // the deferred itself
                    deferred  = {

                        // done( f1, f2, ...)
                        done: function() {
                            if ( !cancelled ) {
                                var args = arguments,
                                    i,
                                    length,
                                    elem,
                                    type,
                                    _fired;
                                if ( fired ) {
                                    _fired = fired;
                                    fired = 0;
                                }
                                for ( i = 0, length = args.length; i < length; i++ ) {
                                    elem = args[ i ];
                                    type = ReadyObj.type( elem );
                                    if ( type === "array" ) {
                                        deferred.done.apply( deferred, elem );
                                    } else if ( type === "function" ) {
                                        callbacks.push( elem );
                                    }
                                }
                                if ( _fired ) {
                                    deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
                                }
                            }
                            return this;
                        },

                        // resolve with given context and args
                        resolveWith: function( context, args ) {
                            if ( !cancelled && !fired && !firing ) {
                                // make sure args are available (#8421)
                                args = args || [];
                                firing = 1;
                                try {
                                    while( callbacks[ 0 ] ) {
                                        callbacks.shift().apply( context, args );//shifts a callback, and applies it to document
                                    }
                                }
                                finally {
                                    fired = [ context, args ];
                                    firing = 0;
                                }
                            }
                            return this;
                        },

                        // resolve with this as context and given arguments
                        resolve: function() {
                            deferred.resolveWith( this, arguments );
                            return this;
                        },

                        // Has this deferred been resolved?
                        isResolved: function() {
                            return !!( firing || fired );
                        },

                        // Cancel
                        cancel: function() {
                            cancelled = 1;
                            callbacks = [];
                            return this;
                        }
                    };

                return deferred;
            },
            type: function( obj ) {
                return obj == null ?
                    String( obj ) :
                    class2type[ Object.prototype.toString.call(obj) ] || "object";
            }
        }
        // The DOM ready check for Internet Explorer
        function doScrollCheck() {
            if ( ReadyObj.isReady ) {
                return;
            }

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch(e) {
                setTimeout( doScrollCheck, 1 );
                return;
            }

            // and execute any waiting functions
            ReadyObj.ready();
        }
        // Cleanup functions for the document ready method
        if ( document.addEventListener ) {
            DOMContentLoaded = function() {
                document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
                ReadyObj.ready();
            };

        } else if ( document.attachEvent ) {
            DOMContentLoaded = function() {
                // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                if ( document.readyState === "complete" ) {
                    document.detachEvent( "onreadystatechange", DOMContentLoaded );
                    ReadyObj.ready();
                }
            };
        }
        function ready( fn ) {
            // Attach the listeners
            ReadyObj.bindReady();

            var type = ReadyObj.type( fn );

            // Add the callback
            readyList.done( fn );//readyList is result of _Deferred()
        }
        return ready;
        })();

Затем вы можете использовать его как:

    ready(function(){
      $("body").floatingShare(); // Assuming jQuery Lib has been included as well
    });

На сегодняшний день я считаю, что вариант 1 должен быть более приемлемым.

Ответ 3

В коде есть проблема с кодом. Согласно jQuery code Sequence, вы должны включить jQuery сначала в свой документ, а затем всю свою пользовательскую функцию, предложенную @Bhushan Kawadkar в приведенном выше ответе.

Если вы все еще хотите добавить свою функцию в тело, где вы ее добавили, вы можете включить jQuery в <head> документа, например,

<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
  <script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Horizontal-Floating-Social-Share-Bar/js/jquery.floating-share.js" type="text/javascript"></script>
</head>
<body>
 <div class="container"> 
  <script type="text/javascript">
$(function(){
$("body").floatingShare();
});
</script> 
</div>
</body>

И вы начнете работать с плагином.

Как-то рекомендуется добавлять скрипты (js) в нижний колонтитул, чтобы улучшить время рендеринга вашей страницы.

Вот живая демонстрация для вас.

http://codepen.io/anon/pen/AIEnl