doc:appunti:linux:lezioni:pmapper_dev
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
doc:appunti:linux:lezioni:pmapper_dev [2010/04/28 19:18] – niccolo | doc:appunti:linux:lezioni:pmapper_dev [2011/07/21 09:44] (current) – [Aggiungere un barra laterale] niccolo | ||
---|---|---|---|
Line 2: | Line 2: | ||
p.mapper 4 utilizza estensivamente la libreria [[http:// | p.mapper 4 utilizza estensivamente la libreria [[http:// | ||
+ | |||
+ | ===== Modificare il codice JavaScript ===== | ||
+ | |||
+ | Il codice JavaScript di p.mapper è compresso e unito nell' | ||
+ | |||
+ | Le modifiche alle funzioni JavaScript si effettuano in questo file e siccome questo file viene incluso dopo '' | ||
===== Aggiungere un barra laterale ===== | ===== Aggiungere un barra laterale ===== | ||
Line 29: | Line 35: | ||
===== Aggiungere del contenuto dinamico ===== | ===== Aggiungere del contenuto dinamico ===== | ||
- | {{.: | + | {{ .: |
{{ .: | {{ .: | ||
- | Per ottenere del contenuto dinamico (ad esempio delle sezioni a scomparsa | + | Per ottenere del contenuto dinamico (ad esempio |
La libreria jQuery è già inclusa in p.mapper, si tratta della versione 1.3.2 con una collezione minimale di plugin. Il tutto contenuto nel file **'' | La libreria jQuery è già inclusa in p.mapper, si tratta della versione 1.3.2 con una collezione minimale di plugin. Il tutto contenuto nel file **'' | ||
+ | Purtroppo il plugin UI non è nella sua versione completa, mancano ad esempio i widget // | ||
+ | |||
+ | * **'' | ||
+ | * **'' | ||
+ | |||
+ | Per caricare un file **.js** o un file **.css** basta copiarlo nella directory **'' | ||
+ | |||
+ | Se si vuol un controllo maggiore sull' | ||
+ | |||
+ | <code html> | ||
+ | <script type=" | ||
+ | <link rel=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | La **'' | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | <!-- ===================== " | ||
+ | <div id=" | ||
+ | < | ||
+ | <div> | ||
+ | < | ||
+ | interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e | ||
+ | del rientrare di quelli, vien quasi a un tratto, tra un promontorio a | ||
+ | destra e un' | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </p> | ||
+ | </ | ||
+ | < | ||
+ | <div> | ||
+ | <p>e il ponte, che ivi congiunge le due rive par che renda ancor più sensibile | ||
+ | all' | ||
+ | l'Adda ricomincia per ripigliar poi nome di lago dove le rive, allontanandosi | ||
+ | di nuovo, lascian l' | ||
+ | seni...</ | ||
+ | </ | ||
+ | < | ||
+ | <div> | ||
+ | <p>La costiera, formata dal deposito di tre grossi torrenti, scende appoggiata a | ||
+ | due monti contigui, l'uno detto di san Martino, l' | ||
+ | Resegone, dai molti suoi cocuzzoli in fila, che in vero lo fanno somigliare a | ||
+ | una sega:</ | ||
+ | </ | ||
+ | </ | ||
+ | <!-- ===================== Tabs ===================== --> | ||
+ | <div id=" | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | <div id=" | ||
+ | < | ||
+ | interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e | ||
+ | del rientrare di quelli, vien quasi a un tratto, tra un promontorio a | ||
+ | destra e un' | ||
+ | </ | ||
+ | <div id=" | ||
+ | <p>e il ponte, che ivi congiunge le due rive par che renda ancor più sensibile | ||
+ | all' | ||
+ | l'Adda ricomincia per ripigliar poi nome di lago dove le rive, allontanandosi | ||
+ | di nuovo, lascian l' | ||
+ | seni...</ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Per // | ||
+ | |||
+ | <code javascript> | ||
+ | $(document).ready(function () { | ||
+ | ... | ||
+ | $("# | ||
+ | $("# | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Formattazione numeri risultato query ===== | ||
+ | |||
+ | Il risultato di una query tramite lo strumento **Seleziona** viene mostrato in un dialog box, purtroppo i numeri vengono formattati come numeri con cinque decimali, anche se si tratta di numeri interi. | ||
+ | |||
+ | Per migliorare l' | ||
+ | |||
+ | <code javascript> | ||
+ | if (!(noShpLink && i == 0)) | ||
+ | h.append(layTpl.tvalues['# | ||
+ | | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | con | ||
+ | |||
+ | <code javascript> | ||
+ | if (!(noShpLink && i == 0)) { | ||
+ | var value; | ||
+ | if (String(this).match(/ | ||
+ | value = parseFloat(this).toFixed(0); | ||
+ | } else if (String(this).match(/ | ||
+ | value = parseFloat(this).toFixed(3); | ||
+ | } else { | ||
+ | value = this; | ||
+ | } | ||
+ | h.append(layTpl.tvalues['# | ||
+ | | ||
+ | ); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | I **numeri interi** sono formattati senza decimali, i **float con solo 3 decimali** e tutto il resto rimane invariato. | ||
+ | |||
+ | ===== Dialog box con PM.Dlg.createDnRDlg ===== | ||
+ | |||
+ | Thanks to Armin Burger for the following details. | ||
+ | |||
+ | In plugins writing or extending p.mapper code, it is nice to use dialog boxes in the p.mapper way. Here it is an example for the **'' | ||
+ | |||
+ | <code javascript> | ||
+ | var dlgOptions = { | ||
+ | width: 640, height: 480, left: 100, top: 50, | ||
+ | resizeable: true, | ||
+ | newsize: true, | ||
+ | container: ' | ||
+ | name: ' | ||
+ | }; | ||
+ | |||
+ | var dlg = PM.Dlg.createDnRDlg( | ||
+ | dlgOptions, | ||
+ | ' | ||
+ | popupUrl | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | The non-trivial options are: | ||
+ | |||
+ | ^ '' | ||
+ | ^ '' | ||
+ | ^ '' | ||
+ | |||
+ | Once the dialog is opened, it can be addressed (e.g. to change its content) using jQuery. In the following example if the dialog does not exists, it will be created; otherwise its content is reloaded and it is shown: | ||
+ | |||
+ | <code JavaScript> | ||
+ | var dlgOptions = { | ||
+ | width: 640, height: 480, left: 100, top: 50, | ||
+ | resizeable: true, newsize: true, | ||
+ | container: ' | ||
+ | name: ' | ||
+ | }; | ||
+ | |||
+ | var popupUrl = PM_PLUGIN_LOCATION + '/ | ||
+ | var dlgObject = $('#' | ||
+ | if (dlgObject.length < 1) { | ||
+ | var dlg = PM.Dlg.createDnRDlg(dlgOptions, | ||
+ | } else { | ||
+ | $.ajax({ | ||
+ | url: popupUrl, | ||
+ | type: ' | ||
+ | dataType: ' | ||
+ | success: function(response) { | ||
+ | dlgObject.html(response); | ||
+ | dlgObject.parent().parent().show(); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | When using forms, p.mapper has two handy PM.Form JavaScript functions to read all the form values and to transform them into a string to be used in AJAX post or get requests: | ||
+ | |||
+ | ^ '' | ||
+ | ^ '' | ||
doc/appunti/linux/lezioni/pmapper_dev.txt · Last modified: 2011/07/21 09:44 by niccolo