|
|
Javascript et Xoops 2.4.4 |
|
Régulier  
Inscrit: 24/01/2008 09:20
De Moselle
|
Voilà je me lance dans l'inconnu... le monde du jseffect. Ceci est parti d'une volonté de ma part d'avoir un texte avec un effet accordeon dans un article PUBLISHER. Après moultes recherches je tombe sur le javascript et me rend compte quand dans le dossier JSEFFECT nous disposons des scripts de RICO qui propose un effet accordéon. Bon début n'est ce pas... Prochaine étape.. utiliser ce code. Je parcours le forum et vois tout ce que je trouve à ce sujet mais je bloque (sinon je ne posterais pas d'ailleurs). J'ai déclaré le script dans mon thème.html dont voici le bout de code:
<!-- Module Header --> <{$xoops_module_header}> <script type="text/javascript" src="<{xoAppUrl /jseffects/rico/src/rico.js}>"></script> </head>
seulement ben je ne sais pas quoi faire ensuite. Comment appeler ce script dans mon article sous publisher? Merci pour le coup de pouce
Posté le : 05/03/2010 11:20
|
|
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
Régulier Inscrit: 24/01/2008 09:20
De Moselle
|
personne pour un petit coup de pouce pour un début?
Edit: j'ai trouvé un dossier "accordion" sous JQUERY, je vais tenter de faire tourner celui-ci.
Posté le : 11/03/2010 10:12
|
|
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
|
Guest_
|
b'soir
As-tu trouvé la solution sur le site JQUERY ?
Posté le : 14/03/2010 00:44
|
|
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
Régulier Inscrit: 24/01/2008 09:20
De Moselle
|
bon je m'y remets suite à une pause due à diverses soucis de santé. Je me suis donc pencher sur la question et je suis tombée sur ce tuto: http://docs.jquery.com/Tutorials:Accordion_Menu_%28Screencast%29Jusque là rien de grave je le comprends, je crois juste que je ne sais pas le transposer sous xoops. J'ai donc mis dans mon thème.html, son code:
<script type="text/javascript" src="<{xoAppUrl /jseffects/jquery/jquery.js}>"></script>
<script> $(document).ready(fonction(){
$(*dd:not(:first)*).hide();
$(*dt a*).click(function(){
$(*dd:visible*).slide(*slow*); $(this).parent().next().slideDown(*slow*);
return false;
});
</script>
<style>
body { font-family: Arial; font-size: 16px; }
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
</style>
Puis dans mon article sous publisher j'ai mis le code qui suit, à savoir:
<dl>
<dt><a href="/">jQuery</a></dt>
<dd>
<ul>
<li><a href="/src/">Download</a></li>
<li><a href="/docs/">Documentation</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</dd>
<dt><a href="/discuss/">Community</a></dt>
<dd>
<ul>
<li><a href="/discuss/">Mailing List</a></li>
<li><a href="/tutorials/">Tutorials</a></li>
<li><a href="/demos/">Demos</a></li>
<li><a href="/plugins/">Plugins</a></li>
</ul>
</dd>
<dt><a href="/dev/">Development</a></dt>
<dd>
<ul>
<li><a href="/src/">Source Code</a></li>
<li><a href="/dev/bugs/">Bug Tracking</a></li>
<li><a href="/dev/recent/">Recent Changes</a></li>
</ul>
</dd>
</dl>
Que j'ai simplement collé dans publisher en passant par la fonction "html". Le résultat est le suivant: http://www.s149789846.onlinehome.fr/x ... lisher/item.php?itemid=66C'est "pas mal" mais c'est loin de ressembler à son résultat à lui lol
Posté le : 15/04/2010 13:44
|
|
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
Régulier Inscrit: 24/01/2008 09:20
De Moselle
|
une petite piste?
Posté le : 20/04/2010 14:15
|
|
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
Supporter Xoops  
Inscrit: 09/01/2005 13:37
De Breizh
|
Je ne vois aucun effet, mais si tu veux un accordéon tout simple, regardes ce que j'ai fais dans le thème d'admin zetadigme - et sans avoir besoin de javascript
@+
Posté le : 20/04/2010 18:09
|
|
La connaissance s'accroît quand on la partage ...
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
Régulier Inscrit: 24/01/2008 09:20
De Moselle
|
je ne vois aucun effet non plus mais je ne sais pas pourquoi. Je vais regarder ton thème, je ne cherche rien de sophistiqué en effet; ce qui se trouve en bas à droite de l'accueil de l'admin me conviendrait parfaitement.
Par contre qu'on soit bien d'accord, il s'agit pour moi d'intégrer cela à un article publisher.
Posté le : 22/04/2010 09:31
|
|
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
Xoops accro  
Inscrit: 27/07/2005 16:10
De France
|
bonjour est-ce que tu veux faire un truc de ce genre? car si c'est le cas celui-ci est très facile à mettre en place.
Posté le : 22/04/2010 09:52
|
|
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
Régulier Inscrit: 24/01/2008 09:20
De Moselle
|
Bon je vais montrer ce que je souhaiterais. J'ai actuellement cet article (test, mise en forme pas top pour le moment): http://www.s149789846.onlinehome.fr/x ... lisher/item.php?itemid=30Cela va vite devenir "imbuvable". Je voudrais donc faire un tableau par année et lorsque je clique sur l'année cela m'affiche le tableau de cette année Ainsi en arrivant sur l'article on verrait: 2008 2009 2010 et si je clique sur l'année de mon choix le tableau apparait dans la page (je voulais éviter de faire un article pour chaque année avec un lien vers cet article). Je ne cherche donc rien de bien compliqué ou extravagant. J'étais tombé sur du javascript que j'ai mis en place comme dis plus haut mais il me manque des connaissances xoops je crois. Ceci par exemple: http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htmMais je vois bien où se trouve mon "header" dans une page html classique, or pour moi jusqu'à maintenant le header se trouve dans mon theme.html sous xoops et c'est là que j'ai l'impression de rater quelque chose en fait
Posté le : 22/04/2010 09:56
|
|
|
|
|
Re: Javascript et Xoops 2.4.4 |
|
Xoops accro Inscrit: 27/07/2005 16:10
De France
|
Ce js est très simple à mettre en place. Dans ton theme.html, place le script ci-dessous dans la partie HEAD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ ... "></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<style type="text/css">
.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}
.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}
.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}
.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}
</style>
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' style='width:13px; height:13px' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' style='width:13px; height:13px' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script> il te faut également placer le fichier js sur ton serveur est ensuite paramétrer l'adresse dans le code ci-dessus selon l'hallucination que tu lui a faite. Ensuite, place le script ci-dessous à l'endroit où tu veux afficher dans ton modules <h2>Example 1:</h2>
<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>
<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="http://i10.tinypic.com/7xlrga1.jpg" />
The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.
</div>
<h3 class="mypets">Cats</h3>
<div class="thepet">
The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
</div>
<h3 class="mypets">Rabbits</h3>
<div class="thepet">
Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.
</div>
<p><a href="currentpage.htm?mypets=2">Reload page and select the 3rd content using a URL parameter</a></p>
<br />
<h2>Example 2:</h2>
<a href="#" onClick="ddaccordion.collapseall('technology'); return false">Collapse all</a> | <a href="#" onClick="ddaccordion.expandall('technology'); return false">Expand all</a>
<div class="technology">What is JavaScript?</div>
<div class="thelanguage">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>
<div class="technology">Difference betwen Java & JavaScript?</div>
<div class="thelanguage">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>
<div class="technology">What is Ajax?</div>
<div class="thelanguage">
Ajax is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactiveness of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that the entire web page does not have to be reloaded each time the user performs an action. This is intended to increase the web page's interactivity, speed, functionality, and usability.
</div>
<p><a href="currentpage.htm?technology=0,1,2">Reload page and select the 1st, 2nd, and 3rd contents using a URL parameter</a></p>
Posté le : 22/04/2010 10:14
|
|
|
Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
|
![http://i10.tinypic.com/7xlrga1.jpg"](http://i10.tinypic.com/7xlrga1.jpg"){kind=link}