Ràpid i fàcil: Creï el seu propi jQuery Sandbox per a SharePoint

Això és un altre post en el meu sèrie en curs damunt com utilitzar jQuery amb SharePoint.
Si voleu més informació sobre com jQuery, Altament recomano: jQuery en acció per l'ós Bibeault i Yehuda Katz.

Primers passos amb jQuery a SharePoint és sorprenentment fàcil (per a mi). (Tinc seriosos dubtes sobre una aproximació de "millors pràctiques" per a la implementació d'aquestes coses per a la producció, but that's per un altre dia). Acabo de començar a jugar amb aquesta tecnologia i per a això, He creat un ambient de sorrera utilitzar. Si vostè està buscant per començar amb jQuery, vostè pot trobar útil aquest enfocament.

1. Crear un lloc en blanc

Crear un lloc en blanc en algun lloc en el seu lloc i en diuen alguna cosa intel ligent com "jQuery Sandbox".

2. Descarregui jQuery

Pot descarregar la jQuery javascript Biblioteca des d'aquí: http://docs.jquery.com/Downloading_jQuery

Salvar el que per a l'escriptori.

He estat utilitzant la versió "miniaturitzada".

3. Crear una biblioteca de Document de SharePoint

En el seu lloc de caixa de sorra, crear una biblioteca de documents.

4. Carregar la Biblioteca de jQuery a SharePoint

Accés a la Biblioteca de doc que acabeu de crear i carregar la Biblioteca de jQuery.

5. Crear una llista de SharePoint de costum

He començat amb una llista personalitzada perquè vull fems amb formularis del SharePoint estàndards. Vostè també pot crear una pàgina en una biblioteca de pàgines o pàgines d'elements web i probablement un munt d'altres llocs.

Afegir algunes columnes a la llista de costum perquè teniu alguna cursa el jQuery contra. Meus objectius inicials van ser:

  1. Amaga un camp.
  2. Assigni un valor d'un camp.

Amb aquest objectiu en ment, He afegit dos camps de text. Amb el temps, Vaig a estar jugant amb enllaços, imatges, cerques, etc.

6. Modificar la Part de NewForm.aspx web i sumar-se una Part de l'Editor de contingut Web

Això és una mica negre magic-ish , que és un concepte nou per a mi. Vaig aprendre sobre aquest des Paul Grenier, SharePoint jQuery Superstar, en el seu lloc de projecte de CodePlex: http://spff.codeplex.com/.

Seguiu aquests passos per afegir un CEWP a la mateixa pàgina que Mostra la NewForm.aspx per a qualsevol llista personalitzada:

  1. Accedir a la llista de costum i feu clic a nou.
  2. Afegeixi el seguir a l'URL: Visites de pàgina = compartit&ToolPaneView = 2

Que transformarà el seu formulari d'entrada de dades vainilla avorrit d'alguna cosa com això:

image

A aquest:

image

Afegir l'element web editor de continguts a la pàgina.

7. Escriure el seu primer jQuery codi

Obrir aquell CEWP en la visualització del codi i afegir el següent:

image

Aquí és el present codi si vol copiar i enganxar:

<seqüència tipus ="text/javascript"
    src =".. /.. /jQuery Library/jQuery-1.3.2.min.js">
</script>

<tipus d'escriptura ="text/javascript">
  $(funció() {

    $('#resultsID').HTML("Hi" + $("a").mida() + "un Etiquetes etiquetes en aquesta pàgina.");

  });
</script>

Resultat:
<div id ='resultsID'></Div>
/resultat

Tingueu en compte que el primer <script> etiqueta és fer referència a la llibreria jQuery real. Presumiblement, aquestes coses canvien al llarg del temps, Així que vostè voldrà assegurar-se un) Utilitzi el nom correcte i b) apunti-hi la Biblioteca de document de SharePoint correcta.

Gaudir la glòria

Si vostè ho va fer correctament, vostè veurà un resultat similar al seguir:

image

Xerrada posterior

Això no és l'única manera per començar, però és ràpid, fàcil i aïllada de l'entorn del SharePoint existent.

</final>

Subscriure's al meu blog.

Follow me on Twitter http://www.twitter.com/pagalvin

Etiquetas de Technorati: ,

Etiquetes de del.icio.us: ,

2 comentaris a "Ràpid i fàcil: Creï el seu propi jQuery Sandbox per a SharePoint

  1. Sujith krish

    Heu notat que afegint CEWP en editform.aspx trencaria la pàgina i secció d'informació de versió apareix en la interfície d'usuari? Solucions provisionals per aquest?

    Ningú ?

    Resposta

Deixi una contestació

no es publicarà la seva adreça de correu electrònic. Els camps necessaris estan marcats *