GESTION DE WIDGETS (INTERFACE DU TYPE INETTUTS)
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
13 juil. 2012 à 15:06
testabc - 26 févr. 2014 à 11:04
testabc - 26 févr. 2014 à 11:04
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/54406-gestion-de-widgets-interface-du-type-inettuts
https://codes-sources.commentcamarche.net/source/54406-gestion-de-widgets-interface-du-type-inettuts
26 févr. 2014 à 11:04
Pour la source du coup, si je n'ai pas d'exemple, je n'irais pas plus loin.
15 sept. 2012 à 09:50
Merci pour le lien;
Je n'ai pas encore eu le temps de me pencher sur le sujet, mais je ne l'oublie pas.
Dans l'idée je l'utiliserais bien dans mon CMS préféré (Xoops) pour permettre à l'utilisateur d'organiser lui même sa page par exemple.
Il faut que ça murisse encore un peu, en tout cas je me répète, super boulot.
JJDai
15 sept. 2012 à 01:48
13 juil. 2012 à 23:47
d'un point de vus interface ça ouvre des horizons inintéressants.
JJDai
13 juil. 2012 à 23:46
Merci pour ce complément d'information, je vais décortiquer tout avec un grand intérêt.
d'un point de vus interface ça ouvre des horizons inintéressants.
Je donnerai des complément d'information dès que j'aurai avancé sur le sujet.
La difficulté pour moi ça va être comment intégrer ça dans l'existant sans tout cassé lol.
JJDAI
13 juil. 2012 à 22:50
Voici quelques réponses, au cas ou mon "franglais" serait incompréhensible
Pour partir d'une page vierge, il suffit d'éditer example1.html et de supprimer le contenu du "else"
if (cook != null) {
// load the last configuration
widgetI.load(cook, myCaption, myWidget);
}
else {
// construct the default configuration
}
Ainsi, après avoir vidé le cache du navigateur utilisé, la config par défaut sera une page vide
Pour rajouter des lignes et des colonnes en direct, le plus simple est d'appuyer sur le bouton "extended mode" et d'utiliser les boutons
"Add line", "Add column"...
L'action correspondante est visible très simplement dans le code. Example:
Grosso modo, il y a 4 méthodes importantes
addRowColumn( start, canRemove, canMove)
addRow ( start, canRemove, canMove)
addColumn ( start, canRemove, canMove)
addCell (widgetId, widgetTitle, widgetHtml, start, canRemove, canMove, handleState)
La 1ère est une concaténation de la 2 et la 3 (et c'est celle utilisé sur l'exemple lors d'un ajout de ligne)
start, canRemove, canMove sont des paramètres facultatifs qui par défaut valent: undefined, true, true. Par défaut, si start n'est pas renseigné (donc undefined), tout ajout est fait par rapport à l'élément sélectionné courant (le dernier sur lequel on a cliqué). Le css mis en place dans cet exemple fait que le titre du widget sélectionné est blanc au lieu de jaune. Lorsque c'est une "colonne" ou une "ligne" qui est sélectionnée, une légère couleur apparait en fond; Tout cela est paramétrable bien sûr.
La seule difficulté à mon sens est la fonction addCell, qui necessite 3 paramètres de plus:
une clé, un titre et le code html du widget
Lors de l'ajout d'un widget, la clé n'a aucun rôle (ce pourrait être une constante !).
Cependant, dans le cas où on voudrait sauver une configuration donnée pour ensuite la recharger, elle est necessaire et doit donc être unique pour chaque widget différent.
widgetI.save();
--> construit et renvoi un JSON où le widgetId va être stocké, mais pas le titre ni le contenu, qui doivent donc pouvoir être retrouvés à partir du widgetId stocké
widgetI.load(json, myCaption, myWidget)
--> charge la structure json, et utilise les fonctions myCaption et myWidget pour reconstruire le widget en fonction des widgetId présents dans le json)
Le mieux est encore de voir le source pour comprendre
*********************************************************************
Note: le site mywebdev.free.fr est entièrement construit avec cette classe.
En gros, j'ai structuré mes pages en blocs déterminés par des div
...
dont le css est "div.main {visibility:hidden;}" ceci afin d'éviter des effets de clignotement lorsque le javascript est exécuté à la fin du chargement de la page
J'ai une fonction initPageBegin qui:
- crée une ligne et 2 colonnes,
- redimensionne la 1er colonne à 400px et la deuxième à 100%,
- rempli la 1ère colonne avec le menu du site
var theColumn = initPageBegin(widgetI);
J'utilise ensuite une fonction ...
function extractHtml(id, b) {
var tmp = jQuery("#" +id).html();
jQuery("#" +id).remove();
if (b) return "
" +tmp +"
"; else return tmp;
}
... pour déplacer les
dans ma structure ligne/colonne créé par ma variable widgetI, div que je transforme donc en widget via l'appel:
cell = widgetI.addCell("", "titre", extractHtml("monId", true), cell, false, false);
(ici la clé n'est pas utilisée, puisque ces widgets sont fixés par le webmaster, et non déplacables)
Voilà, j'espère que tu y vois un peu plus clair...
13 juil. 2012 à 15:36
Sorry je n'avais pas vu le deux liens dans l'encart de "source".
JJDai
13 juil. 2012 à 15:06
C'est absolument génial et j'y vois des applications inintéressantes, mais je ne comprends pas comment l'utiliser.
J'essaie de décortiquer l’exemple, mais j'ai un peu de mal.
Serait-il possible d'avoir les principaux point d'entrées en partant de zéro par exemple?
Comment et ou créer les colonnes et les lignes.
Comment et ou créer les iframes avec leu contenu.
J'adapterais bien ça dans mon CMS préféré Xoops.
JJDai