PSPCommunity.org ورود | ثبت نام | كمك

آرش آقاجانی (Arash Aghajani)

Technical Persian Blog Focus on Microsoft SharePoint Products and Technologies

اخبار

بيشترين بازديد شده

jQuery and SharePoint

توسعه تکنولوژی شیرپوینت در جهان همچنان در حال پیشرفت است و در کنار آن استفاده از ابزارهای جدید وب مانند Silverlight ،jQuery و توسعه سریع آنها در شیرپوینت نیز به طور قابل توجهی در حال گسترش می باشد.

jQuery یکی از این ابزارهای جدید می باشد که برنامه نویسان و طراحان سایت ها را به سرعت به سمت خود جذب کرده است! ابزاری که با حجم بسیار کم، قابلیت های بسیار بزرگی را دارا می باشد.

jQuery چیست ؟

به طور کلی می توان گفت jQuery ساده شده زبان JavaScript است. jQuery یک کتابخانه/ API جاوا اسکریپتی میباشد که به برنامه نویسان اجازه می دهد تا چندین خط کد جاوا اسکریپت را در یک خط خلاصه کنند! jQuery بسیار سریعتر از جاوا اسکریپت عمل می کند و حجم فایل کتابخانه/ API آن 55 کیلوبایت می باشد! به صورت کامل تمام مرورگرهای اینترنت را پوشش می دهد. jQuery به همراه Intellesense کدهایش به طور کامل در Visual Studio 2010 پشتیبانی شده است! برای استفاده از Intellesense های jQuery در VS2008 شما نیاز به نصب Hotfix آن دارید.

برای دانلود jQuery به آدرس زیر مراجعه کنید :

http://docs.jquery.com/Downloading_jQuery

آشنایی با Syntax و دستورهای jQuery :

مهمترین بخش از دستورات jQuery استفاده از selector های می باشد. selector ها برای انتخاب object های موجود در صفحه استفاده می شوند. شما ابتدا باید یک object را در صفحه انتخاب کنید و سپس action هایی رو بر روی آن اعمال کنید. به مثالهای زیر توجه کنید :

$("#objectID")

دستور فوق تمام object های صفحه را که دارای ID فوق هستند را انتخاب می کند.

$(":text")

دستور فوق تمام Text Box های موجود در صفحه را انتخاب می کند.

$(".CSSClass")

دستور فوق تمام object هایی که خصوصیت Class آنها برابر با CSSClass باشند را انتخاب می کند.

$("a")

دستور فوق تمام تگ های a موجود در صفحه را انتخاب می کند.

حال که با مفهوم selector آشنا شدید، با مثالی کاربرد آنها را بررسی می کنیم.

فرض کنید ما در head صفحه یک style برای تگ های a به صورت زیر تعریف کرده باشیم :

<style type="text/css">

a.test { font-weight: bold; }

</style>

دستور زیر تمام تگ های a موجود در صفحه را انتخاب و style فوق را به آنها add می کند:

$("a").addClass("test");

همچنین دستور زیر style را از آنها حذف می کند :

$("a").removeClass("test");

اگر تصمیم داشته باشید تا یکسری دستورات jQuery را در هنگام لود صفحه اجرا کنید نیاز به استفاده از دستور بسیار مهم زیر دارید :

$(document).ready(function() {

// put all your jQuery goodness in here.

});
 
یکی دیگر از قابلیت های jQuery استفاده از animation در نمایش اطلاعات است که اینکار توسط event هایی صورت می گیرد.
تعدادی از این event ها عبارتند از :
  • show
  • hide
  • slideDown
  • slideUp
  • fadeIn
  • fadeOut
  • click
  • focus

برای مثال کد زیر را در نظر بگیرید :

$(".MyClass").show("slow", someFunction)
 
این کد ابتدا تمام object هایی که کلاس CSS آنها برابر MyClass باشد را انتخاب می کند و سپس event show را بر روی آن اعمال می کند که اگر object مخفی یا hidden باشد سبب نمایش آن میشود.
 
jQuery Plugins :
 
jQuery شامل plugin های بسیار زیبایی هم می باشد که به راحتی می توانید از آنها در صفحات سایت خود استفاده کنید. تعدادی از آنها را در آدرسهای زیر می توانید مشاهده و دانلود کنید :

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html

 
 
استفاده از jQuery در SharePoint :
برای استفاده از jQuery در شیرپوینت، ابتدا باید آنرا از این آدرس دانلود کنید و سپس فایل API را در پوشه Layout از hive 12 شیرپوینت کپی کنید و یا می توانید آنرا در یک فولدر مشخصی در سایت شیرپوینت اضافه کنید.
حال 2 روش برای استفاده از آن دارید. یکی اینکه، اگر اجازه دسترسی به سایت شیرپوینتی را جهت ویرایش در SPD دارید، می توانید تگ زیر را بعد از ContentPlaceHolderHead در صفحه درج کنید :
 
<script type="text/javascript" src="../JSLib/jquery-1.3.2.min.js"></script>

و سپس کد jQuery خود را بعد از آن اضافه کنید.

روش دوم این است که یک Content Editor Web Part در صفحه سایت اضافه کنید و تگ بالا را به همراه کدهای jQuery داخل آن درج و استفاده کنید.

به عنوان مثال می توانید کد زیر را در ادامه تگ بالا درج کنید :

<script type="text/javascript">
$(":button").css("background-color", "blue");

</script>

کد فوق باعث می شود رنگ زمینه تمام object های از نوع button موجود در صفحه سایت شیرپوینت شما به رنگ آبی سِت شوند!

چند ماه پیش در این پُست مطلبی رو در زمینه نحوه ایجاد Tab منوها توسط JavaScript در شیرپوینت تشریح کرده بودم. اگر علاقمند باشید می توانید این Tab ها را توسط jQuery هم پیاده سازی کنید. برای اینکار مقاله زیر را از وبلاگ Baris Wanschers مطالعه کنید.

http://www.bariswanschers.com/blog/creating-tabbed-windows-sharepoint-jquery

 

استفاده از LightBox Plugin در شیرپوینت :

lightbox

LightBox یکی از plugin های بسیار زیبای jQuery می باشد که تصاویر thumbnail موجود در صفحه را توسط effectهای بسیار زیبایی بزرگ نموده و به کاربر نمایش می دهد. در مقاله زیر نحوه استفاده از این plugin در شیرپوینت و همچنین نحوه نمایش تصاویر موجود در Picture Library توسط LightBix تشریح شده است :

http://www.fivenumber.com/lightbox-enabled-custom-webpart-displays-images-from-sharepoint-picture-library/

همچنین برای دانلود LightBox Plugin به این آدرس مراجعه کنید.

خُب، خسته نباشید! امیدوارم مطالب این پُست هم براتون مفید بوده باشه. پیشنهاد می کنم برای زیباتر شدن سایت ها حتماً از plugin های jQuery در صفحات شیرپوینتی استفاده کنید تا سایت های جذابی داشته باشید... :)

منابع :

Posted: Friday, July 03, 2009 1:12 PM توسط Arash

نظرات

Emad گفته:

مطلب مفيدي بود.

سپاس از ارائه آن.

# July 3, 2009 3:24 PM

mahmood56 گفته:

سلام آرش جان،

واقعا به مطلب بسیار جالبی اشاره کردی، تکنولوژی jQuery خیلی برنامه نویسی Java  رو راحت کرده و همچنین امکانات بسیار جالبی رو هم در اختیار قرار داده.

مرسی، عالی بود.

# July 3, 2009 4:58 PM

mahmood56 گفته:

سلام آرش جان،

واقعا به مطلب بسیار جالبی اشاره کردی، تکنولوژی jQuery خیلی برنامه نویسی Java  رو راحت کرده و همچنین امکانات بسیار جالبی رو هم در اختیار قرار داده.

مرسی، عالی بود.

# July 3, 2009 5:03 PM

sh_ziyaee گفته:

سلام مطلب خیلی عالی بود.

من از jquery lightbox استفاده کردم منتهی بعد از اضافه کردن 3 خطی که در مرحله اول گفته بود masterpage ام به هم ریخت ؟!!

در ضمن من نتونستم jquery دانلود کنم امکان داره از همین باشه ؟

متشکرم

# July 5, 2009 2:32 PM

Arash گفته:

سلام

مرسي از نظرات و لطف دوستان @ٍEmad,@Mahmood,@sh_ziyaee

@Sh_ziyaee

شما حتماً بايد API مربوط به jQuery رو دانلود و در صفحه مسترپيج بهش reference بديد. و الا ديگه هيچ دستوري عمل نمي كنه!

از اين آدرس دانلود كنيد :

http://pspcommunity.org/files/folders/1045/download.aspx

ضمناً فراموش نكنيد هنگام كار با شيرپوينت قبل از هر تغييري backup بگيريد!

# July 5, 2009 3:47 PM

sh_ziyaee گفته:

api رو اضافه کردم اما زمانی که به صفحه picture library میرم نمی تونه صفحه رو باز کنه . بررسی کردم مشکلش به خاطر این خط بود .

<script type="text/javascript" src="../../js/lightbox.js"></script>

؟؟

# July 7, 2009 8:57 AM

Arash گفته:

احتمالاً آدرس Src شما اشتباه است! آدرسي كه براي فايل js تعريف كرديد رو اصلاح كنيد.

موفق باشيد.

# July 7, 2009 11:25 AM

sh_ziyaee گفته:

درسته . فایل lightbox.js باید از فلدر js در می آوردم و تو مسیر سایت می ذاشتم . ممنون از راهنمائیتون.

ولی هیچ کدوم از دکمه های next و preview و .. نشون داده نمی شن . فکر می کنم اصلا این خط اجرا نمی شه ؟؟

<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" >

# July 8, 2009 11:22 AM
نظرات افراد ناشناس غير فعال مي باشد