Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

NodeBB

  1. Home
  2. Programmation
  3. Développement web
  4. Javascript
  5. Des alertes stylisées avec SweetAlert

Des alertes stylisées avec SweetAlert

Scheduled Pinned Locked Moved Javascript
4 Posts 3 Posters 4.1k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E
    E
    Eloha
    Membre d'honneur
    wrote on last edited by
    #1

    <p>
    Les alertes en Javascript ne sont pas vraiment stylées. C'est pourquoi SweetAlert a été créé, cette librairie seulement 10kb rend vos alert() et confirm() plus jolie, plus flat quoi ! 😄 </p>
    <p></p><p>
    Plutôt que ça :
    </p>
    <p>
     
    </p>
    <p>
    <img alt="vZn6NJ8.png?1" src="https://i.imgur.com/vZn6NJ8.png?1"/></p>
    <p>
     
    </p>
    <p>
    On a ça :
    </p>
    <p>
     
    </p>
    <p>
    <img alt="WVCqRG3.png?1" src="https://i.imgur.com/WVCqRG3.png?1"/></p>
    <p></p><p>
    <u>Pour l'installer :</u>
    </p>
    <p>
     
    </p>
    <p>
    Télécharger le dépôt <a href="https://github.com/t4t5/sweetalert" rel="external nofollow">GitHub</a> ou installer la librairie avec la console :
    </p>
    <pre class="ipsCode prettyprint prettyprinted">
    <span class="pln">$ bower install sweetalert</span></pre>
    <p>
    Maintenant, au lieu d'utiliser la fonction alert() vous utiliserez swal() 😛 </p>
    <p>
    Vous pourrez ajouter un titre, modifiez les couleurs, etc...et même mettre une image comme vous verrez dans le dernier exemple sur <a href="http://t4t5.github.io/sweetalert/" rel="external nofollow">le site officiel</a>.
    </p>
    <p>
    Regardez la documentation pour avoir des informations sur ces options.
    </p>
    <p>
     
    </p>
    <p>
    J'espère que ça peut vous être utile. 🙂 </p>

    1 Reply Last reply
    1
    • vfrzV
      vfrzV
      vfrz
      wrote on last edited by
      #2

      <p>Je m'y connais pas du tout en javascript, mais en tout cas c'est bien plus beau 😛 </p>

      1 Reply Last reply
      0
      • E
        E
        Eloha
        Membre d'honneur
        wrote on last edited by
        #3

        <p>Ouais, t'as vu ! 😄 </p>
        <p>C'est léger en plus 🙂 </p>

        1 Reply Last reply
        0
        • AzadA
          AzadA
          Azad
          wrote on last edited by
          #4

          <p>Merci du partage. 🙂 </p>

          Administrateur du forum.
          Contactez-moi par message privé ou par mail.

          1 Reply Last reply
          0

          Hello! It looks like you're interested in this conversation, but you don't have an account yet.

          Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

          With your input, this post could be even better 💗

          Register Login
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          • Login

          • Login or register to search.
          Powered by NodeBB Contributors
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • World
          • Users
          • Groups