web-dev-qa-db-fra.com

jquery.history.js VS jquery-hashchange

Voir http://balupton.github.io/jquery-history/demo/

J'ai été attiré par jquery.history.js

pendant que je trouve

http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/

Je pense que le second est basé sur JQuery. Je veux dire qu'il n'a pas besoin de plugin supplémentaire que jQuery.

Quelle est la particularité de jquery.history.js? que le changement de hachage?.

Que dois-je utiliser pour remplacer les boutons Précédent et Suivant de mon navigateur?

jqueryhtmlhistory.jshashchange
18
Kuttan Sujith

EDIT - Fin 2013

Une autre bibliothèque de hachage appelée "sammy.js" est également populaire. Il a une belle carte de routage côté client. La structure de routage côté client est utilisée pour gérer les événements de changement de hachage, afin que vous puissiez l'utiliser pour fournir des fonctionnalités de type application unique à certaines de vos pages. Voir https://github.com/quirkey/sammy/wiki/Presentations pour un peu de détails.

De plus, il n'est guère nécessaire d'utiliser des liens normaux dans les exemples ci-dessous. Vous pouvez utiliser des boutons, des li, tout ce que vous voulez comme liens réactifs ajax, tant que vous pouvez vous lier à leur événement on click. Les paramètres de routage que vous utilisez peuvent être stockés dans les attributs de données des éléments cliqués ou autrement ailleurs identifiables via l'élément cliqué, c'est-à-dire. dans un objet dictionnaire javascript. Après le déclenchement de l'événement au clic, vous pouvez ensuite récupérer les valeurs de route nécessaires et utiliser l'état Push html5, l'état jquery-bbq-Push, le hachage, etc.

Présentation Les bibliothèques history.js et jquery-bbq sont utilisées pour maintenir l'état lorsque vous déclenchez des événements ajax ou on page. Vous utilisez ces bibliothèques pour stocker des informations sur l'historique du navigateur et/ou vous manipulez l'URL afin que vous puissiez utiliser les boutons avant et arrière sur les pages pour les appels ajax, les changements d'onglet, la navigation dans les images, vraiment tout ce que vous voulez lier au journal d'historique . Les deux bibliothèques ont des API quelque peu similaires pour une utilisation de base.

History.js La nouvelle bibliothèque history.js utilise les normes de navigateur html5 pour pushstate et popstate et retombe sur l'approche de hachage si le navigateur ne prend pas en charge html5 pushstate. Pushstate vous permet de pousser votre URL vers la barre du navigateur = changez l'url sans recharger la page! Le référentiel principal est https://github.com/browserstate/history.js

Pour l'utiliser, vous (a) incluez les fichiers de script, (b) vous liez à l'événement `` statechange '' et (c) gérez l'événement statechange et (d) déclenchez l'événement statechange lorsque vous voulez - lorsque votre utilisateur clique sur etc.

notes: chaque fois que l'utilisateur appuie sur le bouton avant ou arrière, l'événement de changement d'état se déclenche. À l'intérieur de la méthode/gestionnaire de liaison, vous appellerez une méthode qui obtient l'état correspondant. (1) La méthode/fonction History.getState () peut être utilisée pour obtenir des données de votre serveur en fonction de l'historique des pages que vous avez inséré. Vous pouvez stocker toutes les variables dans l'objet State. vous souhaitez généralement stocker une URL. (0) Vous devez renseigner l'état de l'historique à chaque fois que quelqu'un clique sur un lien (sans actualisation de page) pour lequel vous souhaitez suivre l'historique.

(0)

   $("#navbar").on("click","li[data-ajax-link='true']", function(e) {
        var url = $(this).data('uri');
        var target = $(this).data('target');
        var title = $(this).data('text');
        History.pushState({ url: url, target: target }, title, url);
    });

(1)

History.Adapter.bind(window, 'statechange', function() {
       updateContent(History.getState());
});

(2)

 var updateContent = function(State) {
        var url = State.data.url;
        var $target = $(State.data.target);
        ajaxPost(url, $target);
  };

[~ # ~] barbecue [~ # ~]

La bibliothèque de Ben Alman ie. jquery-bbq.js utilise des hachages pour contrôler l'historique du navigateur. Il est entièrement compatible avec les navigateurs plus anciens (car hashchange est comme une technologie html4).

Si vous décidez de modifier le comportement par défaut d'un lien, lorsque vous cliquez sur un lien (4), vous pouvez intercepter la publication du lien, empêcher l'action par défaut et appeler $ .bbq.pushstate. Cette méthode pushstate pousse les éléments à l'intérieur dans l'url après une marque de hachage. (5) Ce changement du hachage d'URL, appelle un événement 'hashchange' auquel vous vous liez. (5 suite) lors de l'événement de hachage, vous obtenez $ .bbq.getState ("paramname") pour obtenir le paramètre de dernier paramètre avec "paramname" après le hachage. Ceci est utile car le navigateur traitera les hachages dans l'historique normal. Ainsi, lorsque le sombody clique en avant ou en arrière, il charge l'état de hachage précédent ou suivant. Si vous utilisez ceci pour que votre application utilise fortement ajax, alors vous feriez une publication ajax pour obtenir l'url qui a été précédemment placée dans le hachage. Pour un autre exemple de la façon d'utiliser cela, regardez ma réponse récente à JQuery BBQ: Où stocker les URL?

Exemple d'utilisation de l'historique du barbecue

(4)

 $("a[data-custom-ajax-link='true']").click(function (e) {
    var target = $(this).data('target');
    var url = $(this).attr('href');
    $.bbq.pushState({ url: url, target: target });
    e.preventDefault();
});

(5)

$(window).bind("hashchange", function(e) {
    var url = $.bbq.getState("url");
    var $target = $($.bbq.getState("target"));
    var frame = $.bbq.getState("target");


    $.ajax({
        url: url,
        data : null,
        type: "POST",
        beforeSend: function (xhr) { xhr.setRequestHeader('X-Target', frame); },
        success: function (data) {
            $target.html(data);
        }
    });


});

Notez que je viens d'inclure les bases de la façon dont vous pouvez utiliser ces plugins. Vous pouvez utiliser ces plugins pour gérer l'utilisation des boutons avant et arrière avec des onglets, des liens ou des charges ajax.

En ce qui concerne lequel est "meilleur", c'est difficile à dire. History.js sera la meilleure bibliothèque lorsqu'elle sera pleinement mature dans ~ 0,5 ans (c'est toujours en version bêta, mais c'est un bon pari pour l'avenir, notez le grand nombre de problèmes ouverts et de branches sur son site github). Jquery-bbq est de l'autre côté du spectre en ce que ses 3 ans et n'a pas été mis à jour pour la conformité jquery 1.9. La bonne nouvelle est qu'ils ont une implémentation et des fonctionnalités très similaires, il n'est donc pas trop mal de basculer entre les deux.

History.js est un peu plus compatible avec l'avenir. Regardez son API (environ à mi-chemin sur https://github.com/browserstate/history.js

A titre de comparaison, l'API de bbq se trouve sur la page http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html . Il y a un peu plus que la partie historique.

36
user1778606

Vous ne pouvez pas remplacer les boutons Précédent et Suivant du navigateur, et cela est intentionnel dans chaque navigateur pour des raisons de sécurité.

Tout ce que ces scripts font est de changer le document.location ou le document.hash des navigateurs, puis de suivre quand les boutons précédent ou précédent du navigateur sont utilisés et de récupérer l'état de hachage actuel du navigateur.

Ne vous méprenez pas, ce sont d'excellents scripts, mais ils ne vous permettront pas de remplacer complètement vos boutons Précédent et Suivant.

2
KaraokeStu