Foros del Web » Programando para Internet » Javascript »

Ayuda con addClass y removeClass

 Estas en el tema de Ayuda con addClass y removeClass en el foro de Javascript en Foros del Web. Que tal!? Necesito una mano en algo que no creo que sea complicado, se trata de addClass y removeClass , que todabia no se muy ...
  #1 (permalink)  
Antiguo 05/08/2009, 09:28
 
Fecha de Ingreso: mayo-2009
Mensajes: 20
Antigüedad: 15 años, 7 meses
Puntos: 0
Pregunta Ayuda con addClass y removeClass
Que tal!?

Necesito una mano en algo que no creo que sea complicado, se trata de addClass y removeClass, que todabia no se muy bien como utilizarlos....

La idea es modificar la apariencia de este reproductor en jQuery; el diseño original muestra los botones de reproduccion; barra de progreso, volumen, y una lista de las temas a reproducir....
Lo que quiero hacer es ocultar la lista de temas; mostrar digamos la cancion que se reproduce actualmente... no el listado por completo...

Imagino que haciendo algo con "display:none" se puede lograr lo que quiero, estube probandolo pero no logro lo que quiero....

EL codigo del reproductor jQuery (jPlayer se llama el plugin) a modificar es el siguiente:

Código javascript: 
Ver original
  1. /////Este es el codigo que da las ordenes al plugin.... 
  2. $(document).ready(function(){
  3.  
  4.     var playItem = 0;
  5.  
  6.     var myPlayList = [
  7.         {name:"Tempered Song",mp3:"mp3/Miaow-01-Tempered-song.mp3",ogg:"ogg/Miaow-01-Tempered-song.ogg"},
  8.         {name:"Hidden",mp3:"mp3/Miaow-02-Hidden.mp3",ogg:"ogg/Miaow-02-Hidden.ogg"},
  9.         {name:"Lentement",mp3:"mp3/Miaow-03-Lentement.mp3",ogg:"ogg/Miaow-03-Lentement.ogg"},
  10.         {name:"Lismore",mp3:"mp3/Miaow-04-Lismore.mp3",ogg:"ogg/Miaow-04-Lismore.ogg"},
  11.         {name:"The Separation",mp3:"mp3/Miaow-05-The-separation.mp3",ogg:"ogg/Miaow-05-The-separation.ogg"},
  12.         {name:"Beside Me",mp3:"mp3/Miaow-06-Beside-me.mp3",ogg:"ogg/Miaow-06-Beside-me.ogg"},
  13.         {name:"Partir",mp3:"mp3/Miaow-09-Partir.mp3",ogg:"ogg/Miaow-09-Partir.ogg"},
  14.         {name:"Thin Ice",mp3:"mp3/Miaow-10-Thin-ice.mp3",ogg:"ogg/Miaow-10-Thin-ice.ogg"}
  15.     ];
  16.  
  17.  
  18.     $("#jquery_jplayer").jPlayer({
  19.         ready: function() {
  20.             displayPlayList();
  21.             playListInit(true); // Parameter is a boolean for autoplay.
  22.             demoInstanceInfo($(this), $("#jplayer_info"));
  23.         },
  24.         oggSupport: true
  25.     })
  26.     .jPlayerId("play", "player_play")
  27.     .jPlayerId("pause", "player_pause")
  28.     .jPlayerId("stop", "player_stop")
  29.     .jPlayerId("loadBar", "player_progress_load_bar")
  30.     .jPlayerId("playBar", "player_progress_play_bar")
  31.     .jPlayerId("volumeMin", "player_volume_min")
  32.     .jPlayerId("volumeMax", "player_volume_max")
  33.     .jPlayerId("volumeBar", "player_volume_bar")
  34.     .jPlayerId("volumeBarValue", "player_volume_bar_value")
  35.     .onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
  36.         var myPlayedTime = new Date(playedTime);
  37.         var ptMin = (myPlayedTime.getUTCMinutes() < 10) ? "0" + myPlayedTime.getUTCMinutes() : myPlayedTime.getUTCMinutes();
  38.         var ptSec = (myPlayedTime.getUTCSeconds() < 10) ? "0" + myPlayedTime.getUTCSeconds() : myPlayedTime.getUTCSeconds();
  39.         $("#play_time").text(ptMin+":"+ptSec);
  40.  
  41.         var myTotalTime = new Date(totalTime);
  42.         var ttMin = (myTotalTime.getUTCMinutes() < 10) ? "0" + myTotalTime.getUTCMinutes() : myTotalTime.getUTCMinutes();
  43.         var ttSec = (myTotalTime.getUTCSeconds() < 10) ? "0" + myTotalTime.getUTCSeconds() : myTotalTime.getUTCSeconds();
  44.         $("#total_time").text(ttMin+":"+ttSec);
  45.     })
  46.     .onSoundComplete( function() {
  47.         playListNext();
  48.     });
  49.  
  50.     $("#ctrl_prev").click( function() {
  51.         playListPrev();
  52.         return false;
  53.     });
  54.  
  55.     $("#ctrl_next").click( function() {
  56.         playListNext();
  57.         return false;
  58.     });
  59.  
  60.     function displayPlayList() {
  61.         for (i=0; i < myPlayList.length; i++) {
  62.             $("#playlist_list ul").append("<li id='playlist_item_"+i+"'>"+ myPlayList[i].name +"</li>");
  63.             $("#playlist_item_"+i).data( "index", i ).hover(
  64.                 function() {
  65.                     if (playItem != $(this).data("index")) {
  66.                         $(this).addClass("playlist_hover");
  67.                     }
  68.                 },
  69.                 function() {
  70.                     $(this).removeClass("playlist_hover");
  71.                 }
  72.             ).click( function() {
  73.                 var index = $(this).data("index");
  74.                 if (playItem != index) {
  75.                     playListChange( index );
  76.                 }
  77.             });
  78.         }
  79.     }
  80.  
  81.     function playListInit(autoplay) {
  82.         if(autoplay) {
  83.             playListChange( playItem );
  84.         } else {
  85.             playListConfig( playItem );
  86.         }
  87.     }
  88.  
  89.     function playListConfig( index ) {
  90.         $("#playlist_item_"+playItem).removeClass("playlist_current");
  91.         $("#playlist_item_"+index).addClass("playlist_current");
  92.         playItem = index;
  93.         $("#jquery_jplayer").setFile(myPlayList[playItem].mp3, myPlayList[playItem].ogg);
  94.     }
  95.  
  96.     function playListChange( index ) {
  97.         playListConfig( index );
  98.         $("#jquery_jplayer").play();
  99.     }
  100.  
  101.     function playListNext() {
  102.         var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
  103.         playListChange( index );
  104.     }
  105.  
  106.     function playListPrev() {
  107.         var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
  108.         playListChange( index );
  109.     }
  110. });

Y el CSS es:

Código CSS: 
Ver original
  1. #player_container {
  2.     position: relative;
  3.     background-color:#eee;
  4.     width:418px;
  5.     height:80px;
  6.     border:1px solid #009be3;
  7. }
  8. #player_container  ul#player_controls {
  9.     list-style-type:none;
  10.     padding:0;
  11.     margin: 0;
  12. }
  13. #player_container  ul#player_controls li {
  14.     overflow:hidden;
  15.     text-indent:-9999px;
  16. }
  17. #player_play,
  18. #player_pause {
  19.     display: block;
  20.     position: absolute;
  21.     left:48px;
  22.     top:20px;
  23.     width:40px;
  24.     height:40px;
  25.     cursor: pointer;
  26. }
  27. #player_play {
  28.     background: url("images/spirites.jpg") 0 0 no-repeat;
  29. }
  30. #player_play.jqjp_hover {
  31.     background: url("images/spirites.jpg") -41px 0 no-repeat;
  32. }
  33. #player_pause {
  34.     background: url("images/spirites.jpg") 0 -42px no-repeat;
  35. }
  36. #player_pause.jqjp_hover {
  37.     background: url("images/spirites.jpg") -41px -42px no-repeat;
  38. }
  39.  
  40. #ctrl_prev {
  41.     position: absolute;
  42.     left:20px;
  43.     top:26px;
  44.     background: url("images/spirites.jpg") 0 -112px no-repeat;
  45.     width:28px;
  46.     height:28px;
  47.     cursor: pointer;
  48. }
  49.  
  50. #ctrl_prev:hover {
  51.     background: url("images/spirites.jpg") -29px -112px no-repeat;
  52. }
  53.  
  54. #ctrl_prev.disabled {
  55.     background: url("images/spirites.jpg") -58px -112px no-repeat;
  56.     cursor:default;
  57. }
  58.  
  59. #ctrl_next {
  60.     position: absolute;
  61.     left:88px;
  62.     top:26px;
  63.     background: url("images/spirites.jpg") 0 -141px no-repeat;
  64.     width:28px;
  65.     height:28px;
  66.     cursor: pointer;
  67. }
  68.  
  69. #ctrl_next:hover {
  70.     background: url("images/spirites.jpg") -29px -141px no-repeat;
  71. }
  72.  
  73. #ctrl_next.disabled {
  74.     background: url("images/spirites.jpg") -58px -141px no-repeat;
  75.     cursor:default;
  76. }
  77.  
  78.  
  79. #player_stop {
  80.     position: absolute;
  81.     left:126px;
  82.     top:26px;
  83.     background: url("images/spirites.jpg") 0 -83px no-repeat;
  84.     width:28px;
  85.     height:28px;
  86.     cursor: pointer;
  87. }
  88. #player_stop.jqjp_hover {
  89.     background: url("images/spirites.jpg") -29px -83px no-repeat;
  90. }
  91. #player_progress {
  92.     position: absolute;
  93.     left:164px;
  94.     top:32px;
  95.     background-color: #eee;
  96.     width:122px;
  97.     height:15px;
  98. }
  99. #player_progress_load_bar {
  100.     background: url("images/bar_load.gif")  top left repeat-x;
  101.     width:0px;
  102.     height:15px;
  103.     cursor: pointer;
  104. }
  105. #player_progress_load_bar.jqjp_buffer {
  106.     background: url("images/bar_buffer.gif")  top left repeat-x;
  107. }
  108. #player_progress_play_bar {
  109.     background: url("images/bar_play.gif") top left repeat-x ;
  110.     width:0px;
  111.     height:15px;
  112. }
  113. #player_volume_min {
  114.     position: absolute;
  115.     left:296px;
  116.     top:32px;
  117.     background: url("images/spirites.jpg") 0 -170px no-repeat;
  118.     width:18px;
  119.     height:15px;
  120.     cursor: pointer;
  121. }
  122.  
  123. #player_volume_max {
  124.     position: absolute;
  125.     left:368px;
  126.     top:32px;
  127.     background: url("images/spirites.jpg") 0 -186px no-repeat;
  128.     width:18px;
  129.     height:15px;
  130.     cursor: pointer;
  131. }
  132.  
  133. #player_volume_min.jqjp_hover {
  134.     background: url("images/spirites.jpg") -19px -170px no-repeat;
  135. }
  136.  
  137. #player_volume_max.jqjp_hover {
  138.     background: url("images/spirites.jpg") -19px -186px no-repeat;
  139. }
  140.  
  141. #player_volume_bar {
  142.     position: absolute;
  143.     left:314px;
  144.     top:37px;
  145.     background: url("images/volume_bar.gif") repeat-x top left;
  146.     width:46px;
  147.     height:5px;
  148.     cursor: pointer;
  149. }
  150. #player_volume_bar_value {
  151.     background: url("images/volume_bar_value.gif") repeat-x top left;
  152.     width:0px;
  153.     height:5px;
  154. }
  155.  
  156. #play_time,
  157. #total_time {
  158.     position: absolute;
  159.     left:164px;
  160.     top:49px;
  161.     width:122px;
  162.     font-size:.8em;
  163.     font-style:oblique;
  164. }
  165.  
  166. #total_time {
  167.     text-align: right;
  168. }
  169.  
  170. #playlist_list {
  171.     width:418px;
  172. }
  173.  
  174. #playlist_list ul{
  175.     list-style-type:none;
  176.     padding:10px 20px 20px 20px;
  177.     margin:0 0 10px 0;
  178.     background-color:#ccc;
  179.     border:1px solid #009be3;
  180.     border-top:none;
  181.     width:378px;
  182.     font-size:.9em;
  183. }
  184.  
  185. #playlist_list li{
  186.     padding:4px 0 4px 20px;
  187.     border-bottom:1px solid #eee;
  188.     cursor: pointer;
  189. }
  190.  
  191. #playlist_list li.playlist_current{
  192.     color:#0d88c1;
  193.     list-style-type:square;
  194.     list-style-position:inside;
  195.     padding-left:6px;
  196.     cursor: default;
  197. }
  198.  
  199. #playlist_list li.playlist_hover {
  200.     color:#0d88c1;
  201. }
  202.  
  203. .miaow {
  204.     font-size:.8em;
  205.     color:#999;
  206. }
  207.  
  208. .miaow a:link, a:visited, a:hover, a:focus, a:active {
  209.     color:#009be3;
  210. }


Saludos!
Gracias por la ayuda que brinda siempre este foro!
Última edición por mateando; 05/08/2009 a las 09:32 Razón: cambie la etiqueta CODE para por HIGHLIGHT para que se vean mejor los codigos...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:13.