Made in Software » javascript

CKEditor: configurare le barre degli strumenti

dinox — Mon, 26 Jul 2010 09:17:44 +0000

Sempre l’interno del progetto CRM ho avuto la necessità di utilizzare un editor più complesso del semplice campo form nel quale scrivere una descrizione del ticket. Dopo varie prove ho scelto CKEditor, un prodotto davvero molto potente che, proprio per questo, necessita spesso di essere configurato un minimo. Dopo averlo scaricato ed integrato nel sistema (operazione davvero molto semplice) è possibile modificarlo in base alle proprie necessità agendo sul file “config.js” disponibile nella cartella principale.

In particolare io ho dovuto limitare il numero di funzioni presenti sulle barre degli strumenti (molti non mi servivano ed occupavano spazio inutilmente). Per farlo potete mettere nel file config.js all’interno della già presente funzione “CKEDITOR.editorConfig = function( config ) {“ tutto ciò che segue:

// This is actually the default value.
config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

Lo slash (‘/’) indica un “a capo” fra le barre, il trattino (‘-’) indica una spaziatura fra le barre. I nomi credo non serva commentarli. Eliminate, spostate o aggiungete, dunque, tutto quello che volete in base alle vostre specifiche esigenze.

Popup in primo piano con finestra modale. Solo se…

dinox — Tue, 30 Jun 2009 13:55:49 +0000

I se sono relativi alla tipologia di interazione che volete avere con la finestra modale. Chiunque abbia mai avuto a che fare con i popup sa benissimo che essi possono portare qualche problema, tutto sommato risolvibile. Una cosa che risulta impossibile da fare, se non con qualche particolare accorgimento, è metterli in “primo piano” in modo da impedire all’utente di cliccare sulla pagina sottostante senza aver prima chiuso il browser. Lo stesso comportamento, insomma, di una finestra modale di Windows.

Quella delle finestre modali è una possibilità è utilizzabile, usando i browser di ultima generazione quali Firefox 3, Explorer 7 o 8, Safari 4 ma ci sono alcune controindicazioni. A tutti gli effetti con i browser “non Microsoft” tutto funzionerebbe in maniera regolare, come se si avesse a che fare con un normale popup ma messo in primo piano. Con IE, invece, se il popup contiene una form, una volta schiacciato il tasto “Invia” si aprirà una nuova finestra. Oppure se avete nel popup avete una funzione che richiama la pagina che lo ha aperto (parent) ad esempio per fare un refresh questa non funzionerà. Non so se ci sono altri problemi ma per me questi sono stati sufficienti a farmi abbandonare l’idea.

Se invece non avete problemi di gestione simili potreste utilizzare un codice simile al seguente. Nella parte pagina dove dovete chiamare il popup:

function openModalWindows() { if (window.showModalDialog) { window.showModalDialog("popup.html","nome","dialogWidth:200px;dialogHeight:300px"); } else { window.open("popup.html","nome","width=200,height=300,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes'); } }

Il link presente nella sezione dal quale volete chiamare la funzione per aprire il popup dovrebbe essere del tipo:

Apri popup modale

Come far convivere jQuery e Prototype

admin — Fri, 12 Jun 2009 08:15:20 +0000

Chiunque abbia mai provato ad utilizzare nella stessa pagina le due librerie javascript jQuery e Prototype sa bene che esse non riescono a coesistere se non con qualche piccola modifica. Il problema sta nel fatto che entrambe utilizzano la funzione di default “$”. Ecco allora come fare:

Come vedete sarà sufficiente includere le due librerie nell’ordine suddetto e chiamare la funzione jQuery.noConflict() assegnandola alla variabile JQ. Le altre modifiche da effettuare all’interno della pagina che utilizza le funzioni di jQuery sono nella sostituzione della chiamata “$” con la chiamata “JQ”.

Chiudere un popup e ricaricare la pagina che lo ha aperto

dinox — Thu, 21 May 2009 16:21:19 +0000

Quando si lavora con i popup si può avere la necessità di chiuderlo e contemporaneamente ricaricare la pagina che lo ha aperto a seguito, ad esempio, del click su un link. In Javascript questa operazione è davvero semplice. Create una funzione come quella che segue all’interno del tag della pagina HTML:

dove page è l’indirizzo della pagina da caricare. All’interno del documento HTML, questo sarà il link per chiamare la funzione e caricare la pagina madeinsoftware.it:

Apri Made in Software

AJAX: Scriptaculous e gli effetti di apparizione

dinox — Fri, 24 Apr 2009 22:02:41 +0000

In pratica

Chi volesse applicare degli effetti di comparsa e scomparsa di elementi HTML (div) può pensare alla libreria Scriptaculous che offre il metodo toggle della funzione Effect per creare un ingresso a tendina o con apparizione del div che si vuole mostrare o nascondere. L’utilizzo è davvero semplice.

Scaricate le librerie Javascript scriptaculous da scriptaculous e prototype.
Richiamatele nella pagina dove volete applicare l’effetto:
Racchiudete l’elemento che volete far sparire e/o comparire in due
dando un id univoco al primo:
contenunto
Aggiungete la chiamata alla funzione sull’evento di un elemento che desiderate, ad esempio sull’evento onclick di un tag
Apri dettagli

Tipi di effetti ed opzioni

Per Effect.toggle è prevista la seguente sintassi:
Effect.toggle(element, ['appear' | 'slide' | 'blind'], [options] );

Ecco alcuni esempi:
Effect.toggle('id_of_element', 'appear'); Effect.toggle('id_of_element', 'slide', { delay: 0.5 }); Effect.toggle('id_of_element', 'blind', { duration: 2.0 });

Riferimenti

Primi passi con scriptaculous: http://wiki.github.com/madrobby/scriptaculous
Esempi: http://wiki.github.com/madrobby/scriptaculous/effect-toggle