Antivirus offre spéciale - jusqu'à 60 % de réduction avec 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: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 4636
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é : Aug 31 2017 à 12:46pm
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 - Sep 01 2017 à 12:19pm
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. <a href="http://denislafrance.net" rel="nofollow">http://denislafrance.net</a>
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

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


Depuis le: Mar 13 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é : Aug 31 2017 à 2:00pm
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: Mar 13 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é : Aug 31 2017 à 2:01pm
*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 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,031 secondes.
Acheter votre vélo en ligne