Pantas dan Mudah: Buat Sandbox jQuery Sendiri untuk SharePoint

Ini merupakan satu lagi jawatan dalam saya siri berterusan bagaimana untuk menggunakan jQuery dengan SharePoint.
Jika anda ingin mengetahui lebih lanjut mengenai jQuery, Saya sangat mengesyorkan: jQuery dalam Tindakan oleh Bear Bibeault dan Yehuda Katz.

Bermula dengan jQuery di SharePoint adalah menghairankan mudah (kepada saya). (Saya mempunyai soalan yang serius tentang pendekatan "amalan terbaik" untuk menggerakkan perkara-perkara ini kepada pengeluaran, Tapi itu untuk hari lain). Saya hanya mula bermain dengan teknologi ini dan untuk mencapai matlamat, Saya telah mencipta suasana sandbox untuk menggunakan. Jika anda sedang mencari untuk mula mengenali jQuery, anda mungkin mendapati pendekatan ini berguna.

1. Mencipta Laman web kosong

Membuat tapak kosong di suatu tempat di laman web anda dan panggil ia sebagai sesuatu yang bijak seperti "jQuery Sandbox".

2. Muat turun jQuery

Anda boleh muat turun di Perpustakaan javascript jQuery agar: http://docs.jquery.com/Downloading_jQuery

Simpan untuk ke desktop anda.

Saya telah menggunakan versi "minified".

3. Mewujudkan sebuah perpustakaan dokumen SharePoint

Di halaman sandbox anda, mewujudkan sebuah perpustakaan dokumen.

4. Meng-upload jQuery Perpustakaan untuk SharePoint

Mencapai pustaka doc yang baru sahaja anda cipta dan upload Perpustakaan jQuery.

5. Mencipta senarai tersuai SharePoint

Saya telah memulakan dengan senarai tersuai kerana saya mahu muck dengan borang SharePoint standard. Anda juga boleh mencipta halaman di Perpustakaan muka surat atau bahagian laman web dan mungkin banyak tempat-tempat lain.

Tambah sesetengah lajur ke senarai tersuai supaya anda mempunyai sesuatu untuk menjalankan jQuery terhadap. Objektif awal saya adalah untuk:

  1. Sembunyi padang bola.
  2. Peruntukan bernilai kepada bidang yang.

Dengan matlamat di minda, Saya menambah dua teks bidang. Dari masa ke masa, Saya akan bermain dengan pautan, imej, carian, dan sebagainya..

6. Ubah suai halaman bahagian NewForm.aspx Web dan menambah sebahagian Web Editor kandungan

Inilah sedikit hitam magic-ish , dalam bahawa ini adalah satu konsep yang baru kepada saya. Saya mula belajar tentang perkara ini dari Paul Grenier, SharePoint jQuery Superstar, di tapak projek CodePlex beliau: http://spff.codeplex.com/.

Ikuti langkah ini untuk menambah CEWP merupakan halaman yang sama yang menunjukkan NewForm.aspx bagi mana-mana senarai tersuai:

  1. Senarai tersuai dan klik baru.
  2. Tambah yang berikut ke URL: PageView = dikongsi&ToolPaneView = 2

Yang akan mengubah borang kemasukan data vanila membosankan dari sesuatu seperti ini:

image

Ini:

image

Menambahkan bahagian web editor kandungan halaman.

7. Menulis jQuery pertama anda kod

Membuka CEWP yang dalam paparan kod dan menambah perkara-perkara berikut:

image

Berikut adalah kod yang sebenar jika anda ingin copy/paste:

<skrip jenis ="text/javascript"
    src =".. /.. /jQuery Library/jQuery-1.3.2.min.js">
</skrip>

<skrip jenis ="text/javascript">
  $(fungsi() {

    $('#resultsID').html('Terdapat' + $('a').saiz() + 'satu Tag tag pada halaman ini.');

  });
</skrip>

Keputusan:
<DIV id ='resultsID'></div>
/keputusan

Ambil perhatian bahawa yang pertama <skrip> Tag adalah rujukan Perpustakaan jQuery sebenar. Agaknya, perkara-perkara ini berubah dari masa ke masa, Jadi anda akan mahu untuk pastikan anda yang) Gunakan nama betul dan b) menghala ke Perpustakaan dokumen SharePoint betul.

Bermewah-mewahlah di kemuliaan

Jika anda melakukannya dengan betul, anda akan melihat keputusan yang sama dengan berikut:

image

Membungkus

Ini bukan satu-satunya cara untuk memulakan, tetapi ia adalah cepat, mudah dan terasing dari persekitaran SharePoint sedia ada anda.

</akhir>

Langgan ke blog saya.

Mengikuti aku di Twitter http://www.twitter.com/pagalvin

2 pemikiran untuk "Pantas dan Mudah: Buat Sandbox jQuery Sendiri untuk SharePoint

  1. sujith krish

    Adakah anda perasan bahawa menambah CEWP di editform.aspx akan melanggar halaman dan Seksyen Maklumat versi menunjukkan UI? Mana-mana workarounds ini?

    Sesiapa sahaja ?

    Balas

Tinggalkan Jawapan

alamat e-mel anda tidak akan diterbitkan. Ruangan yang diperlukan ditanda *