Maison  >  Article  >  interface Web  >  Mui utilise jquery et utilise un clic pour passer à une nouvelle fenêtre de partage d'exemple

Mui utilise jquery et utilise un clic pour passer à une nouvelle fenêtre de partage d'exemple

小云云
小云云original
2017-12-30 15:21:131968parcourir

Cet article vous apporte principalement un exemple de Mui utilisant jquery et cliquant pour accéder à une nouvelle fenêtre. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Insérer le code js globalement


mui('body').on('tap', 'a', function () { document.location.href = this.href; });

Cela fonctionne, mais il y a de nombreux problèmes, comme cliquer sur la barre latérale, il n'apparaît pas et il y a beaucoup d'erreurs.

Après avoir pratiqué ma propre méthode, c'est toujours faisable. Après avoir écrit trop de jquery, le débogage du js natif échoue toujours. Peut-être que je ne suis pas familier, mais je dois quand même tout utiliser ~

Ensuite, ajoutez d'abord jquery


@Scripts.Render("~/bundles/jquery")

C'est tout , allez-y Code ci-dessus :

saut d'identification :


$('#Message').on("tap", function () {
  //打开关于页面
  mui.openWindow({
    url: '../Home/About',
    id: &#39;About&#39; <br>});

saut à 9 carrés :


$(&#39;.mui-grid-9&#39;).on("tap", &#39;a&#39;, function () {
    var url = $(this).attr(&#39;href&#39;);
    //打开关于页面
    mui.openWindow({
      url: url,
      id: &#39;info&#39;
    });
  });

Saut du carrousel d'images :


$(&#39;#slider&#39;).on("tap", &#39;a&#39;,function () {
    var url = $(this).attr(&#39;href&#39;);
    //打开关于页面
    mui.openWindow({
      url: url,
      id: &#39;info&#39;
    });
  });

Recommandations associées :

Un exemple détaille le processus d'encapsulation de mui pull-up pour charger davantage de données d'actualisation déroulantes

JS réalise le dégradé transparent effet de la barre de navigation MUI

Comment utiliser le framework MUI dans le HTML5 mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn