Codice HTML di un widget

**clynamen** · 05-02-2012, 10:07

Se volessi creare un Widget in Javascript, come dovrei inserire il codice html della UI che compone il widget? Per esempio un widget che mostra la classifica del campionato deve inserire il codice html usando comandi come innerHTML e modificando direttamente un id di una pagina? Il codice css e html deve essere hard-coded nello script o si deve inserire in un file separato?

**cavicchiandrea** · 05-02-2012, 10:41

Secondo me il come va inserito e secondario, primario invece è il come lo realizzo/sviluppo.
Credo che un widget (pensiero personale dal poco che ho capito su jquery-ui, che potrebbe essere completamente sbagliato) sia sviluppato con la cosi detta programmazione ad oggetti cioè a moduli (tipo joomla) e per fare questo occorre una elevata conoscenza sia del javascript che del framework, come lo inserisco nella pagina (da quanto vedo) è in maniera tradizionale inclusioni, richiami, funzioni, etc...

**lucavizzi** · 05-02-2012, 11:12

Originariamente inviato da clynamen
Se volessi creare un Widget in Javascript, come dovrei inserire il codice html della UI che compone il widget? Per esempio un widget che mostra la classifica del campionato deve inserire il codice html usando comandi come innerHTML e modificando direttamente un id di una pagina? Il codice css e html deve essere hard-coded nello script o si deve inserire in un file separato?

Molto spesso per questo tipo di cose si usano gli iFrame.

Il codice da incorporare, nelle pagine di chi vuole usar il widget, sarebbe:

<div id="clynamenWidget"></div>
<script type="text/javascript" src="http://www.tuodominio.it/widget.js"></script>

il file widget.js farebbe l'innerHTML dell'iFrame:

codice:

document.getElementById('clynamenWidget').innerHTML='<iframe src="http://www.tuodominio.it/widgetPage.php?eventuali=parametri"  width="100" height="60"></iframe>';

widgetPage.php (che può essere anche una pagina statica) conterrebbe tutti gli stili e gli eventuali javascript.

**clynamen** · 05-02-2012, 11:30

Mi sono spiegato male. Intendo il codice html e css che forma il widget (per esempio tabelle, sfondo, icone, link) come dovrebbero essere aggiunti nella pagina tramite lo script? faccio un piccolo esempio

pagina html:

codice:

<body>
  <div id="classifica_calcio">
  </div>
</body>

script js:

codice:

function Classifica () {
	this.addTable = function(numero_squadre) {
		var widget_id = document.getElementById("classifica_calcio");
		var h = new Element('h1');
		h.innerHTML = "classifica";
                widget_id.appendChild(h);
                var table = new Element('table')
                widget_id.appendChild(table);
                for(var i = 0; i < 20; ++i) {
                     var tr = new Element('tr');    
                     table.appendChild(tr);
                }
	}
}
	
var classifica = new Classifica();
classifica.addTable();

@lucavizzi Ho visto il messaggio ora.
Problema risolto, grazie.

Discussione: Codice HTML di un widget

Strumenti discussione

Ricerca discussione

Visualizza

Codice HTML di un widget

Re: Codice HTML di un widget

Permessi di invio