BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Coins chanfreinés avec jquery.corner.js
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Coins chanfreinés avec jquery.corner.js

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Coins chanfreinés avec jquery.corner.js
    Envoyé : 31 Août 2017 à 13:46
Implanter et utiliser le module js Corner

Étape 1, obtenir le module

Télécharger le module à partir de ce site: https://github.com/malsup/corner
Extraire le fichier jquery.corner.js du fichier corner-master.zip que vous venez de télécharger

Étape 2, À partir d'OE installer et charger le module

Onglet Projet
Groupe du menu: Gestion
Ouvrez les ressources, icône en forme de coffret
Onglet Autres
Bouton ajouter des fichiers autres
Sélectionnez jquery.corner.js
OE va le renommer jquery-corner.js

Sur votre page
Bouton Code
Ajoutez un bloc de code à l'aide du bouton + qui as l'air d'une tête de vis Phillips
Ajoutez un nom, disons: corner
Type Html
Emplacement Header
Ajoutez le code HTML suivant:
<script src="/Files/Other/jquery-corner.js"></script>

Ajoutez un autre bloc de code source en Javascript
Choisissez un nom, disons: corners
type Javascript
Emplacement Endbody
Suivez les instructions de la page: http://jquery.malsup.com/corner/ pour configurer vos coins

Par exemple, pour l'expression proposée par l'auteur: 

$(this).corner("bevel"); 

Remplacez this par ".coins" ce qui donnera 

$(".coins").corner("bevel");

Étape 3, utilisation

Ajoutez une classe perso nommée coins à chaque panneau d'éléments que vous voulez chanfreiner.

Voilà

Version originale du tuto par Hobby001 2017-08-31



Edité par Hobby001 - 01 Sep 2017 à 13:19
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Août 2017 à 14:16
super tutoriel, bravo Clap
Haut de la page
sad allez vers le bas
Groupie
Groupie


Depuis le: 13 Mar 2017
Pays: France
Status: Inactif
Points: 48
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer sad Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Août 2017 à 15:00
re,

merci pr le tuto (au passage tres clair et bon taf :) ) j'ai refait plusieurs fois avec un panneau d’élément mais ceci ne fonctionne pas...

ca m'affiche ca : $(".coins").corner("bevel");
dans un le coin en haut a gauche....
est ce que le 2eme code doit etre aussi en html,header ?

sad
Haut de la page
sad allez vers le bas
Groupie
Groupie


Depuis le: 13 Mar 2017
Pays: France
Status: Inactif
Points: 48
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer sad Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Août 2017 à 15:01
*dans le coin en haut a gauche de la page web lors de la prévisualisation...
sad
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.