در خلال تعدادی از پروژههایی که در زمینه توسعه شیرپوینت 2010 درگیر بودم، یکی از وبپارتهایی که اکثر مشتریان درخواست میکردند وب پارت اسلاید متحرک بود. به نظر من داشتن این وبپارت ظاهرا خیلی برای مشتریان مهم بنظر میرسید، بهمین سبب در زیر به پیادهسازی آن اشاره میکنم.
ساخت لیست سفارشی
ابتدا یک لیست سفارشی بنام ContentSlides ایجاد میکنیم و ستونی از نوع Rich HTML به آن اضافه میکنیم.
ایجاد یک پروژه شیرپوینتی از نوع Visual Web Part
سپس یک پروژه شیرپوینت از نوع Visual Web Part در سایتی که لیست فوق در آن قرار دارد میسازیم.
در این مرحله نامگذاریهای پیشفرض ویژوال استودیو که برای ویژوال وبپارت در نظر گرفته را به نام مناسب تغییر میدهیم.
افزودن پلاگین AnythingSlider
ابتدا پلاگین AnythingSlider را از
این آدرس دریافت نمایید. سپس فایلهای
anythingslider.css, anythingslider-ie.css, jquery.min.js, jquery.anythingslider.js و "default.png " را به ویژوال وبپارت اضافه میکنیم. برای اضافه کردن فایلهای این پلاگین، ابتدا فولدر "Layouts"
به پروژه اضافه مینماییم و سپس فایلهای این پلاگین در این فولدر قرار میدهیم.
سپس در خط 129 و 155 و 181 فایل anythingslider.css
background: url("../images/default.png") no-repeat;
را به
background: url(“default.png") no-repeat;
تغییر دهید و شکل پروژه به صورت زیر خواهد شد.
در ادامه، بر روی "ContentSliderVisualWebPartUserControl.ascx" دابل کلیک کنید و کد زیر را به آن اضافه میکنیم.
<SharePoint:CssRegistration ID="AnythingSliderCssRegistration" runat="server"
Name="/_layouts/ContentSliderWebPart/anythingslider.css"></SharePoint:CssRegistration>
<SharePoint:CssRegistration ID="AnythingSliderCssRegistrationIE7" runat="server"
Name="/_layouts/ContentSliderWebPart/anythingslider.css" ConditionalExpression="lte IE 7"></SharePoint:CssRegistration>
<SharePoint:ScriptLink ID="JqueryScriptLink" runat="server"
Name="/_layouts/ContentSliderWebPart/jquery.min.js"></SharePoint:ScriptLink>
<SharePoint:ScriptLink ID="AnythingSliderScriptLink" runat="server"
Name="/_layouts/ContentSliderWebPart/jquery.anythingslider.js"></SharePoint:ScriptLink>
توجه کنید در کد بالا ما از کنترلهای "SharePointCssRegistration" و "SharePointScriptLink" برای اضافه نمودن فایلهای Css و JavaScript مورد نیاز و هم چنین از خصیصه "ConditionalExpression" برای اضافه کردن فایل "anythingslider-ie.css" برای مرورگر اینترنت اکسپلورر 7 به بالا استفاده کردیم.
ایجاد کوئری برای لیست سفارشی
برای ایجاد کوئری از کتابخانه jQuery بنام SPService که از این آدرس قابل دریافت است، استفاده میکنیم. فایل "jquery.SPServices.min.js" موجود در این کتابخانه را همانند سایر فایلهای اضافه شده در قسمت قبل را به پروژه اضافه میکنیم.
برای استفاده از کتابخانه، کد زیر را در user control قسمت فبلی و در ادامه کدهای قبلی وارد میکنیم.
<SharePoint:ScriptLink ID="SPServicesScriptLink" runat="server"
Name="/_layouts/ContentSliderWebPart/jquery.SPServices.min.js"></SharePoint:ScriptLink>
و برای ایجاد کوئری کد زیر در user control وارد میکنیم.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "ContentSlides",
CAMLViewFields: "<ViewFields<FieldRef Name='SlidesContent' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var liHtml = "<li>" + $(this).attr("ows_SlidesContent") + "</li>";
$("#slider").append(liHtml);
});
}
});
/*-- Initialize AnythingSlider plugin --*/
$('#slider').anythingSlider();
});
</script>
<ul id="slider" />
وظیفه این کد انجام کوئری بر روی لیست "ContentSlides" و ایجاد ساختار یک لیست جهت نمایش اسلایدها میباشد که آیتمهای این لیست مقادیر ستون
"Slides Content" میباشد، شناسه این لیست "Slider" است.
توجه کنید: ما میتوانیم CAML Queryهای پیشرفتهای برای اعمال فیلتر مناسب و چیدمان اسلایدها استفاده کنیم.
در ادامه، برای مقدار دهی اولیه به پلاگین بوسیله فراخوانی تابع
$('#slider').anythingSlider();
انجام میشود.
در پایان براحتی با Deploy نمودن Solution، امکان استفاده از وب پارت مهیاست.
برای دریافت کد این پروژه از این آدرس استفاده کنید.