Facile e veloce: Create Your Own jQuery Sandbox per SharePoint

Questo è un altro post nel mio serie in corso su come utilizzare jQuery con SharePoint.
Se volete saperne di più su jQuery, Mi raccomando: jQuery in azione Orso Bibeault e Yehuda Katz.

Introduzione a jQuery in SharePoint è sorprendentemente facile (A me). (Ho gravi domande su un approccio di "migliori pratiche" per la distribuzione di queste cose in produzione, ma che è per un altro giorno). Ho appena iniziato a giocare con questa tecnologia e a tal fine, Ho creato un ambiente sandbox di utilizzare. Se stai cercando di iniziare con jQuery, Potete trovare questo approccio utile.

1. Creare un sito vuoto

Creare un sito vuoto da qualche parte nel tuo sito e chiamare qualcosa di intelligente come "jQuery Sandbox".

2. Scaricare jQuery

È possibile scaricare la libreria javascript jQuery da qui: http://docs.jquery.com/Downloading_jQuery

Che per salvare sul desktop.

Ho usato la versione "minified".

3. Creare una raccolta documenti di SharePoint

Nel tuo sito sandbox, creare una raccolta documenti.

4. Caricare la libreria jQuery di SharePoint

Accedere alla libreria di doc che appena creato e caricare la libreria jQuery.

5. Creare un elenco di SharePoint personalizzata

Ho iniziato con un elenco personalizzato, perché voglio arrangiarci con moduli standard di SharePoint. È inoltre possibile creare una pagina in una raccolta di pagine o pagine web part e, probabilmente, un sacco di altri posti.

Aggiungere alcune colonne all'elenco personalizzato, in modo che tu abbia qualcosa da eseguire jQuery contro. I miei obiettivi iniziali erano a:

  1. Nascondere un campo.
  2. Assegnare un valore a un campo.

Con questo obiettivo in mente, Ho aggiunto due campi di testo. Nel corso del tempo, Sarò giocare con collegamenti, immagini, ricerche, ecc.

6. Modificare la pagina NewForm. aspx Web Part e aggiungere una Web Part Editor contenuto

Questo è un piccolo nero magic-ish , in quanto è un concetto nuovo per me. Imparato questo da Paul Grenier, SharePoint jQuery Superstar, presso il sito del progetto CodePlex: http://spff.codeplex.com/.

Attenersi alla seguente procedura per aggiungere un CEWP alla stessa pagina che Mostra NewForm per qualsiasi elenco personalizzato:

  1. Accedere all'elenco personalizzato e fare clic su nuovo.
  2. Aggiungere il seguente URL: PageView = condiviso&ToolPaneView = 2

Che trasformerà il vostro modulo di immissione di dati vaniglia noioso da qualcosa di simile:

image

A questo:

image

Aggiungere la web part editor contenuto nella pagina.

7. Scrivi il tuo primo jQuery codice

Aprire quel CEWP nella vista codice e aggiungere il seguente:

image

Ecco il codice effettivo se volete copia/incolla:

<tipo dello script ="text/javascript"
    src =".. /.. /jQuery Library/jQuery-1.3.2.min.js">
</script di>

<tipo di script ="text/javascript">
  $(funzione() {

    $('#resultsID').html('Ci sono' + $('a').dimensione() + 'un tag tag su questa pagina'.);

  });
</script di>

Risultato:
<div id ='resultsID'></div>
/risultato

Si noti che il primo <script di> Tag fa riferimento la libreria jQuery effettivo. Presumibilmente, queste cose cambiano nel tempo, quindi ti consigliamo per assicurarsi che un) utilizzare il nome giusto e b) puntarlo nella corretta raccolta documenti di SharePoint.

Crogiolarsi nella gloria

Se avete fatto correttamente, vedrai un risultato simile al seguente:

image

Il confezionamento

Questo non è l'unico modo per iniziare, ma è veloce, facile e isolato dall'ambiente SharePoint esistente.

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

2 pensieri su "Facile e veloce: Create Your Own jQuery Sandbox per SharePoint

  1. Sujith krish

    Avete notato che l'aggiunta di CEWP in EditForm spezzerebbe la pagina e sezione di informazioni di versione compare nell'interfaccia utente? Eventuali soluzioni alternative per questo?

    Chiunque ?

    Risposta

Lasciare una risposta

L'indirizzo email non verrà pubblicato. i campi richiesti sono contrassegnati *