Jticker para JQuery, mejorado
Jticker es un “plugin” que usa JQuery (como ya quizá sea más que notable: la librería JavaScript de mis amores), sencillo, limpio y eficaz para mostrar un canal RSS o XML en todo caso e[...]
- 16
- mar
- 2008
Publicado por J.A.Cobo.
Guardado en Desarrollo web, JavaScript, Programación.
hace 2 años y 4 meses
No hay comentarios
Jticker es un “plugin” que usa JQuery (como ya quizá sea más que notable: la librería JavaScript de mis amores), sencillo, limpio y eficaz para mostrar un canal RSS o XML en todo caso en tu sitio web usando un par de efectos prácticamente.
Como digo es un plugin sencillo, limpio y eficaz… así que no le hace falta mucho más ya que hay otras opciones si quieres algo más sofisticado, además es muy personalizable a nivel de opciones o si le metes mano al código… como he hecho yo :mrgreen:
En este caso,… lo cierto es que he perdido un poco (no uso SVN ni nada parecido para esto ^^) el hilo de mis modificaciones pero, la más importante por decirlo de alguna manera, es una opción que en mi opinión considero bastante relevante, que es la posibilidad de decidir sobre
Mostrar la descripción de cada Item o no
Así, ahora añadiremos al script dicha opción:
1. Primero, añadiremos el parámetro a la función:
Inicio del Script, variable opciones:
Añadimos el parámetro: showdesc: false,
12 13 14 15 16 17 18 19 20 21 22 23 24 | // TODO: Remove the newwindow option var options = { TickerID: "", delay: 1000, newwindow: false, showdesc: false, url: "tickerdata.xml", transition: "slide", speed: "slow", contentcounter: -1, ArrayIndex: -1, dataXML: { }, |
Para después dejar los parámetros de inyección del HTML de la siguiente manera:
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | Item = $("item", options.dataXML).get(options.contentcounter); Title = $("title", Item).text(); URL = $("link", Item).text(); Desc = $("description", Item).text(); TickerHTML = '<div class="JTickerTitle"><strong class="yellow">Noticias:</strong> <a href="' + URL + '"'; // Options: // TODO: Remove this attribute! // New Window Option: Deprecated by Covi Mod, Not Accesible! and no valid to Standars Compliance W3C. if (options.newwindow) { TickerHTML += ' '; } // Description Option: if (options.showdesc == false) { TickerHTML += ' title="' + Desc + '">' + Title + '</a></div>'; } else { TickerHTML += ' title="Leer la noticia completa: '+ Title +'">' + Title + '</a></div><div>' + Desc + '</div>'; } // End Options. |
Lo que hacemos simplemente es cambiar el código original (que era el último else sin sentencias) para añadir la sentencia e inyectar un código u otro según la opción para la mostrar la descripción (showdesc).
En mi caso, he optado por incluir la descripción en el atributo title del vínculo.
Y… me queda también eliminar la opción de nueva ventana con el atributo no accesible e intrusivo , recordemos que nuestra obligación en estos tiempos de la web es:
“devolver el control al usuario“, es decir, que él mismo decida si quiere o no “abrir el enlace en una nueva ventana” (Ver primer nota inferior).
El uso, en mi caso, sería el siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript"> //<![CDATA[ // Inicializando JQuery con documento renderizado: $(document).ready(function() { // Ticker News RSS: $("#news_ticker").jticker({ delay: 10000, showdesc: false, // Forcing not show the description. url: "tickerdata.xml", transition: "fade", speed: 500 }); }); / / Fin JQuery //]]> </script> |
Nota 1: Para el tema de accesibilidad y JavaScript no intrusivo podemos usar JQuery o CSS 2.1 como ya he comentado en otras ocasiones:
Un ejemplo sería, el ya comentado selector de CSS para vínculos externos, donde además uso una clase estándar de CSS para los navegadores sin soporte +CSS2.1 (.post a.external):
(Nota: Es obvio que se puede o debe omitir la clase .post):
1 2 3 4 5 6 7 8 9 | #content .post a[href^="http:"], .post a.external { padding-right:16px; background:url("img/external.gif") no-repeat right; } /* Internos, anulamos: */ #content .post a[href^="http://culturadigital.org"], #content .post a[href^="http://www.culturadigital.org"] { padding-right:0px; background:none; } |
Con JQuery es igual o más sencillo puesto que también usa XPath y las posibilidades son tan abrumadoras como divertidas:
Imaginemos que tenemos una clase para vínculos en otro idioma (xml:lang debería ser un atributo obligatorio en relación a la accesibilidad):
1 2 3 4 5 6 7 8 9 | // Idiomas, icono para identificar el enlace más texto: $('a').each(function(index) { var $this = $(this); var languageLink = $this.attr("xml:lang"); if(languageLink == 'en') { $(this).addClass("ukLink"); $(this).attr({ title: this.title + ", en inglés"}); } }); |
De esta manera añadimos la clase a los vínculos con el atributo de lenguaje en inglés… igualmente, pero mucho más pesado y complicado, sería intentar mediante PHP obtener el idioma del vínculo enlazado y añadir el atributo de lenguaje oportuno… pero se imagina, no?, pesadísimo chequear todos los vínculos de un documento y encima enlazar a ellos para comprobar su lenguaje.
En mi opinión es mejor establecer tu lenguaje predefinido para todo el sitio e informar de los vínculos en otro idioma…, es lo lógico.
Bien, el ejemplo anterior es la misma técnica para usar con enlaces externos (añadir la clase external dependiendo del atributo href -> $(this).attr("href");), así informamos e damos la posibilidad al usuario de decidir qué hacer sobre ese vínculo externo.
Nota 2: El blog lo tengo bastante descuidado :( pero en el sitio web que llevo se pueden encontrar muchos ejemplos como éste, de accesibilidad, de JavaScript, Ajax y en concreto JQuery y de cómo convertir Wordpress en un CMS en toda regla ;)
PD: Me hubiera gustado comunicarlo al autor pero el registro en su blog no va y no hay otro medio de contacto, al menos, yo no lo he encontrado :(
Acerca del autor
- No hay comentarios.
- TrackBack URL
Aún no hay comentarios.
Dejar un comentario.no seas tímido
Juan Antonio Cobo
JuanAntonioCobo
- «Webdev freelance» Mejor aquí: http://blog.culturadigital.org/acerca-de - 20
- @lusagad Yo solo lo he visto d rafilón, oyes las voces y dices: "q coño es eso?" Luego ya.. te partes la caja lo serios q se ponen y todo xD (vía web).
- hace 1 día y 18 horas - Casualmente a lo de TeleCinco, en Italia hay una buena liada con el tema gitano. Ainsss... kasco de tele dios. (vía web).
- hace 2 días y 20 horas - mm... dios, qué mentira más gorda los debates esos de Tele5, no? Qué casualidad una gitana pija en el público, vms, lo + normal del mundo xD (vía web).
- hace 2 días y 20 horas - @Frambueso Lo acabo de ver en las noticias... que grandes las nuevas tecnologías: nosotros en vivo vía Twitter. Creo q todo bien, no? (vía web).
- hace 1 semana y 2 días - Weno,va siendo hora.. joder!.. pro xq mcae tan mal Barceló!?, tan repipi, pdante, sos gestos, ojjj, ajjjjj.. ggg Nas noxs #puntopelota #zzzz (vía TweetDeck).
- hace 1 semana y 3 días - @Rino6966 Pulido quiere lo que muchos, entre los qm incluyo, kizá pecando dantimadridsta: un Madrid humilde como la 8ª Champions. (vía TweetDeck).
- hace 1 semana y 3 días - @ateneanike Roncero es..., bueno, lo que es, es bastante inbécil y #puntopelota, Diosss... lo q pasa q hasta da pena y todo gg (vía TweetDeck).
- hace 1 semana y 3 días - ...ganas de liga... sinceramente, después de este verano... solo quiero... que llegue ya la Eurocopa! #ESP #puntopelota (vía TweetDeck).
- hace 1 semana y 3 días - Ntre Xixarito ( @fcevallos ) y los #parabólicos ( @francescobu @plazacasals ) se están comiendo la sección de @pacorabadan -.- #puntopelota (vía TweetDeck).
- hace 1 semana y 3 días - @ateneanike No sé... me da que es así ^^! Según él, los de las críticas somos lo peor de Twitter; imagino q le gustaría solo recibir elogios (vía TweetDeck).
- hace 1 semana y 3 días - xD Ostais jugando 1 unfollow fijo RT @sergimaister: @ateneanike Lo dla cara d Borbón d @Pedrerol es d lo mejor ke leído jamás en Twitter xDD (vía TweetDeck).
- hace 1 semana y 3 días - Para 1 año... deberían djar a Raúl retirarse nel Madrid, no sé si el problema son las condiciones o el orgullo, lícito, de Raúl #puntopelota (vía TweetDeck).
- hace 1 semana y 3 días - @Pelotero100 Y a Chuck Norris ggg (vía TweetDeck).
- hace 1 semana y 3 días - Hoy no hay 2online, que estamos ya de intermission, con las ganas que tenía :( #BattlegroundEurope #2online (vía web).
- hace 1 semana y 3 días - @CarmeBarcelo tú crees q burlarte d di Maria es tnr algo didea d fútbol???, t lo dice @sirolopez Petón y medio Twitter, o ntero #puntopelota (vía web).
- hace 1 semana y 3 días - Este perro viejo de PC (A8V-X + AMD64) ha muerto... estaremos por aquí mientras aguante el portátil ;) (vía web).
- hace 1 semana y 6 días - @lalibreta +1000000 #246 zellfhirot: "Marca, cada día decís y haceis mayores tonterías." :) (vía web).
- hace 2 semanas - [...]pero no es lo q nos enseña nuestra gramática dsd luego ;) ... bueno, más bien semántica :S (vía web).
- hace 2 semanas - @elias_israel Para el lenguaje técnico, imagino q viene cojonudo... pero no es lo q nos enseña nuestra gramática dsd luego ;) (vía web).
- hace 2 semanas - @elias_israel Hay artículos en la Wikipedia inglesa con más siglas que oraciones xD (vía web).
- hace 2 semanas
Acerca de esta entrada
Estás leyendo «Jticker para JQuery, mejorado»,
una entrada publicada el domingo 16 de marzo de 2008.
Etiquetas 
AJAX, Desarrollo web, JavaScript, jquery, jticker
Revisada 
hace 2 años y 4 meses
Imprimir
XHTML
1.1 Válido
