توسعه تکنولوژی شیرپوینت در جهان همچنان در حال پیشرفت است و در کنار آن استفاده از ابزارهای جدید وب مانند Silverlight ،jQuery و توسعه سریع آنها در شیرپوینت نیز به طور قابل توجهی در حال گسترش می باشد.
jQuery یکی از این ابزارهای جدید می باشد که برنامه نویسان و طراحان سایت ها را به سرعت به سمت خود جذب کرده است! ابزاری که با حجم بسیار کم، قابلیت های بسیار بزرگی را دارا می باشد.
jQuery چیست ؟
به طور کلی می توان گفت jQuery ساده شده زبان JavaScript است. jQuery یک کتابخانه/ API جاوا اسکریپتی میباشد که به برنامه نویسان اجازه می دهد تا چندین خط کد جاوا اسکریپت را در یک خط خلاصه کنند! jQuery بسیار سریعتر از جاوا اسکریپت عمل می کند و حجم فایل کتابخانه/ API آن ۵۵ کیلوبایت می باشد! به صورت کامل تمام مرورگرهای اینترنت را پوشش می دهد. 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.
});
- show
- hide
- slideDown
- slideUp
- fadeIn
- fadeOut
- click
- focus
برای مثال کد زیر را در نظر بگیرید :
$(".MyClass").show("slow", someFunction)
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html
http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html
<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 یکی از plugin های بسیار زیبای jQuery می باشد که تصاویر thumbnail موجود در صفحه را توسط effectهای بسیار زیبایی بزرگ نموده و به کاربر نمایش می دهد. در مقاله زیر نحوه استفاده از این plugin در شیرپوینت و همچنین نحوه نمایش تصاویر موجود در Picture Library توسط LightBix تشریح شده است :
همچنین برای دانلود LightBox Plugin به این آدرس مراجعه کنید.
خُب، خسته نباشید! امیدوارم مطالب این پُست هم براتون مفید بوده باشه. پیشنهاد می کنم برای زیباتر شدن سایت ها حتماً از plugin های jQuery در صفحات شیرپوینتی استفاده کنید تا سایت های جذابی داشته باشید… 🙂
منابع :