[jQuery] Cluetip test

**Benat64** · 25/11/2008, 15h49

Bonjour,

Je voudrais tester jquery pour mon site et je tourne en rond sur un exemple basique.
Une partie de l'architecture du site est en mvc avec phpmvc.

Donc je rajoute dans un fichier .tpl le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<?php 
$titrePage="Consultation";
include 'header.tpl';
require_once '../Asfo/agendaNewsFunc.php';
 
/***On recupere les données****/
$domaine = $request->getAttribute('domaine');//le domaine de niveau 1
$tabForm = $request->getAttribute('tabForm');//récupère le sous arbre de $domaine
$tabDom = $request->getAttribute('tabDom');//récupere la liste de tous les domaine de niveau1
$tabCont = $request->getAttribute('tabCont');//liste de tous les contacts du domaine de niveau 1
 
// on appel l'agenda 
$tableauAgenda=array();
$tableauAgenda=Get_Agenda_Par_Mois(14,0);
$debutdateur=false;
?>
 
// Début lignes se rapportant pas à jquery 
<script src="http://localhost/asfoovh/Asfo/jquery/cluetip/jquery-1.2.5.min.js" type="text/javascript"></script>
<script src="http://localhost/asfoovh/Asfo/jquery/cluetip/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="http://localhost/asfoovh/Asfo/jquery/cluetip/jquery.cluetip.js" type="text/javascript"></script>
<script src="demo.js" type="text/javascript"></script>
 
<link rel="stylesheet" href="http://localhost/asfoovh/Asfo/jquery/cluetip/jquery.cluetip.css" type="text/css" />
<link rel="stylesheet" href="demo.css" type="text/css" />
 // Fin de lignes se rapportant pas à jquery
 
<div id="wrapper">
 <div id="blognav">
  <div class="blognavmenu">
 
// Début lignes se rapportant pas à jquery
   <div id="examples"> 
    <ol>
     <li>
      <a class="title" href="#" title="Titre|The first set of body content comes after the first delimiter in the title.|In this case, the delimiter is a pipe.">Exemple</a>   
      <div class="html">View the HTML</div>
      <pre><code>&lt;a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe"&gt;</code></pre>
      <div class="jquery">View the jQuery</div>
      <pre><code>$('a.title').cluetip({splitTitle: '|'});</code></pre>
     </li>
    </ol>
   </div>
............ // la suite n'est plus en rapport.

Je précise que :
- j'ai écris les chemins en absolu pour voir si cela venait de là, rien
- j'ai essayé de mettre les link et script directement dans le <head> du fichier header.tpl : rien
- j'ai vérifié l'existence des fichier dont à besoin jquery et leur chemin tout est OK.

Je ne vois pas mon erreur, elle doit être énorme.
Sur le fichier html exemple (dossier télécharger cluetip 0.9.8), cela marche chez moi en local.

Une aide serait la bienvenue, car je sature.

Or je dois aller beaucoup plus loin dans mon besoin, il faut que je puisse afficher dans le popup des infos de 1 ou plusieurs lignes d'enregistrement d'une table contact.
Donc j'aimerais mettre une variable qui correspond à une valeur d'une ligne d'une table, dans les options ajax.settings:{} : je ne sais pas comment faire.

Puis dans ajaxProcess : récupérer cette valeur afin de filtrer un fichier xml.
Pour finir, il faut que je puisse afficher ces données trouvées dans un fichier de présentation.
Je suis très loin d'y arriver

J'espère être clair.
Merci pour vos conseils, assistances, je suis complètement novice dans le dév ajax et n'ai pas beaucoup de temps actuellement pour approfondir, désolé.

Benoit

**Bovino** · 25/11/2008, 16h44

Ote-moi d'un doute, le code qui pose problème, c'est pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<code>$('a.title').cluetip({splitTitle: '|'});</code>

quand-même ???

Sinon, montres-nous le code html généré et le vrai code javascript, ça aidera mieux à voir ton souci.

**Benat64** · 25/11/2008, 16h58

Salut Bovino,

Ben si :
<code>$('a.title').cluetip({splitTitle: '|'});</code>

J'ai repris bêtement les fichiers demo.js et demo.css
voici le fichier non retouché demo.js que j'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/ $.fn.cluetip.defaults.debug = true;
$(document).ready(function() {
 
 // $.cluetip.setup({insertionType: 'insertBefore', insertionElement: 'div:first'});
 
//default theme
  $('a.title').cluetip({splitTitle: '|'});
  $('a.basic').cluetip();
  $('a.custom-width').cluetip({width: '200px', showTitle: false});
  $('h4').cluetip({attribute: 'id', hoverClass: 'highlight'});
  $('#sticky').cluetip({'sticky': true,'closePosition': 'title'});
  $('#examples a:eq(5)').cluetip({
    hoverClass: 'highlight',
    sticky: true,
    closePosition: 'bottom',
    closeText: '<img src="cross.png" alt="close" width="16" height="16" />',
    truncate: 60
  });
  $('a.load-local').cluetip({local:true, hideLocal: false, arrows: true, cursor: 'pointer'});
  $('#clickme').cluetip({activation: 'click', width: 650});
 
// jTip theme
  $('a.jt:eq(0)').cluetip({
    cluetipClass: 'jtip', 
    arrows: true, 
    dropShadow: false,
    sticky: true,
    mouseOutClose: true,
    closePosition: 'title',
    closeText: '<img src="cross.png" alt="close" />'
  });
  $('a.jt:eq(1)').cluetip({cluetipClass: 'jtip', arrows: true, dropShadow: false, hoverIntent: false});
  $('span[@title]').css({borderBottom: '1px solid #900'}).cluetip({splitTitle: '|', arrows: true, dropShadow: false, cluetipClass: 'jtip'});
 
  $('a.jt:eq(2)').cluetip({
    cluetipClass: 'jtip', 
    arrows: true, 
    dropShadow: false, 
    height: '150px', 
    sticky: true,
    positionBy: 'bottomTop'    
  });
 
  $('a.jt:eq(3)').cluetip({local: true, hideLocal: false});
 
  $('a.jt:eq(4)').cluetip({
    cluetipClass: 'jtip', arrows: true, 
    dropShadow: false, 
    onActivate: function(e) {
      var cb = $('#cb')[0];
      return !cb || cb.checked;
    }
  });
// Rounded Corner theme
  $('ol.rounded a:eq(0)').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', showtitle: false});
  $('ol.rounded a:eq(1)').cluetip({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'mouse'});
  $('ol.rounded a:eq(2)').cluetip({cluetipClass: 'rounded', dropShadow: false, showtitle: false, positionBy: 'bottomTop', topOffset: 70});
  $('ol.rounded a:eq(3)').cluetip({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true});
  $('ol.rounded a:eq(4)').cluetip({cluetipClass: 'rounded', dropShadow: false});    
});
 
//unrelated to clueTip -- just for the demo page...
 
$(document).ready(function() {
  $('div.html, div.jquery').next().css('display', 'none').end().click(function() {
    $(this).next().toggle('fast');
  });
 
  $('a.false').click(function() {
    return false;
  });
});

La partie du fichier html généré, qui pose problème est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="examples"> 
	<ol>
	     <li>
		<a class="title" href="#" title="Titre|The first set of body content comes after the first delimiter in the title.|In this case, the delimiter is a pipe.">Exemple</a>			
	     </li>
	</ol>
</div>

J'ai repris exactement le même exemple que trouvé là en ne prenant que le premier exemple inséré dans mon fichier existant.
Alors que j'ai donwloadé le fichier exemple qui marche en local.

Je ne comprends plus

Benoit

**Bovino** · 25/11/2008, 17h41

Arf... c'est pas tout à fait comme ça que ça fonctionne...
Le code que tu as récupéré est celui qui permet d'afficher du code sur la page !
Remplace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<pre><code>&lt;a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe"&gt;</code></pre>

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe">

supprime :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<pre><code>$('a.title').cluetip({splitTitle: '|'});</code></pre>

et ajoute entre les balises head de ta page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
    $('a.title').cluetip({splitTitle: '|'});
});
</script>

Ca devrait aller mieux

**Benat64** · 26/11/2008, 10h05

Bonjour Bovino et à tous,

Je repars à zéro dans mes explications et j'esssaye d'être plus précis.

Je travaille avec le framework phpmvc et donc code avec l'architecture MVC.
Je désire insérer un popup qui doit récupérer dans un fichier xml certaines infos.

Donc j'essaye "basiquement" l'exemple donné Demo Cluetip en téléchargeant le dossier. Tous les exemples marchent en local.

Maintenant je reprends le code du 1er exemple "basic tip from title" dans "Default Style" que j'insère dans mon fichier toto.tpl.
A savoir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  <script src="../jquery-1.2.5.min.js" type="text/javascript"></script>
  <script src="../jquery.hoverIntent.js" type="text/javascript"></script>
  <script src="../jquery.cluetip.js" type="text/javascript"></script>
  <script src="demo.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../jquery.cluetip.css" type="text/css" />
  <link rel="stylesheet" href="demo.css" type="text/css" />

Je fais bien attention de placer les fichier *.js et *.css dans les bons dossiers.

Puis je place ensuite le code qui suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
		<div id="container">
			<div id="examples"> 
				<ol>
					<li>
						<a class="title" href="#" title="This is the title|The first set of body content comes after the first delimiter in the title.|In this case, the delimiter is a pipe.">Exemple</a>			
					</li>
				</ol>
			</div>
		</div>

Je ne modifie rien dans les fichiers *.js, ni *.css.
Or là, je n'affiche pas correctement le popup title contrairement à l'exemple en local. Il s'affiche comme un title classique

Je change pour voir la ligne de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="title" href="#" title="This is the title|The first set of body content comes after the first delimiter in the title.|In this case, the delimiter is a pipe.">Exemple</a>

Par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="basic" href="ajax.htm" rel="ajax.htm">Exemple</a>

en rajoutant le fichier ajax.htm au bon endroit. Maintenant, il ne m'affiche plus rien du tout. Pas de popup.

Je ne comprends pas car je ne modifie en rien les fichiers *.js ni les css.
Je me demande si ce n'est pas parce que je suis dans un fichier *.tpl (ce qui ne devrait pas avoir d'incidence).

Merci pour votre aide, idées, conseils,....
Benoit

[jQuery] Cluetip test

jQuery

Vue hybride

Discussions similaires

Partager

Partager