Ratchet & # x27; s Push.js - Applications de prototypage avec plusieurs écrans

head>

World News de SitePoint

-header>

J'ai changé le titre de la page en nouvelles mondiales de SitePoint et j'ai supprimé tout le contenu qui se trouvait à l'intérieur du .Content Div dans le modèle de base.

Comme discuté dans mon article précédent sur Ratchet, chaque page à cliquet doit avoir deux composantes importantes: la barre supérieure et la section de contenu.

La barre supérieure doit être un élément avec des classes: .bar et .bar-nav alors que la section de contenu doit avoir une classe .Content.

Reportez-vous à mon article précédent pour les étapes pour exécuter une application à cliquet. Il existe diverses options disponibles.

Notre objectif est de remplir la section du contenu avec du contenu de nouvelles factices. J'ai repris sans vergogne des actualités de la page Google News pour donner un sentiment réaliste à l'application.

Pour créer une liste de nouvelles, nous utiliserons le composant HTML de «Table View with Chevrons» de Ratchet. Alors allons-y et placons le balisage suivant à l'intérieur du .Content Div.

<div >
    <ul >
      <li >
        <a  href="#">
            Nintendo apologises for lack of virtual equality
        </a>
      </li>
      <li >
        <a  href="#">
            New Surface Pro reportedly debuting alongside Surface mini
        </a>
      </li>
      <li >
        <a  href="#">
      Microsoft share price: Software giant announces Office Mix
        </a>
      </li>
      <li >
        <a  href="#">
            Snapchat Settles FTC Charges That It Misled Users About Disappearing Photo ...
        </a>
      </li>
      <li >
        <a  href="#">
            Apple Loop: Beats and Earbuds, Nokia's Imaging Brains And US Legal ...
        </a>
      </li>
      <li >
        <a  href="#">
            Fed court overturns Oracle v. Google Java API copyright decision
        </a>
      </li>
      <li >
        <a  href="#">
            Say goodbye to Facebook's Poke and Camera
        </a>
      </li>
      <li >
        <a  href="#">
            Ford recalls Escape, C-Max and more vehicles to fix safety issues
        </a>
      </li>
      <li >
        <a  href="#">
            Chrysler recalls 780000 minivans over window switch
        </a>
      </li>
    </ul>
  </div>

La vue de la table est un élément

avec la classe .Table-View. Chaque élément
• d'une vue de table doit avoir une classe .Table-View-Cell. Ici, j'ai utilisé un élément avec la classe .Navigate-droite pour chaque article. La classe .Navigate-droite sortira une flèche droite sur le côté droit de chaque élément. Table-View-Cell.

  Notre écran jusqu'à présent devrait aimer ceci:

  

  C'est presque prêt. Nous devons placer un élément d'image à côté de chaque élément. Cet élément d'image doit être placé à l'intérieur de chaque élément pour représenter l'image de nouvelles correspondante. Voici la marque pour l'image:

  <img  src="images/img1.jpeg">
  

  L'image doit avoir un objet de classe de classe pour l'identifier comme un composant multimédia à cliquet. J'ai utilisé la classe .Pull-left pour rendre l'image à gauche en ce qui concerne le titre des nouvelles. Allez-y et placez la balise d'image à l'intérieur de chaque élément de votre balisage. Nous devrions obtenir un écran qui ressemble ci-dessous.

  

  Il est maintenant temps de créer une autre page HTML qui sera utilisée pour afficher un article de presse complet. Créez un autre fichier dans le même dossier de travail appelé article.html.

  Nous mettrons le même modèle HTML de base de Ratchet dans cette page. Ainsi, l'article de balisage.html devrait être:

  <div >
      <ul >
        <li >
          <a  href="#">
              Nintendo apologises for lack of virtual equality
          </a>
        </li>
        <li >
          <a  href="#">
              New Surface Pro reportedly debuting alongside Surface mini
          </a>
        </li>
        <li >
          <a  href="#">
        Microsoft share price: Software giant announces Office Mix
          </a>
        </li>
        <li >
          <a  href="#">
              Snapchat Settles FTC Charges That It Misled Users About Disappearing Photo ...
          </a>
        </li>
        <li >
          <a  href="#">
              Apple Loop: Beats and Earbuds, Nokia's Imaging Brains And US Legal ...
          </a>
        </li>
        <li >
          <a  href="#">
              Fed court overturns Oracle v. Google Java API copyright decision
          </a>
        </li>
        <li >
          <a  href="#">
              Say goodbye to Facebook's Poke and Camera
          </a>
        </li>
        <li >
          <a  href="#">
              Ford recalls Escape, C-Max and more vehicles to fix safety issues
          </a>
        </li>
        <li >
          <a  href="#">
              Chrysler recalls 780000 minivans over window switch
          </a>
        </li>
      </ul>
    </div>
  

  Tout se ressemble, à l'exception d'un lien supplémentaire dans l'élément . J'ai utilisé Ratchet’s Ratchicons pour créer une icône gauche à l'intérieur de la barre supérieure. Cette icône est générée à l'aide des classes .icon et .icon-left-nav. Une classe supplémentaire .Pull-Left est utilisée pour placer l'icône vers le côté gauche la plus grande barre supérieure. Puisque, cette icône est un élément de lien, mettons Index.html comme cible. Par conséquent, chaque fois que cela est cliqué, cela nous ramènera à l'écran d'accueil.

  mettons du contenu à l'intérieur du .Content Div pour représenter l'article.

  <img  src="images/img1.jpeg">
  

  La classe .Content-padded est utilisée pour créer un rembourrage entre l'écran et le contenu. J'ai placé une image représentant l'article des nouvelles, le titre de l'article à l'aide de la balise

  et du texte factice en utilisant plusieurs balises

  pour représenter le contenu d'actualités.

  L'article.html devrait ressembler ci-dessous.

  

  Maintenant que nous avons 2 pages prêtes, lions-les. C'est là que nous utiliserons réellement la fonctionnalité push.js.

  ouvrir à nouveau index.html. Nous modifierons la valeur d'attribut HREF du premier article sur l'article.html. Par défaut, tous les liens des applications à cliquet sont des liens alimentés push.js. Cela signifie qu'ils seront récupérés en utilisant Ajax.

  Ratchet recherche des divs .bar et .Content dans la page actuelle et la page nouvellement récupérée. Il met ensuite à jour ces divs dans l'ancienne page avec le contenu de la nouvelle page. Par conséquent, tout ce qui est placé à l'extérieur .bar et. Content Divs dans la page nouvellement récupérée, sera ignoré.

  Dans notre cas, il mettra à jour la barre d'en-tête supérieure et la div .Content de la page index.html avec le contenu des composants correspondants de la page Article.html. Par conséquent, nous verrons une barre supérieure mise à jour et l'article de presse au lieu d'une liste de nouvelles.

  Allez-y et cliquez sur la première nouvelle dans l'écran d'accueil, vous verrez l'article de presse chargé. Cliquez sur le bouton Retour de la barre supérieure, cela devrait vous ramener à l'écran d'accueil.

  Ajoutons quelques transitions tout en changeant l'écran via push.js. Les transitions sont appliquées à l'application en ajoutant un attribut personnalisé appelé Data-Transition aux éléments de liaison . Ces attributs prennent trois valeurs différentes: le fondu, le glissement ou le glissement. Ajoutons un effet diapositif aux premiers actualités de l'écran d'accueil comme indiqué ci-dessous:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Post's Title</title>
  
      <!-- Sets initial viewport load and disables zooming  -->
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  
      <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="mobile-web-app-capable" content="yes">
  
      <!-- Include the compiled Ratchet CSS -->
      <link href="css/ratchet.css" rel="stylesheet">
  
      <!-- Include the compiled Ratchet JS -->
      <script src="js/ratchet.js"></script>
    </head>
    <body>
  
    <header >
      <a  href="index.html"></a>
      <h1 >Post's Title</h1>
    </header>
  
    <div >
    </div>
    </body>
  </html>
  

  Ajoutez également un effet coulissant au bouton arrière de la page Article.html.

  
    <img  src="images/img1.jpeg">
    
  Nintendo apologises for lack of virtual equality
    
  ‎5 hours ago by Syed Fazle Rahman
    
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
    
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
    
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
    
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
    
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
    
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
  

  Allez-y et exécutez à nouveau votre application. Vous devriez voir un effet diapositif tout en récupérant une nouvelle page et un effet de diapositives lors du retour. Ces effets peuvent être légèrement différents selon le thème inclus dans l'application à cliquet. Une transition de la plate-forme iOS est appliquée lors de l'utilisation du thème iOS et de la transition de la plate-forme Android est appliquée dans le thème Android.

  c'est tout. Notre application est presque prête avec les fonctionnalités de base. Il y a encore 2 fonctionnalités supplémentaires qui doivent être réalisées: les options de partage et l'écran des paramètres de l'article de presse. Étant donné que ces options ne seront disponibles que sur le deuxième écran, nous les créerons dans l'article.html.

  L'option de partage est une popover qui apparaît à partir de la barre supérieure avec une longue liste d'options de réseaux sociaux. Nous utiliserons le composant popover de Ratchet pour le créer. Reouvrons l'article.html. Le balisage pour un composant popover se déroule comme ceci:

  <div >
      <ul >
        <li >
          <a  href="#">
              Nintendo apologises for lack of virtual equality
          </a>
        </li>
        <li >
          <a  href="#">
              New Surface Pro reportedly debuting alongside Surface mini
          </a>
        </li>
        <li >
          <a  href="#">
        Microsoft share price: Software giant announces Office Mix
          </a>
        </li>
        <li >
          <a  href="#">
              Snapchat Settles FTC Charges That It Misled Users About Disappearing Photo ...
          </a>
        </li>
        <li >
          <a  href="#">
              Apple Loop: Beats and Earbuds, Nokia's Imaging Brains And US Legal ...
          </a>
        </li>
        <li >
          <a  href="#">
              Fed court overturns Oracle v. Google Java API copyright decision
          </a>
        </li>
        <li >
          <a  href="#">
              Say goodbye to Facebook's Poke and Camera
          </a>
        </li>
        <li >
          <a  href="#">
              Ford recalls Escape, C-Max and more vehicles to fix safety issues
          </a>
        </li>
        <li >
          <a  href="#">
              Chrysler recalls 780000 minivans over window switch
          </a>
        </li>
      </ul>
    </div>
  

  Chaque popover doit avoir un en-tête et une partie du corps. L'en-tête est utilisé pour donner un titre à la popover. Tout comme la barre supérieure de l'application, cet en-tête devrait également avoir les cours: .bar et .bar-nav. Ensuite, nous utiliserons le composant Table-View de Ratchet pour répertorier l'ensemble des réseaux de partage. Voici la plus grande question! Où dois-je placer le balisage de ce popover?

  Comme indiqué ci-dessus, puisque l'article.html sera récupéré en utilisant push.js uniquement le contenu présent à l'intérieur de la barre supérieure et. Content div sera tiré. Par conséquent, le balisage de popover ci-dessus doit être placé juste au-dessus de .Content div.

  Les popovers sont l'un des composants cachés de Ratchet. Cela signifie qu'ils ne seront visibles que lorsqu'ils sont déclenchés. Par conséquent, nous avons besoin d'un gestionnaire qui déclenchera la popover.

  Placez une icône de partage à côté du titre de l'article dans le composant de l'article.html. Cette icône sera notre gestionnaire pour déclencher le popover de partage. Le balisage de la barre supérieure de l'article.html devrait maintenant être:

  <img  src="images/img1.jpeg">
  

  L'attribut HREF du gestionnaire doit contenir l'ID du popover cible. Ici, la valeur est #popover. L'icône de partage est un Ratchicon qui est affiché à l'aide de l'icône de classes et de la part d'icône. Allons-y et vérifions que cela fonctionne dans notre application. Il devrait ressembler ci-dessous.

  

  Incroyable! N'est-ce pas? Nous n'avons pas eu à écrire une seule ligne de CSS et JS pour ce popover. Félicitations à l'équipe de cliquet.

  Il est temps de créer un écran de paramètres. Cet écran sera un modal à cliquet. Tout comme les popovers, les modaux sont également invisibles par défaut. Ils doivent être déclenchés pour les rendre visibles. Créons une barre inférieure flottante dans l'écran Article.html. Nous y placerons une icône de paramètres qui sera le gestionnaire pour déclencher l'écran modal.

  Pour créer une barre flottante, ajoutez le balisage suivant juste en dessous du balisage des popovers.

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Post's Title</title>
  
      <!-- Sets initial viewport load and disables zooming  -->
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  
      <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="mobile-web-app-capable" content="yes">
  
      <!-- Include the compiled Ratchet CSS -->
      <link href="css/ratchet.css" rel="stylesheet">
  
      <!-- Include the compiled Ratchet JS -->
      <script src="js/ratchet.js"></script>
    </head>
    <body>
  
    <header >
      <a  href="index.html"></a>
      <h1 >Post's Title</h1>
    </header>
  
    <div >
    </div>
    </body>
  </html>
  

  Les barres flottantes sont visibles par défaut. J'ai placé une icône d'équipement pour représenter le bouton Paramètres. Son attribut HREF contient l'ID du composant modal qui créera bientôt. L'écran Article.html ressemblera maintenant à ceci:

  

  Le balisage d'un composant modal est le suivant:

  <div >
      <ul >
        <li >
          <a  href="#">
              Nintendo apologises for lack of virtual equality
          </a>
        </li>
        <li >
          <a  href="#">
              New Surface Pro reportedly debuting alongside Surface mini
          </a>
        </li>
        <li >
          <a  href="#">
        Microsoft share price: Software giant announces Office Mix
          </a>
        </li>
        <li >
          <a  href="#">
              Snapchat Settles FTC Charges That It Misled Users About Disappearing Photo ...
          </a>
        </li>
        <li >
          <a  href="#">
              Apple Loop: Beats and Earbuds, Nokia's Imaging Brains And US Legal ...
          </a>
        </li>
        <li >
          <a  href="#">
              Fed court overturns Oracle v. Google Java API copyright decision
          </a>
        </li>
        <li >
          <a  href="#">
              Say goodbye to Facebook's Poke and Camera
          </a>
        </li>
        <li >
          <a  href="#">
              Ford recalls Escape, C-Max and more vehicles to fix safety issues
          </a>
        </li>
        <li >
          <a  href="#">
              Chrysler recalls 780000 minivans over window switch
          </a>
        </li>
      </ul>
    </div>
  

  Tout comme un composant popover, un modal a également une zone d'en-tête et une zone. La zone de cap est utilisée pour donner un titre au modal. Dans la zone du contenu, j'ai utilisé le composant «Table View with Toggles» de Ratchet. Par conséquent, l'utilisateur peut basculer un élément de paramètres particulier selon ses exigences.

  L'écran modal ressemble ci-dessous:

  

  Le balisage pour le composant modal doit également être placé à l'intérieur du. Content div de l'article.html Page.

  Empêcher Push.js

  Si vous souhaitez que certains liens dans votre application ne devraient pas utiliser push.js, vous pouvez utiliser l'attribut personnalisé de Data-Inigore avec la valeur comme push dans ces éléments de liaison.

  par exemple:

  <img  src="images/img1.jpeg">
  

  Le lien ci-dessus vous redirigera de l'application vers l'URL cible.

  Conclusion

  Enfin, nous avons une application de flux d'actualités de base en utilisant Ratchet. Il dispose des fonctionnalités qui se trouvent normalement dans la plupart des applications natives. Nous avons pu créer une application haute fidélité simplement en utilisant des technologies HTML, CSS et JS. Si ce prototype est intégré à l'aide de frameworks comme PhoneGap, il peut devenir une application hybride à part entière et être utilisée avec les appareils iOS et Android comme une application native.

  J'espère que vous avez apprécié la création de cette application factice autant que moi. J'ai hâte d'autonomiser de telles applications à l'aide d'AngularJS, ExpressJS et MongoDB et de le faire une application entièrement fonctionnelle. Si vous avez des requêtes liées à ce sujet, vous pouvez me tweeter directement en utilisant ma poignée Twitter (@FazleRocks) ou laisser un commentaire ci-dessous. Je serai heureux d'y répondre.

  Les questions fréquemment posées sur Ratchet’s Push.js pour le prototypage des applications mobiles

  En quoi Ratchet’s Push.js diffère-t-il des autres bibliothèques JavaScript?

  Ratchet’s Push.js est une bibliothèque JavaScript unique spécialement conçue pour le prototypage d’applications mobiles. Contrairement à d'autres bibliothèques, il permet aux développeurs de créer plusieurs écrans dans un seul document HTML, ce qui facilite le prototype d'applications mobiles. Il prend également en charge les transitions natives entre les écrans, améliorant l'expérience utilisateur. Cependant, il est important de noter que Push.js n'est pas un cadre de développement mobile à part entière. Il est principalement utilisé pour le prototypage et peut ne pas avoir toutes les fonctionnalités requises pour le développement d'applications à grande échelle.

  Conçu pour le prototypage d'applications mobiles, il peut être utilisé dans le développement Web dans une certaine mesure. Par exemple, vous pouvez l'utiliser pour créer des prototypes multi-écrans pour les conceptions Web réactives. Cependant, il peut ne pas convenir aux applications Web complexes en raison de ses fonctionnalités et fonctionnalités limitées.

  Comment installer et utiliser Ratchet’s Push.js?

  Pour installer Ratchet’s Push.js, vous devez télécharger le package Ratchet à partir de son site Web officiel ou utiliser un gestionnaire de packages comme NPM ou Bower. Une fois installé, vous pouvez inclure le script push.js dans votre document HTML et commencer à utiliser ses fonctions. L'API push.js est assez simple et facile à utiliser, même pour les débutants.

  Quelles sont les principales caractéristiques de Ratchet's Push.js?

  Ratchet's Push.js propose plusieurs fonctionnalités clés qui fabriquent Prototypage d'applications mobiles plus facile et plus efficace. Ceux-ci incluent les transitions d'écran de type natif, la navigation AJAX et la possibilité de créer plusieurs écrans dans un seul document HTML. Il prend également en charge les événements personnalisés et dispose d'une API simple et facile à utiliser.

  Puis-je utiliser Ratchet's Push.js avec d'autres bibliothèques ou frameworks JavaScript?

  Oui, vous pouvez utiliser Ratchet's Push's Push .js avec d'autres bibliothèques ou frameworks JavaScript. Cependant, vous devez vous assurer qu'il n'y a pas de conflits entre les bibliothèques ou les cadres que vous utilisez. Il est également important de noter que Push.js ne remplace pas les cadres de développement mobile à part entière. Il est principalement utilisé pour le prototypage et peut ne pas avoir toutes les fonctionnalités requises pour le développement d'applications à grande échelle.

  Est-ce que Ratchet's Push.js est adapté au développement d'applications mobiles à grande échelle?

  Ratchet's Push.js est principalement conçu pour le prototypage d'applications mobiles, pas pour le développement d'applications à grande échelle. Bien qu'il offre plusieurs fonctionnalités utiles pour le prototypage, il peut ne pas avoir toutes les fonctionnalités et fonctionnalités requises pour développer des applications mobiles complexes. Pour le développement d'applications à grande échelle, vous voudrez peut-être envisager d'utiliser un cadre de développement mobile plus robuste.

  Comment les transitions d'écran Push.js de Ratchet Push.js?

  Ratchet's Push.js utilisent les transitions CSS3 vers Créez des transitions d'écran de type natif. Lorsque vous naviguez d'un écran à un autre, Push.js applique automatiquement la transition appropriée, donnant l'impression d'une application mobile native. Vous pouvez également personnaliser ces transitions en fonction de vos besoins.

  Quel type d'événements personnalisés Push.js de Ratchet Push.js?

  Ratchet's Push.js prend en charge plusieurs événements personnalisés que vous pouvez utiliser pour améliorer votre prototypes d'applications mobiles. Il s'agit notamment d'événements tels que «push», «pop» et «diapositive», qui sont déclenchés lorsque l'utilisateur navigue entre les écrans. Vous pouvez écouter ces événements et exécuter du code personnalisé lorsqu'ils se produisent.

  Puis-je utiliser Ratchet's Push.js pour le prototypage de l'application Android?

  Oui, vous pouvez utiliser Ratchet's Push.js pour l'application Android prototypage. Il s'agit d'une bibliothèque autochtone, ce qui signifie qu'il fonctionne sur n'importe quelle plate-forme qui prend en charge HTML, CSS et JavaScript. Cependant, gardez à l'esprit que Push.js n'est pas un cadre de développement mobile à part entière et peut ne pas avoir toutes les fonctionnalités requises pour le développement d'applications Android à grande échelle.

  Ratchet’s push.js est-il gratuit?

  Oui, Ratchet’s Push.js est gratuit. Il s'agit d'une bibliothèque open source, ce qui signifie que vous pouvez l'utiliser pour des projets personnels et commerciaux sans aucun coût. Cependant, si vous le trouvez utile, envisagez de contribuer à son développement ou de faire un don aux développeurs pour soutenir leur travail.

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!