Αυτή είναι μια άλλη θέση σε μου η σειρά συνεχίζεται σχετικά με τη χρήση jQuery με SharePoint.
Αν θέλετε να μάθετε περισσότερα σχετικά με jQuery, Συστήνω ιδιαίτερα: jQuery σε δράση από την αρκούδα Bibeault και Yehuda Katz.

Να πάρει αρχισμένο με jQuery στο SharePoint είναι εκπληκτικά εύκολο (Σε μένα). (Έχω σοβαρά ερωτήματα σχετικά με μια «καλύτερες πρακτικές» προσέγγιση για την ανάπτυξη αυτά τα πράγματα στην παραγωγή, αλλά αυτό είναι για άλλη μια μέρα). Έχω μόλις ξεκίνησε να παίζει με αυτήν την τεχνολογία, και προς τούτο, Δημιούργησα ένα sandbox περιβάλλον χρήσης. Αν ψάχνετε για να ξεκινήσετε με jQuery, Μπορείτε να βρείτε χρήσιμες αυτή προσέγγιση.

1. Δημιουργήσετε μια κενή τοποθεσία

Δημιουργήσετε μια κενή τοποθεσία κάπου στην ιστοσελίδα σας και να το ονομάσουμε κάτι έξυπνο σαν "jQuery Sandbox".

2. Κατεβάσετε το jQuery

Μπορείτε να κατεβάσετε το jQuery βιβλιοθήκη javascript από εδώ: http://docs.jquery.com/Downloading_jQuery

Που να αποθηκεύσετε στην επιφάνεια εργασίας σας.

Έχω χρησιμοποιήσει το «minified» έκδοση.

3. Δημιουργήστε μια βιβλιοθήκη εγγράφων του SharePoint

Στην τοποθεσία sandbox, Δημιουργήστε μια βιβλιοθήκη εγγράφων.

4. Ανεβάσετε το jQuery βιβλιοθήκη SharePoint

Πρόσβαση η βιβλιοθήκη doc που μόλις δημιουργήσατε και να ανεβάσετε το jQuery βιβλιοθήκη.

5. Δημιουργήστε μια λίστα του SharePoint συνήθειας

Άρχισα με μια προσαρμοσμένη λίστα γιατί θέλω να βόρβορος σχετικά με τα τυποποιημένα έντυπα του SharePoint. Επίσης θα μπορούσατε να δημιουργήσετε μια σελίδα σε μια βιβλιοθήκη σελίδων ή σελίδων τμημάτων web και πιθανώς πολλά άλλα μέρη.

Προσθέσετε ορισμένες στήλες στη λίστα προσαρμοσμένων, ώστε να έχετε κάτι για να τρέξει jQuery κατά. Αρχικούς στόχους μου ήταν να:

1. Αποκρύψετε ένα πεδίο.
2. Αντιστοιχίσετε μια τιμή σε ένα πεδίο.

Με αυτόν τον στόχο κατά νου, Πρόσθεσα δύο πεδία κειμένου. Πάροδο του χρόνου, Θα είμαι το παιχνίδι με συνδέσεις, εικόνες, αναζητήσεις, κλπ.

6. Τροποποιήσετε τη σελίδα Τμήματος NewForm.aspx Web και να προσθέσετε ένα τμήμα Web προγράμματος επεξεργασίας περιεχομένου

Αυτό είναι ένα μικρό μαύρο magic-ish , Δεδομένου ότι είναι μια νέα αντίληψη για μένα. Θέλω πρώτα έμαθε για αυτό από Paul Grenier, JQuery SharePoint σούπερ σταρ, επί του τόπου προγράμματος CodePlex: http://spff.codeplex.com/.

Ακολουθήστε αυτά τα βήματα για να προσθέσετε ένα CEWP στην ίδια σελίδα που δείχνει NewForm.aspx για κάθε προσαρμοσμένη λίστα:

1. Πρόσβαση την προσαρμοσμένη λίστα και κάντε κλικ στο κουμπίΝέα.
2. Επισυνάπτει τα ακόλουθα για τη διεύθυνση URL: Προβολή σελίδας = από κοινού&ToolPaneView = 2

Ότι θα μετατρέψουμε σας βαρετό φόρμα καταχώρησης δεδομένων βανίλιας από κάτι σαν αυτό:

Σε αυτό:

Προσθέστε το περιεχόμενο editor τμήμα web στη σελίδα.

7. Γράψτε την πρώτη σας jQuery κώδικα

Ανοίγω πάνω ότι CEWP στην προβολή "κώδικας" και να προσθέσετε τις ακόλουθες:

Εδώ είναι η πραγματική κωδικό, αν θέλετε να copy/paste:

<σενάριο τύπου ="text/javascript"
    src =".. /.. /jQuery Library/jQuery-1.3.2.min.js">
</σενάριο>

<σενάριο τύπου ="text/javascript">
  $(συνάρτηση() {

    $(«#resultsID»).HTML(«Υπάρχουν» + $(«α»).μέγεθος() + «Ετικέτες Ετικέτες σε αυτή τη σελίδα.»);

  });
</σενάριο>

Αποτέλεσμα:
<div id =«resultsID»></div>
/αποτέλεσμα

Σημειώστε ότι η πρώτη <σενάριο> ετικέτα είναι η συσχέτιση πραγματικών jQuery βιβλιοθήκη. Κατά πάσα πιθανότητα, αυτά τα πράγματα μεταβάλλονται διαχρονικά, οπότε θα θέλετε να βεβαιωθείτε ότι έχετε ένα) Χρησιμοποιήστε το σωστό όνομα και β) το σημείο σε σωστή βιβλιοθήκη εγγράφων του SharePoint.

Bask στη δόξα

Αν το έκανε σωστά, θα δείτε ένα αποτέλεσμα παρόμοιο με το ακόλουθο:

Τυλίγοντας επάνω

Αυτό δεν είναι ο μόνος τρόπος για να ξεκινήσετε, αλλά είναι γρήγορη, εύκολο και απομονωμένο από το υπάρχον περιβάλλον σας του SharePoint.

</Τέλος>

Εγγραφείτε στο blog μου.

Συνέχεια μου για Twitter σε http://www.twitter.com/pagalvin