Fork me on GitHub

Vdrag, ou comment jouer avec les blocs !!
11
200730
Juillet
  Venom Thème 6127

Vdrag (basé sur "Mor.Pho.GEN.e.sis") est une réplique du thème Vart, mais limité à 980px en largeur et n'affiche pas de bannière.

Ce thème a la particularité d’utiliser un système de drag and drop (glisser, déposer) pour ses blocs...

Chaque page peut être différemment disposée et le positionnement des blocs enregistré dans un cookie.

Open in new window

Téléchargement & Démo

Envie de faire du Drag and Drop (Glisser-déposer) avec vos thèmes

Le site "http://www.dhtmlgoodies.com" nous propose un script simple : il vous faut appeler un fichier "js" dans theme.html (vous le trouverez dans le dossier "JS" de l'archive, il est nommé dragable-content.js) juste au dessus de <{$xoops_module_header}> entre <"head"> et <"/head">.

<script type="text/javascript">
    var rememberPositionedInCookie = true;
    var rememberPosition_cookieName = 'dragable';
    </script>    
    <script type="text/javascript" src="<{xoImgUrl /js/dragable-content.js}>"></script>


Ensuite vous devez créer un nouveau <"div"> qui entoure chaque bloc qui doit bouger.
Exemple pour les éléments "content" :
<div class="dragableElement">
<div id="xo-content"><{$xoops_contents}></div>
</div>


Pour les blocs de gauche et de droite modifier blockzone.hmtl comme ceux-ci.
<{foreach from=$blocks item=block}>
<div class="dragableElement">
<div class="xo-block <{$block.module}>">
<{if $block.title}><div class="xo-blocktitle"><{$block.title}></div><{/if}>
<div class="xo-blockcontent"><{$block.content}></div>
</div>
</div>
<{/foreach}>


Ensuite assurez-vous d’avoir correctement dimensionnés vos blocs, vous trouverez à la fin de block.css de notre theme les tailles à renseigner impérativement.
/* block haut et bas central */
#xo-page-topleftblocks .xo-block, #xo-page-toprightblocks .xo-block,#xo-page-bottomleftblocks .xo-block, #xo-page-bottomrightblocks .xo-block {
width: 280px;
}
/*block central */
#xo-page-topcenterblocks .xo-block, #xo-page-bottomcenterblocks .xo-block {
width: 600px;
}
/* bloc droite */
#xo-canvas-rightcolumn .xo-block {
width: 170px;
}
/* bloc gauche */
#xo-canvas-leftcolumn .xo-block {
width: 190px;
}


Voilà les blocs sont "dragables" et ils sont enregistrés dans le cookie sur le pc du visiteur, toutes les pages peuvent être différemment personnalisées.

Merci à Kris pour le debug :)
Note: 0.00 (0 votes) - Noter cet article -

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Semi pro
Inscrit le: 22/02/2004
De:
Contributions: 997
kraven30 Posté le: 31/07/2007 00:57  Mis à jour: 31/07/2007 00:57
 Re: Vdrag, ou comment jouer avec les blocs !!
Merci, c'est simpa ce système

++
Régulier
Inscrit le: 16/10/2005
De:
Contributions: 140
Slipkorn Posté le: 31/07/2007 03:05  Mis à jour: 31/07/2007 03:05
 Re: Vdrag, ou comment jouer avec les blocs !!
Vraiment superbe cette fonction BRAVO.

Seuls petits regret, que les autres blocs ne se décalent pas automatiquement.

Sinon, savez vous s'il est possible de faire en sorte que ce script ne fonctionne QUE sur la page d'accueil ?
Newbie
Inscrit le: 05/10/2006
De:
Contributions: 13
Antienne Posté le: 31/07/2007 08:57  Mis à jour: 31/07/2007 08:57
 Re: Vdrag, ou comment jouer avec les blocs !!
C'est vraiment génial comme idée, même si ça risque de donner des présentations un peu chaotique.
L'idéal serait quelque chose comme iGoogle où les emplacements sont prédéterminés, pour que la mise en page reste claire & alignée.
Il faudrait ensuite pouvoir ajouter & supprimer des blocs & là, ça serait le pied.
Régulier
Inscrit le: 06/09/2005
De: Tours
Contributions: 306
kryxx Posté le: 31/07/2007 11:47  Mis à jour: 31/07/2007 11:47
 Re: Vdrag, ou comment jouer avec les blocs !!
ca me rappelle le web 2.0 avec des sites de rss comme la page de google ou netvibes. c'est genial et permet d'agrementer suivant ses interets premiers. un fondu de theme ne sera pas obligatoirement interressé par la prog du core...
La question est : est ce que la "réorganisation" est enregistrée par un cookie par exemple pour la retrouver une fois connecté ?
Régulier
Inscrit le: 06/09/2005
De: Tours
Contributions: 306
kryxx Posté le: 31/07/2007 13:50  Mis à jour: 31/07/2007 13:51
 Re: Vdrag, ou comment jouer avec les blocs !!
mer.. autant pour moi Open in new window
donc c'est vraiment genial
Aspirant
Inscrit le: 10/11/2004
De: Nantes
Contributions: 30
herblinois Posté le: 31/07/2007 20:23  Mis à jour: 31/07/2007 20:23
 Re: Vdrag, ou comment jouer avec les blocs !!
Une nouvelle fonction bien sympathique :idea:
Beau boulot :-o
Aspirant
Inscrit le: 12/10/2004
De: Dinant, Belgique
Contributions: 88
klamort Posté le: 01/08/2007 07:28  Mis à jour: 01/08/2007 07:28
 Re: Vdrag, ou comment jouer avec les blocs !!
Y aurait-il une possibilité que cette fonction ne soit accessible qu'aux webmasters... cela serait genial de voir les changements que l'on pourrait faire pour la présentation de son site.

En tout cas une très belle option... merci
Aspirant
Inscrit le: 13/06/2003
De: Metz
Contributions: 69
jmini Posté le: 05/08/2007 14:26  Mis à jour: 05/08/2007 14:26
 Re: Vdrag, ou comment jouer avec les blocs !!
C'est très simple :
Dans le fichier theme.html, tu peux avoir accès à la variable $xoops_isadmin pour savoir si la personne est administrateur (en gros cette variable sert à afficher le lien "administration" dans le menu utilisateur)

Donc tu installe tout comme c'est écrit dans cet article (je ne l'ai pas fait, mais je suis sur que cela marche)
Ensuite tu appelle le script JavaScript (les lignes de code que l'on te fait rajouter au dessus de <{$xoops_module_header}> entre <"head"> et <"/head">) que pour l'administrateur en ajoutant un test "if" en smarty :
Les lignes que tu ajoutes sont donc :
[b]<{if $xoops_isadmin}>[/b]
    <script type="text/javascript">
    var rememberPositionedInCookie = true;
    var rememberPosition_cookieName = 'dragable';
    </script>    
    <script type="text/javascript" src="<{xoImgUrl /js/dragable-content.js}>"></script>
[b]<{/if}>[/b]


Pour l'admin le script va fonctionner, pour les non-admin, ils auront juste des <div class="dragableElement"> en plus dont ils ne feront rien.

Après si tu veux que cela soit super propre tu ajoutes le même test conditionnel sur toutes les modifs que tu fais...
Semi pro
Inscrit le: 19/08/2006
De: Paris
Contributions: 520
nicemen Posté le: 29/10/2007 05:32  Mis à jour: 29/10/2007 05:32
 Re: Vdrag, ou comment jouer avec les blocs !!
Si ça peut intérrésser c'est un code qui devrait être complémentaire au Vdrag !?
Je ne sait pas plus, pas eu le temps d'étudier encore, je suis novices donc je préfère pas dire de bétises, je vous laisse juger par vous mêmes !

Code pour Web 2.0 genre NetVibes
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

30 Personne(s) en ligne (2 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 30 | Plus ...