|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
ecofive ha scritto:wubullo ha scritto:La scorta, ogni tanto, deve pure lavorare per mangiare... pane, acqua, HTML, CSS ... ... e, in questo caso, tanto Javascript! 
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Ciao Giuseppe! Mentre io tento di ricostruire tutti i passaggi effettuati per ottenere il risultato che ti ho mostrato, tu intanto mettiti avanti col lavoro. Vai alla sezione "Download" del sito di JQuery UI ( http://jqueryui.com/download) e segui questi passaggi: 1) nella prima riga della maschera ("Components") fai clic su "Deselect all components"; 2) spunta manualmente solo le caselle Core (dalla riga "UI Core") e Datepicker (dalla riga "Widgets"); 3) ora portati nella colonna di destra della maschera e, dal menu a tendina "Themes", seleziona la voce Sunny; 4) sotto alla voce "Version", che deve rimanere invariata, premi sul pulsante Download per scaricare il tuo pacchetto; 5) salva dove vuoi - preferibilmente il Desktop - la cartella zippata, che avrà il nome jquery-ui-1.8.6.custom. A questo punto, non devi far altro che... aspettare la prossima puntata! A presto.
|
|
Rank: AiutAmico
Iscritto dal : 10/30/2010
Posts: 49
|
fatto signore
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
daltan75 ha scritto:fatto signore Grande Giuseppe! Allora, cominciamo! Mettiamoci d'accordo così: d'ora in avanti ti posterò una serie di operazioni da fare, magari anche in successione. Per maggiore chiarezza, numererò i singoli passaggi. Non importa che tu li faccia istantaneamente, ma solo che segui con precisione la loro scansione e che, una volta eseguiti, tu mi scriva per conferma dei messaggi di questo tipo: Passaggio 1 --> Fatto!OK?
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Passaggio 1. Facciamo un po' di pulizia
Per prima cosa, liberiamoci di un po' di file inutili...
1) Una volta scompattata la cartella zippata che hai scaricato dal sito di JQuery UI, dovresti ritrovarti questa serie di elementi:
● css (cartella)
● development-bundle (cartella)
● js (cartella)
● index (file .htm)
2) Apri "development-bundle/ui" e copia il file jquery.ui.datepicker.js. Torna indietro e incolla questo file nella directory principale (jquery-ui-1.8.6.custom), cartella js insieme a jquery-1.4.2.min.js e jquery-ui-1.8.6.custom.min.js
3) Ora puoi buttare nel cestino tutta la cartella "development-bundle" comprese le sottocartelle.
4) Questo è il risultato finale:
● css (cartella)
● js (cartella che ora contiene jquery-1.4.2.min.js, jquery-ui-1.8.6.custom.min.js, jquery.ui.datepicker.js)
● index (file .htm)
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Passaggio 2. Localizzare e inizializzare Datepicker1) Per "tradurre" Datepicker in italiano scarica questo file --> http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-it.js. Salvalo nella directory principale (jquery-ui-1.8.6.custom), all'interno della cartella js che ora conterrà quattro file: ● jquery-1.4.2.min.js ● jquery-ui-1.8.6.custom.min.js ● jquery.ui.datepicker.js ● jquery.ui.datepicker-it.js 2) Ritorna nella directory principale ed entra in css/sunny. Qui dentro dovresti trovare (oltre alla cartella "images") un file .css denominato jquery-ui-1.8.6.custom: rinominalo in jquery-ui-datepicker. 3) OK, possiamo inizializzare Datepicker. Torna alla tua directory principale e apri il file index.htm con Notepad++ (clic con il tasto destro sul file e seleziona dal menu contestuale la voce "Edit with Notepad++"). Seleziona tutto il testo e cancellalo. Poi copia per intero questo codice, incollalo dentro a index.htm, salva e chiudi: Code:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery UI Example Page</title> <link type="text/css" href="css/sunny/jquery-ui-datepicker.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script> <script type="text/javascript" src="js/jquery.ui.datepicker-it.js" ></script> <script type="text/javascript"> $(function(){ // Datepicker $('#datepicker').datepicker({ inline: true }); // Datepicker italian localization $.datepicker.setDefaults($.datepicker.regional['it']); }); </script> </head> <body> <h1>Welcome to jQuery UI!</h1> <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of <a href="js/jquery-1.4.2.min.js">jQuery</a>, your personalized copy of <a href="js/jquery-ui-1.8.6.custom.min.js">jQuery UI (js/jquery-ui-1.8.6.custom.min.js)</a>, and <a href="css/sunny/jquery-ui-1.8.6.custom.css">css/sunny/jquery-ui-1.8.6.custom.css</a> which imports the entire jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending on your needs. </p> <!-- Datepicker --> <h2 class="demoHeaders">Datepicker</h2> <div id="datepicker"></div> </body> </html> 4) Ora, se fai doppio clic su index.htm, dovresti vedere solo Datepicker (e non tutto il testo introduttivo che c'era prima) con una novità: i nomi dei giorni, dei mesi e la posizione dei fine settimana seguono le convenzioni del calendario italiano.
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
[Fuori scaletta 1. Che cosa stiamo per fare]Prima di procedere, qualche considerazione generale. Datepicker, come dice il nome, è uno strumento (dall'aspetto accattivante) utilizzato per riempire una text-area con una data, scelta facendo clic sulle celle della tabella. Nel nostro caso, non ci serve un calendario interattivo, ma una semplice tabella che contenga le date mese per mese. Nei prossimi passaggi, andremo quindi a disattivare le celle della tabella per ottenere un calendario statico. Per far questo, però, non agiremo sul codice html della pagina, perché esso non cambia mai: la tabella è generata in automatico dallo script jquery.ui.datepicker.js ed è su questo che andremo a intervenire per modificarne i comportamenti. (Per vedere il risultato parziale delle istruzioni che andremo a inserire di volta in volta, consiglio di usare il componente aggiuntivo Firebug per Mozilla Firefox --> https://addons.mozilla.org/it/firefox/addon/1843/) In ultima battuta, modificheremo il foglio di stile per formattare alcune parti della tabella, a cui lo script andrà ad assegnare certe classi.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
[Fuori scaletta 2. Prove tecniche di sincronizzazione]
Per assicurarci di essere sincronizzati, chiederei a Giuseppe di fare questa prova.
Vai nella directory principale (jquery-ui-1.8.6.custom) ed entra nella cartella js. Apri il file jquery.ui.datepicker.js con Notepad++ (clic con il tasto destro sul file e seleziona dal menu contestuale la voce "Edit with Notepad++").
Scorri il codice fino alla riga 1422: copia quella riga e incollala nel tuo prossimo post.
|
|
Rank: AiutAmico
Iscritto dal : 10/30/2010
Posts: 49
|
Passaggio 1 --> Fatto!
Passaggio 2 --> Fatto! (credo alla perfezione) ma continuo a vedere una scritta prima della tabella :-(
ecco il codice alla riga 1422:var dayNamesMin = this._get(inst, 'dayNamesMin');
io non so cosa fai nella vita wubullo,ma hai una indole che nemmeno il miglior maestro possiede,bravo,riesci a farmi fare le cose che non ho mai fatto dandomi tutte le info dettagliate,sei un grande veramente,e non lo dico solo perche mi stai aiutando :-)
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
daltan75 ha scritto:Passaggio 1 --> Fatto! OK, perfetto! daltan75 ha scritto:Passaggio 2 --> Fatto! (credo alla perfezione) ma continuo a vedere una scritta prima della tabella :-( Se ti riferisci a questo testo introduttivo: Code:Welcome to jQuery UI!
This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI (js/jquery-ui-1.8.6.custom.min.js), and css/sunny/jquery-ui-1.8.6.custom.css which imports the entire jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending on your needs.
Datepicker è tutto OK: l'avevo lasciato a posta! daltan75 ha scritto:ecco il codice alla riga 1422:var dayNamesMin = this._get(inst, 'dayNamesMin'); Perfetto! Siamo sincronizzati!
OFF TOPIC daltan75 ha scritto:io non so cosa fai nella vita wubullo,ma hai una indole che nemmeno il miglior maestro possiede,bravo,riesci a farmi fare le cose che non ho mai fatto dandomi tutte le info dettagliate,sei un grande veramente,e non lo dico solo perche mi stai aiutando :-) Grazie Giuseppe: sei davvero gentile. Non ti contraddico, perché i complimenti fanno sempre piacere, ma ti assicuro che ho ben poco da insegnare in questo campo: ho studiato tutt'altro nella vita, l'informatica è solo un hobby (diventato poi un mestiere) che - come tantissime altre persone - coltivo da autodidatta!
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Passaggio 3. Modificare la classe CSS ai weekend e assegnarne una ai lunedì (nella riga "Lu Ma Me Gi Ve Sa Do")1) Vai nella directory principale (jquery-ui-1.8.6.custom) ed entra nella cartella js. Apri il file jquery.ui.datepicker.js con Notepad++ (clic con il tasto destro sul file e seleziona dal menu contestuale la voce "Edit with Notepad++"). 2) Scorri il codice fino alla riga 1459. Queste due righe (1459-1460): Code:thead += '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' +
'<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>';  sostituiscile con queste tre righe (che diventeranno 1459-1460-1461)Code:thead += '<th' + ((dow + firstDay + 6) % 7 == 0 ? ' class="ui-datepicker-mondays"' : '');
thead += ((dow + firstDay + 6) % 7 >= 6 ? ' class="ui-datepicker-week-end"' : '') + '>' +
'<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>';  3) Salva e chiudi il file. N.B.: mi raccomando di non inserire degli "a capo" in più, perché altrimenti la corrispondenza del numero delle righe salta!
Con questa operazione abbiamo: a) assegnato una classe CSS ("ui-datepicker-mondays") a tutti i lunedì. Questo ci servirà per dare alle celle corrispondenti degli attributi di stile specifici; b) riferito la classe CSS "ui-datepicker-week-end" solo alle domeniche (prima era assegnata anche ai sabati). Anche questo ci servirà per dare alle celle corrispondenti degli attributi di stile specifici.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Passaggio 4. Modificare la classe CSS ai weekend e assegnarne una ai lunedì (nelle celle della tabella)1) Vai nella directory principale (jquery-ui-1.8.6.custom) ed entra nella cartella js. Apri il file jquery.ui.datepicker.js con Notepad++ (clic con il tasto destro sul file e seleziona dal menu contestuale la voce "Edit with Notepad++"). 2) Scorri il codice fino alla riga 1481. Questa riga (1481): Code:((dow + firstDay + 6) % 7 >= 5 ? ' ui-datepicker-week-end' : '') + // highlight weekends  sostituiscila con queste due righe (che diventeranno 1481-1482)Code:((dow + firstDay + 6) % 7 == 0 ? ' ui-datepicker-mondays' : '') + // highlight mondays
((dow + firstDay + 6) % 7 >= 6 ? ' ui-datepicker-week-end' : '') + // highlight weekends  3) Salva e chiudi il file. N.B.: mi raccomando di non inserire degli "a capo" in più, perché altrimenti la corrispondenza del numero delle righe salta!
Con questa operazione abbiamo: a) assegnato una classe CSS ("ui-datepicker-mondays") a tutte le celle in cui compaiono i numeri dei giorni sotto la colonna "Lu". Questo ci servirà per dare alle celle corrispondenti degli attributi di stile specifici; b) riferito la classe CSS "ui-datepicker-week-end" solo alle celle in cui compaiono i numeri dei giorni sotto la colonna "Do" (prima era assegnata anche ai sabati). Anche questo ci servirà per dare alle celle corrispondenti degli attributi di stile specifici.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Passaggio 5. Disattivare le celle della tabella per ottenere un calendario statico1) Vai nella directory principale (jquery-ui-1.8.6.custom) ed entra nella cartella js. Apri il file jquery.ui.datepicker.js con Notepad++ (clic con il tasto destro sul file e seleziona dal menu contestuale la voce "Edit with Notepad++"). 2) Scorri il codice fino alla riga 1496. In questa e nelle righe successive (1496-1497-1498; 1500): Code:(unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' +
(printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
(printDate.getTime() == currentDate.getTime() ? ' ui-state-active' : '') + // highlight selected day
(otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months
'" href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display selectable date  dovrai apportare delle piccole modifiche che io, quasi quasi, ti consiglierei di introdurre a mano (il numero delle righe rimarrà invariato). Attenzione però a non cancellare neanche un apostrofo in più del dovuto. Se non ti sento sicuro a modificare le stringhe a mano, ti posto comunque il codice del risultato da ottenere: Code:(unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<span class="ui-state-default' +
(printDate.getTime() == today.getTime() ? ' ui-state-todays-date' : '') +
(printDate.getTime() == currentDate.getTime() ? ' ui-state-inactive' : '') + // highlight selected day
(otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months
'">' + printDate.getDate() + '</span>')) + '</td>'; // display selectable date  3) Salva e chiudi il file. N.B.: mi raccomando di non inserire degli "a capo" in più, perché altrimenti la corrispondenza del numero delle righe salta!
Con questa operazione abbiamo: a) disattivato le celle della tabella, ottenendo un calendario statico; b) assegnato una classe CSS ("ui-state-todays-date") alla cella che contiene la data corrente. Questo ci servirà - eventualmente - per dare alla cella corrispondente degli attributi di stile specifici.
Ecco fatto! Abbiamo terminato le modifiche da apportare allo script. Non ci resta che impostare un po' di regole di stile!
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
[Fuori scaletta 3. Dimensioni del calendario]Giuseppe, avrei bisogno di sapere quanto è grande il riquadro che dovrà contenere il calendario sulla pagina http://www.poesiedinote.altervista.org/calendario.htmlSulla base della sua dimensione, bisogna che mi dici quanto vuoi che sia largo e alto Datepicker. EDIT: sulle dimensioni del riquadro mi rispondo da solo --> 753x467 px. La risposta alla seconda richiesta, però, rimane a tuo carico!
|
|
Rank: AiutAmico
Iscritto dal : 10/30/2010
Posts: 49
|
allora,si mi riferivo alle scritte che mi hai riportato quindi tutto ok allora passaggio 3 fatto passaggio 4 fatto ma mi trovo alla riga successiva col codice,rispetto a quella che mi indichi tu,per precauzione prima di salvare ho fatto una copia del file) passaggio 5 stessa cosa del 4 per le dimensioni ti posto la pagina definitiva www.starcommunication.org/calendario.htmldevo sostituirlo al calendario che c'è gia ciao e grazie sempre
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
daltan75 ha scritto:allora,si mi riferivo alle scritte che mi hai riportato quindi tutto ok  daltan75 ha scritto:allora passaggio 3 fatto daltan75 ha scritto:passaggio 4 fatto ma mi trovo alla riga successiva col codice,rispetto a quella che mi indichi tu,per precauzione prima di salvare ho fatto una copia del file)
passaggio 5 stessa cosa del 4  La cosa potrebbe anche essere ininfluente (magari ti è scappato un "a capo" in più). L'importante è che il file a cui hai fatto tutte le modifiche che ti ho suggerito sia sempre jquery.ui.datepicker.js (e non, se lo hai copiato, "Copia di jquery.ui.datepicker.js"). Ad ogni modo, puoi sempre fare questa prova (dopo aver verificato che il file finora modificato si chiami ancora jquery.ui.datepicker.js). Torna alla directory principale e lancia il file index.htm: il calendario compare? C'è tutto? Per un livello di verifica più avanzato ho bisogno di sapere quale browser usi. 1) Se usi Mozilla Firefox, installa il componente aggiuntivo Firebug (lo puoi scaricare dal sito ufficiale degli Add-ons di Firefox --> https://addons.mozilla.org/it/firefox/addon/1843/). 2) Se usi Internet Explorer (deve però essere almeno la versione 8) puoi usare i cosiddetti "Strumenti di sviluppo" (Menu "Strumenti > Strumenti di sviluppo" o, più semplicemente, il tasto di funzione F12). 3) Se usi Chrome o Opera, ci sono gli "Strumenti per sviluppatori". In ogni caso, se mi indichi il browser che utilizzi ti dirò come ispezionare il codice sorgente per avere una conferma che tutto sia OK. Alle stesse dimensioni del calendario Flash che c'è adesso, ho paura che Datepicker sembrerà un po' deformato... Vabbè, ci penseremo più avanti (tanto a correggere siamo sempre in tempo!). A presto.
|
|
Rank: AiutAmico
Iscritto dal : 10/30/2010
Posts: 49
|
si le modifiche le ho fatte sul file da te indicato al 100%
uso explorer
per le dimensioni vanno bene anche quelle che abbiamo attualmente,l'importante (questo intendevo) è che entri nel rettangolo scuro che fa da sfondo al calendario
appena vado a casa apro index.htm
ciao e grazie
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
daltan75 ha scritto:uso explorer Verifica che sia almeno la versione 8. A presto.
|
|
Rank: AiutAmico
Iscritto dal : 10/30/2010
Posts: 49
|
il calendario si vede: http://www.sendspace.com/file/5b2x2hinternet explorer 7 ma non capisco come possa influire avere una versione o un altra
|
|
|
Guest |
