Mabilis at madali: Lumikha ng Iyong Sariling jQuery Sandbox para sa SharePoint

Ito ay isa pang post sa aking on-pagpunta serye kung paano gamitin jQuery may SharePoint.
Kung gusto mong matuto nang higit pa tungkol sa jQuery, Ko lubos na inirerekomenda: jQuery sa Aksyon sa pamamagitan ng Bear Bibeault at Yehuda Katz.

Pagsisimula sa jQuery sa SharePoint ay nakakagulat na madaling (akin). (Akong seryosong tanong tungkol sa isang "pinakamahusay na kasanayan" diskarte sa pag-deploy ang mga bagay na produksyon, ngunit iyan ay para sa isa pang araw). I’ve just started playing with this technology and to that end, I created a sandbox environment to use. If you’re looking to get started with jQuery, maaari mong mahanap ang diskarte na ito kapaki-pakinabang.

1. Lumikha ng isang Blangkong Site

Lumikha ng blangkong site sa isang lugar sa iyong site at tumawag ito ng isang bagay na matalino tulad ng "jQuery Sandbox".

2. I-download ang jQuery

Maaari mong i-download ang jQuery javascript library mula dito: http://docs.jquery.com/Downloading_jQuery

I-save ang na sa sa iyong desktop.

Ako ay na-gamit ang "minified" bersyon.

3. Lumikha ng isang Library SharePoint Dokumento

Sa iyong sandbox site, create a document library.

4. I-upload ang jQuery Library upang SharePoint

I-access ang doc library mo lamang nilikha at i-upload ang jQuery library.

5. Lumikha ng isang Custom List SharePoint

I’ve started with a custom list because I want to muck about with standard SharePoint forms. You could also create a page in a pages library or web part pages and probably a lot of other places.

Add some columns to the custom list so that you have something to run jQuery against. My initial objectives were to:

  1. Itago ang isang patlang.
  2. Magtalaga ng isang halaga sa isang patlang.

Gamit na layunin sa isip, I added two text fields. Over time, Kukunin ko mai-play na may mga link, mga larawan, lookup, at iba pa.

6. Baguhin ang NewForm.aspx Web Bahagi Page at Magdagdag ng Nilalaman Editor Web Part

Ito ay isang maliit na itim na magic-HDR , in that it’s a new concept to me. I first learned about this from Paul Grenier, SharePoint jQuery superstar, sa kanyang site CodePlex proyekto: http://spff.codeplex.com/.

Sundin ang mga hakbang na ito upang idagdag ang isang CEWP sa parehong pahina na nagpapakita sa NewForm.aspx para sa anumang pasadyang listahan:

  1. I-access ang mga custom na listahan at i-click ang Bagong.
  2. Ikabit ang sumusunod na mga URL: PageView = Naibahaging&ToolPaneView = 2

Iyon ay ibahin ang anyo ng iyong pagbubutas vanilla data entry form mula sa isang bagay na tulad nito:

image

Upang ito:

image

Idagdag ang nilalaman editor web bahagi sa pahina.

7. Isulat ang iyong Unang jQuery Code

Buksan up na CEWP sa view ng code at idagdag ang mga sumusunod:

image

Narito ang aktwal na code kung gusto mong kopyahin / ilagay:

<iskrip
    "text/javascript"
    SRC ="../../jQuery%20Library/jquery-1.3.2.min.js">
</script>

<script type ="text/javascript">
  $(tungkulin() {

    $('# ResultsID').html('Mayroong' + $('Ang isang').laki() + 'Ang isang tag ng tag sa pahinang ito.');

  });
</script>

Magbunga:
<div id ='ResultsID'></div>
/magbunga

Tandaan na ang unang <script> tag is referencing the actual jQuery library. Presumably, mga bagay na ito sa paglipas ng panahon, kaya makikita mo gusto upang matiyak na isang) gamitin ang tamang pangalan at b) ituro ito sa tamang library SharePoint dokumento.

Magpainit sa Glory

Kung ginawa mo ito nang tama, makakakita ka ng isang resulta kamukha ng mga sumusunod:

image

Pambalot Up

Ito ay hindi lamang ang tanging paraan upang makapagsimula, subalit ito ay mabilis na, easy and isolated from your existing SharePoint environment.

</dulo>

Mag-subscribe sa aking blog.

Sundin ako sa Twitter sa http://www.twitter.com/pagalvin

2 ano sa tingin mo "Mabilis at madali: Lumikha ng Iyong Sariling jQuery Sandbox para sa SharePoint

  1. sujith krish

    Have you noticed that adding CEWP in editform.aspx would break the page and version information section shows up in the UI? Any workarounds for this?

    Anyone ?

    Sumagot

-Iwan ng sagot

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan *