jQuery

Tous les codes présentés ici se trouvent dans le même script originalcompo.js. Pour télécharger le script, cliquez sur le lien ci-dessous

All the sources are in an unique script originalcompo.js. To download the script (and the jQuery used by it), click on the link bellow.

Téléchargements / Download

Construisez une interface de type "iGoogle" avec des fonctionnalités uniques:

Vous n'êtes plus limité par un nombre fixé de colonnes où organiser vos widgets sur votre page: comme vous pourrez le tester par vous même (voir lien plus bas) ou bien le constater sur certaines pages de ce site, vous pouvez organiser vos widgets par lignes, chacune d'elle pouvant avoir un nombre différent de colonnes. Un widget pourra être déplacé n'importe où, sa largeur s'adaptant à la largeur de la colonne d'arrivée
Vous pouvez créer des colonnes de tailles distinctes.
Les dimensions des colonnes peuvent être définies en px (pixels) ou/et % !

Build an iGoogle interface style with some unique functionnality:

You are not limited by a unique number of columns of widget. You can organize widgets on differents rows, each row can have any number of columns
For a row, you can even choose to have columns of differents widths
The sizes of the columns can be determinated in pixel, % and you can mixed the two !!!

Tutoriel ... en anglais débutant ;-)
Testez en direct

Note: tout le site est construit à partir de cette classe !

Remark: all the pages of this web site are built with oc.WidgetInterface !

Classe javascript permettant d'afficher un message clignotant (banière du site par exemple)

Exemples:

Cliquez ici pour voir le code ayant servi à générer l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  
<HEAD>
  <TITLE>DIVERS</TITLE>
  ...
  <link   rel="Stylesheet"       type="text/css"         href="../DEMARRAGE/jquery.ui.theme.css"/> 
  <script src="../DEMARRAGE/jquery-1.7.2.js"></script>
  <script src="../DEMARRAGE/jquery-ui-1.8.18.custom.min.js"></script>
  <script src="../DEMARRAGE/originalCompo.js"></script>
  ...
</HEAD>

<BODY> 
...
  <div id="EXEMPLENEON1"></div><div id="EXEMPLENEON2"></div>
...

<script language="JavaScript">
...
  function themessages1(i) {
    if (i>1) i=0;	
    var msg;
    
    switch (i) {
      case 0: msg = 'This is a demonstration of another class : <b>oc.Neon</b>'; break;
      case 1: msg = 'You can choose the number of messages you want'; break;
    }
    return {"ind" : i, "msg" : msg };
  }
  
  function themessages2(i) {
    if (i>10) i=0;	
    return {"ind" : i, "msg" : "<h3>"+(10-i).toString()+"</h3>" };
  }

  var x1 = new oc.Neon('NN1', '100%', '80px', 'NT1', "#CCFFCC", "#FF0033", themessages1, 25,3000); 
  var x2 = new oc.Neon('NN2', '100%', '80px', 'NT2', "#FFF000", "#000FFF", themessages2, 12,2000); 
  
  jQuery("#EXEMPLENEON1").append(x1.htmlCode);
  jQuery("#EXEMPLENEON2").append(x2.htmlCode);
...
</script>
...

oc.Neon(backgroundId, width, height, textId, colorA, colorB, messages, steps, wait, flashspeed)
- backgroundId : id unique pour chaque Neon créé. Sert à trouver l'élément dont il faut changer la couleur de fond
- width/height : longueur et hauteur du message (attention, si le message est trop grand, la zone s'aggrandie)
- textId : id unique pour chaque Neon créé. Sert à trouver l'élément dont il faut changer la couleur de la police
- colorA : la couleur de fond de départ
- colorB : la couleur de départ du message
- fonction retournant une structure de la forme {"ind" : i, "msg" : msg }; où i est l'indice du message et msg le message à afficher (voir code pour un exemple)
- steps : nombre d'étapes dans le cacul du dégradé
- wait : lorsque le dégradé s'est achevé, temps d'attente avant que le changement de couleur ne reprenne en sens inverse
- flashspeed : temps d'attente entre chaque étape de changement de couleur, hors attente finale (wait)

Diverses routines travaillant sur les couleurs, notamment les dégradés:

getFadeColors(colorA, colorB, colorsArr, len): permet de remplir un tableau des couleurs dégradées pour aller de colorA à colorB
Exemple d'utilisation
```
var arrColors = new Array(10);
oc.colors.getFadeColors("#000000", "#FFFFFF", arrColors, 10);
```
colorBetween(colorA, colorB, i, len) : permet de calculer la couleur correspondant à la i-ième couleur du tableau de la fonction précédente.
Exemple d'utilisation
```
var color3 = oc.colors.colorbetween("#000000", "#FFFFFF", 3, 10);
```

Note: ces routines sont utilisées dans la classe oc.Neon présenté plus bas

Une question récurrente que l'on trouve dans les forums est: comment calculer la hauteur d'un iframe ?

Voici une qui répond au problème...

est une nouvelle classe permettant d'afficher une div de manière modale, et surtout d'appeler en cascades une séries de fenêtres modales.
En annexe, des conseils pour utiliser cette fonction dans une page ASP.NET, et pour l'implémentation au sein d'un repeater