Sujet Précédent Sujet Suivant

Widget onglets

Résolu
lsamsoumal Messages postés 36 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 27 octobre 2011 - 12 déc. 2008 à 10:31
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 - 12 déc. 2008 à 15:04
bonjour tout le monde
j'ai un petit souci que je vais citer:j'ai un widget développé en javascrpt que je veux y ajouter des onglets de sorte que l'utilisateur puisse naviguer entre ces onglets et accéder chaque fois à un contenu différent.
si quelqu'un peux m'aider ce serait genial.Merci d'avance.

7 réponses

Réponse 1 / 7
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
12 déc. 2008 à 14:37
ça a l'air bien ;o)))))
pas de html ? y'a une gestion d'onglets là dedans ?
et ça plante ? où ?  
tu as un message d'erreur ? tu as déboguer ?
          [mon Site] [M'écrire]  Bul         
3
Réponse 2 / 7
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
12 déc. 2008 à 12:37
bonjour,
t'aider à quoi ?
les onglets, ça regorge d'exemples partout, y compris sur CodesSources
( c'est même là, que tu trouveras le plus d'exemples ;o))
qu'est-ce qui ne fonctionne pas dans ce que tu fais ?
tu as des messages d'erreurs ? avec n'importe quel navigateur ?
si tu nous met l'extrait du code qui plante ( avec le nécessaire, juste
le nécessaire ), on devrait pouvoir t'aider à mettre au point.
Cordialement

         [mon Site] [M'écrire] Bul        
0
Réponse 3 / 7
lsamsoumal Messages postés 36 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 27 octobre 2011
12 déc. 2008 à 13:49
c'etait pas clair????
c'est trés simple: je veux avoir un code js qui me permet d'insérer des onglets dans mon widget(avec changement de contenu à chaque clic sur un onglet).
merci pour votre attention.
0
Réponse 4 / 7
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
12 déc. 2008 à 14:16
si, si ( l'impératrice ) c'est clair !
>> je veux avoir un code js
déjà : quand on veut... on peut
ensuite, tu attends quoi de nous ?
qu'on cherche à ta place ? qu'on te le fasse ? ne rêve pas trop !

          [mon Site] [M'écrire] Bul         
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
lsamsoumal Messages postés 36 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 27 octobre 2011
12 déc. 2008 à 14:24
voici le code js:
useCurl = false;
itemArr = [];
tmpItemArr = []; 
pictureArr = [];
updateCounter = 0;
itemCount = 0;
txtSize = 10;
txtFont = "Arial";


siteURL = "http://www.codelyoko.net/";
titleText = "";


function setUp() {
 start = 0;
 showDescription = 0;


 // prefs
 limit = Math.min(Number(preferences.prefLimit.value), 15);
 preferences.prefLimit.value = limit;
 main_window.shadow = Number(preferences.prefShadow.value)
 updateInterval = Number(preferences.prefUpd.value) - 1;
 reflectionPicture.opacity = (Number(preferences.prefReflection.value) ? 255 : 0);  
 txtSize = preferences.prefTextSize.value;
 txtFont = preferences.prefTextFont.value;
 
    switch (preferences.prefSkin.value) {
        case "Vert" :
            mouseOverColorArticles = "#C6C23D";
            break;
        case "Rouge" :
            mouseOverColorArticles = "#A40011";
            break;
        case "Orange" :
            mouseOverColorArticles = "#E1AB3B";
            break;
        case "Bleu" :
         mouseOverColorArticles = "#7AB4D5";   
            break;
  case "Violet" :
         mouseOverColorArticles = "#B28BEC";   
            break;
        default:
            mouseOverColorArticles = "#A40011";
    }
 
 // Don't allow black on black or white on white if(preferences.prefMid.value "Noir" && preferences.prefTextColor.value "Noir") {
    preferences.prefTextColor.value = "Blanc";
 } if(preferences.prefMid.value "Blanc" && preferences.prefTextColor.value "Blanc") {
    preferences.prefTextColor.value = "Noir";
 }
  articleTextColor (preferences.prefTextColor.value "Blanc" ? "#FFFFFF" : "#000000");


 normalTextColor = "#000000";
 mouseOverColorButtons = "#FFFFFF";


 // Pictures
 titelRowPicture.src = "Resources/" + preferences.prefSkin.value + "_top.png";
 titelRowPicture.reload();


 bottomRowPicture.src = "Resources/" + preferences.prefSkin.value + "_bottom.png";
 bottomRowPicture.reload();


 for(var p in pictureArr) {
  delete pictureArr[p];
 } 
  
 pictureArr = []; 


 pictureTop = 21;
 itemHeight = 18;
 
 for(i = 0; i < limit; i++) {
  pictureArr.push(new Image());
  pictureArr[i].src = "Resources/" + preferences.prefMid.value + "_middle.png";
  pictureArr[i].reload();
  pictureArr[i].vOffset = pictureTop + (itemHeight * i);
  pictureArr[i].hOffset = 2;
 }


 
 bottomRowPicture.vOffset = pictureTop + (itemHeight * i);
 bottomRowPicture.reload();


 // Text
 createBottomRowButtons();
 titlerow.data = "Chargement...";
 
 info.data = "";
 info.color = 0;
 info.vOffset = pictureTop;
 info.height  = (itemHeight * i);
 info.hOffset = 255;
 info.font = txtFont;
 info.size = Number(txtSize)+1;


 timetxt.size = Number(txtSize)-1;;
 timetxt.font = txtFont;
  
 updButton.data = "";
 prevButton.data = "";
 nextButton.data = "";


 ShowDescriptionButton.data = "Details >>"; ShowDescriptionButton.onMouseEnter "ShowDescriptionButton.color '" + mouseOverColorButtons + "';"; ShowDescriptionButton.onMouseExit "ShowDescriptionButton.color '#000000';"; ShowDescriptionButton.onMouseUp "showDescription !showDescription; info.opacity = showDescription?255:0; ShowDescriptionButton.data = showDescription?"Details <<":"Details >>"; ";


 CodeLyokoPicture.onMouseUp = "openURL(siteURL);";
 
 
 if(!main_window.visible) {
  main_window.visible = true;
 }
    //main_window.recalcShadow();
    updateNow();
}


function fetchData(theURL) {
 if(useCurl) {
  return runCommand("curl -s -S '" + theURL + "'");
 } else {
  return (new URL()).fetch(theURL); 
 }
}


function update(startVal, updateDisplay) {
    start = startVal;
 titlerow.data = "Recharger...";
 updButton.data = "";
 info.data = "";
 if(updateDisplay)
  updateNow();


 rssURL = "http://127.0.0.1/recup.xml";


    var urlData = fetchData(rssURL);


 if(urlData.length && urlData !"Chargement impossible" && urlData.indexOf("curl: (") -1) {
  for(i in itemArr) {
   delete itemArr[i].txtObj;
   delete itemArr[i].dateTxtObj;
   delete itemArr[i];
  }


  for(i in tmpItemArr)
   delete tmpItemArr[i];


  itemArr = []; 
  tmpItemArr = []; 


        distillItems(urlData);       


 } else {
  if(!itemArr.length) {
   theItem = new Object();
   theItem.title = "Chargement impossible";
   theItem.description = "Information introuvable.";
   theItem.id = 0;
   theItem.updDate = "";
   itemArr.push(theItem); 
  }
 }
    updateDisplayList();
}


function updateDisplayList() {
 itemTop = 31;
 itemHeight = 18;
 
 for(i = 0; i < itemArr.length; i++) {


  // Text
  itemArr[i].txtObj = new Text()
  itemArr[i].txtObj.data = itemArr[i].title;
  itemArr[i].txtObj.font = txtFont;
  itemArr[i].txtObj.size = txtSize;
  itemArr[i].txtObj.color = articleTextColor;
  itemArr[i].txtObj.width = 240;
  itemArr[i].txtObj.hOffset = 7;
  itemArr[i].txtObj.vOffset = itemTop + (itemHeight * i);
  
  itemArr[i].txtObj.onMouseUp = "itemClick(" + i + ");";
  itemArr[i].txtObj.onMouseEnter = "itemMouseEnter(" + i + ");";
  itemArr[i].txtObj.onMouseExit = "itemMouseExit(" + i + ");";


 }


 titlerow.data = titleText;
 timetxt.data = (dateToWeekDay(new Date())) + " " + (new Date()).toString().substr(16,5);
 updButton.data = "Recharger";
 prevButton.data = start > 0 ? "<< Prec." : "";
 nextButton.data = (start + limit) < itemCount ? "Suiv. >>" : "";
}




function distillItems(xml) {


 var itemTag = '';
 var linkTag = '<contenu>';
 var linkEndTag = '</contenu>';
 var titleTag = '<titre>';
 var titleEndTag = '</titre>';
 var descriptionTag = '';
 var descriptionEndTag = '';
 var dateTag = '<dateinsertion>';
 var dateEndTag = '</dateinsertion>';
 var item = '';


    xml = CDATAFix(xml);


 bailOut = 0;
 var itemIndex = xml.indexOf(itemTag);
 while(itemIndex > -1 && bailOut++ < 100) {
  startIndex = itemIndex  + itemTag.length;
  item = xml.substring(startIndex, xml.indexOf(itemEndTag, startIndex));


        theItem = new Object();


        // Title
        startIndex = item.indexOf(titleTag) + titleTag.length;
        theItem.title = item.substring(startIndex, item.indexOf(titleEndTag, startIndex));
       
        // Link
        startIndex = item.indexOf(linkTag) + linkTag.length;
        theItem.link = item.substring(startIndex, item.indexOf(linkEndTag, startIndex));


        // Description
        startIndex = item.indexOf(descriptionTag) + descriptionTag.length;
        theItem.description = item.substring(startIndex, item.indexOf(descriptionEndTag));


        // Date
        startIndex = item.indexOf(dateTag) + dateTag.length;
        theItem.updDate = dateFix(item.substring(startIndex, item.indexOf(dateEndTag)));


        tmpItemArr.push(theItem);


  // Next
  itemIndex = xml.indexOf(itemTag, itemIndex + item.length);
 }
 
 fillList();
}


function CDATAFix(str) {
    str = str.replace(/\<\!\[CDATA\   '>str = str.replace(/]>/g,'');
    str = str.replace(/
/g,'');
 str = str.replace(//g,'(Live)');
 str = str.replace(/hspace=4>/g,'');
 str = str.replace(/http:\/\//g,'');
    str = str.replace(/espn.go.com\/i\//g,'');
    str = str.replace(/&(amp|#38);/g,'&');   
 return str;
}


function dateFix(dateString) {
    // 2004-07-09T09:32:22+02:00
    var year = dateString.substr(0, 4);
    var mon = dateString.substr(5, 2);
    var day = dateString.substr(8, 2);
    var time = dateString.substr(11, 5);


    var date = new Date();
    date.setYear(year);
    date.setMonth(Number(mon) - 1);
    date.setDate(day);
    date.setHours(12);
    var wDay = dateToWeekDay(date);
   
    return wDay + " " + time;
}


function dateToWeekDay(date) {
    date.setHours(12);
    var wDay = date.getDay()
    if (wDay==0) wDay="Dim";
    if (wDay==1) wDay="Lun";
    if (wDay==2) wDay="Mar";
    if (wDay==3) wDay="Mer";
    if (wDay==4) wDay="Jeu";
    if (wDay==5) wDay="Ven";
    if (wDay==6) wDay="Sam";
    return wDay;
}


function fillList() {
    for(i in itemArr) {
        delete itemArr[i].txtObj;
        delete itemArr[i].dateTxtObj;
        delete itemArr[i];
    }
 itemArr = [];
 itemCount = tmpItemArr.length;
 for(var i = start; i < (start+limit) && i < itemCount; i++) {
  itemArr.push(tmpItemArr[i]);
 }
}


function itemClick(index) {
 if(index < itemArr.length) {
  openURL(itemArr[index].link);
 } 
}


function itemMouseEnter(index) {
 if(index < itemArr.length) {
  info.data = itemArr[index].title + "\n" + itemArr[index].description;
  itemArr[index].txtObj.color = mouseOverColorArticles;
  itemArr[index].txtObj.scrolling = "autoLeft";  updButton.data prevButton.data nextButton.data = '';
 }
}


function itemMouseExit(index) {
 if(index < itemArr.length) {
  info.data = "";
  updButton.data = "Recharger";
  prevButton.data = start > 0 ? "<< Prec." : "";
  nextButton.data = (start + limit) < itemCount ? "Suiv. >>" : "";
  itemArr[index].txtObj.color = articleTextColor;
  itemArr[index].txtObj.scrolling = "off";
 } 
}


function prev() {
 if(start > 0) {
  start -= limit;
  fillList();
  updateDisplayList();
 }
}


function next() {
    if((start + limit) < itemCount) {
        start += limit;
        fillList();
        updateDisplayList();
 }
}


function createBottomRowButtons() {
 // Bottom row buttons (text elements)
 var txtColor = "#000000";
 var txtStyle = "Bold";
  
 updButton = new Text();
 updButton.size = Number(txtSize)-1;
 updButton.font = txtFont;
 updButton.style = txtStyle;
 updButton.data = "Recharger";
 updButton.color = txtColor;
 updButton.hOffset = 7;
 updButton.width = 70; updButton.onMouseEnter "updButton.color '" + mouseOverColorButtons + "';"; updButton.onMouseExit "updButton.color '" + txtColor + "';"; updButton.onMouseUp "updButton.color '" + txtColor + "';update(0, true);";


    prevButton = new Text();
    prevButton.size = Number(txtSize)-1;
    prevButton.font = txtFont;
 prevButton.style = txtStyle;
    prevButton.data = start > 0 ? "<< Prec." : "";
    prevButton.color = txtColor;
    prevButton.hOffset = 100;
    prevButton.width = 40;    prevButton.onMouseEnter "prevButton.color '" + mouseOverColorButtons + "';";    prevButton.onMouseExit "prevButton.color '" + txtColor + "';";
    prevButton.onMouseUp = "prev()";


 nextButton = new Text();
 nextButton.size = Number(txtSize)-1;
 nextButton.font = txtFont;
 nextButton.style = txtStyle;
 nextButton.data = (start + limit) < itemCount ? "Suiv. >>" : "";
 nextButton.color = txtColor;
 nextButton.hOffset = 150;
 nextButton.width = 40; nextButton.onMouseEnter "nextButton.color '" + mouseOverColorButtons + "';"; nextButton.onMouseExit "nextButton.color '" + txtColor + "';";
 nextButton.onMouseUp = "next()";


 ShowDescriptionButton = new Text();
 ShowDescriptionButton.size = Number(txtSize)-1;
 ShowDescriptionButton.font = txtFont;
 ShowDescriptionButton.style = txtStyle;
 ShowDescriptionButton.data = "ESPN";
 ShowDescriptionButton.color = "#000000";
 ShowDescriptionButton.hOffset = 248;
 ShowDescriptionButton.alignment = "right";
 ShowDescriptionButton.width = 50; ShowDescriptionButton.onMouseEnter "ShowDescriptionButton.color '" + mouseOverColorButtons + "';"; ShowDescriptionButton.onMouseExit "ShowDescriptionButton.color '" + txtColor + "';";
 ShowDescriptionButton.onMouseUp = "openURL(siteURL);";


 updButton.vOffset prevButton.vOffset nextButton.vOffset = ShowDescriptionButton.vOffset = bottomRowPicture.vOffset + 11;
}


setUp();
update(start);
0
Réponse 6 / 7
lsamsoumal Messages postés 36 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 27 octobre 2011
12 déc. 2008 à 14:52
non le widget fonctionne bien mais je veux y insérer des onglets en haut.
merci pour votre attention.
0
Réponse 7 / 7
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
12 déc. 2008 à 15:04
ah... tu ne voudrais pas  qu'on te le fasse quand même.. si ?

à priori, ça marche pas comme ça sur les forum
on t'aide à faire, ce qui est déjà exceptionnel
pour faire : prend un truc tout fait,
ou regarde ici 

http://emploi.codes-sources.com/
ou....

          [mon Site] [M'écrire] Bul         
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
Rejoignez-nous