Schnell und einfach: Erstellen Sie Ihre eigenen jQuery Sandbox für SharePoint

Dies ist ein weiterer Beitrag in meinem laufenden Serie zur Verwendung jQuery mit SharePoint.
Wenn Sie, erfahren Sie mehr über jQuery möchten, Ich empfehle: jQuery in Action von Bear Bibeault und Yehuda Katz.

Erste Schritte mit jQuery in SharePoint ist überraschend einfach (Für mich). (Ich habe ernste Fragen über einen "best practices" Ansatz zur Bereitstellung von diesen Dingen zu Produktion, aber das ist für einen anderen Tag). Ich habe gerade angefangen mit dieser Technologie und in diesem Zusammenhang spielen, Ich habe eine Sandbox-Umgebung verwenden. Wenn Sie schauen, um die ersten Schritte mit jQuery, Sie können dieser Ansatz nützlich finden.

1. Erstellen einer leeren Website

Erstellen einer leeren Website irgendwo auf Ihrer Website und rufen Sie es etwas wie "jQuery Sandbox" clever.

2. JQuery herunterladen

Sie können die Javascript-Bibliothek jQuery von hier herunterladen.: http://docs.jquery.com/Downloading_jQuery

Speichern Sie, um auf Ihrem desktop.

Ich habe gewesen benutze die "minimierte" version.

3. Erstellen einer SharePoint-Dokumentbibliothek

In der Sandbox-Website, Erstellen einer Dokumentbibliothek.

4. Die jQuery-Bibliothek in SharePoint hochladen

Zugriff auf die Doc-Bibliothek, die Sie gerade erstellt haben und hochladen die jQuery-Bibliothek.

5. Erstellen einer benutzerdefinierten SharePoint-Liste

Ich habe mit einer benutzerdefinierten Liste angefangen, weil ich mit SharePoint Standardformulare Dreck zu wollen. Sie könnten auch eine Seite in einer Bibliothek für Seiten oder Webpartseiten und wahrscheinlich viele andere Orte erstellen..

Fügen Sie einige Spalten der benutzerdefinierten Liste hinzu, damit Sie etwas zu jQuery gegen ausgeführt haben. Meine ersten Ziele waren:

  1. Ausblenden eines Feldes.
  2. Ein Feld einen Wert zuweisen.

Mit diesem Ziel vor Augen, Ich habe zwei Textfelder. Im Laufe der Zeit, Ich werde mit Links spielen, Bilder, Suchen, usw..

6. Ändern der Webpartseite NewForm.aspx und Hinzufügen eines Inhalts-Editor-Webparts

Dies ist ein wenig schwarz magic-ish , Es ist ein neues Konzept für mich. Lernte ich über das von Paul Grenier, SharePoint jQuery Superstar, auf seiner Website CodePlex-Projekt: http://spff.codeplex.com/.

Gehen Sie folgendermaßen vor um eine CEWP auf der gleichen Seite hinzufügen, die für jede benutzerdefinierte Liste NewForm.aspx zeigt:

  1. Zugriff auf die benutzerdefinierte Liste, und klicken Sie auf neu.
  2. Folgendes an die URL anfügen: Seitenzugriff = freigegeben&ToolPaneView = 2

Das wird Ihr langweilig Vanille Dateneingabeformular aus etwas verwandeln:

image

Dazu:

image

Fügen Sie das Inhalts-Editor-Webpart auf der Seite.

7. Schreiben Sie Ihre erste jQuery Code

Öffnen Sie die CEWP in der Codeansicht und fügen Sie folgende:

image

Hier ist der eigentliche Code, wenn Sie, kopieren und einfügen möchten:

<Skript-Typ ="Text/javascript"
    Src ="../../jQuery Library/jQuery-1.3.2.Min.js">
</Skript>

<Skript-Typ ="Text/javascript">
  $(Funktion() {

    $('#resultsID').HTML("Es gibt" + $('a').Größe() + "ein Tags Tags auf dieser Seite.");

  });
</Skript>

Ergebnis:
<Div Id ='ResultsID'></div>
/Ergebnis

Beachten Sie, dass die erste <Skript> Tag ist die tatsächliche jQuery-Bibliothek verweisen.. Vermutlich, Diese Dinge ändern im Laufe der Zeit, so Sie sicherstellen, dass Sie möchten eine) Verwenden Sie den richtigen Namen und b) zeigen Sie es auf die richtige SharePoint-Dokumentbibliothek.

Im Ruhm Sonnen

Wenn Sie alles richtig gemacht haben, Sie sehen ein Ergebnis ähnlich der folgenden:

image

Nachbereitung

Dies ist nicht der einzige Weg um zu beginnen, aber es ist schnell, leicht und isoliert von der vorhandenen SharePoint-Umgebung.

</Ende>

Onnieren Sie meinen Blog ab.

Folgen Sie mir auf Twitter bei http://www.twitter.com/pagalvin

2 Gedanken zu „Schnell und einfach: Erstellen Sie Ihre eigenen jQuery Sandbox für SharePoint

  1. Sujith krish

    Sie haben bemerkt, dass CEWP in editform.aspx hinzufügen die Seite brechen würde und Version Informationsabschnitt sich in der Benutzeroberfläche zeigt? Problemumgehungen für diese?

    Wer ?

    Antwort

Hinterlasse eine Antwort

Deine Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert *