در مرحله اول، بیایید مجموعه های سایت Authoring and Publishing را ایجاد کنیم.
مجموعه سایت نویسنده به نویسندگان اجازه می دهد تا محتوای وب سایت خود را مدیریت کنند در حالی که مجموعه سایت انتشارات محتوای مجموعه سایت نویسنده را بررسی می کند.
مجموعه سایت Authoring را باز کنید.
لیستی به نام Breaking News ایجاد کنید که حاوی عنوان و توضیحات باشد.
بیایید یک کنترل و یک الگو برای نمایش موارد ایجاد کنیم.
- الگوی کنترل
ساختار کلی (طرح بندی) عناصر HTML را به همراه تگ های شروع و پایان ارائه می دهد. - الگوی مورد
موارد را از لیست رندر می کند و حاوی متن و تصاویر است.
حال، بیایید دو قالب نمایش برای نمایش یک کنترل jQuery News Ticker و یک آیتم jQuery News Ticker ایجاد کنیم.
کد – الگوی کنترل اخبار
اسکریپت و CSS را در کتابخانه سبک بارگذاری کنید.
اسکریپت ها و CSS را به قالب Control اضافه کنید.
- <script>
- $includeScript(this.url, "~sitecollection/Style%20Library/news%20ticker/jquery.min.js");
- $includeScript(this.url, "~sitecollection/Style%20Library/news%20ticker/ticker.js");
- $includeCSS(this.url, "~sitecollection/Style%20Library/news%20ticker/ticker.css");
- </script>
حال، بیایید طرحبندی HTML را برای Control Template تعریف کنیم.
- <div class="ticker-container">
- <div class="ticker-caption">
- <p>Breaking News</p>
- </div>
- <ul>
- _#= ctx.RenderItems(ctx) =#_
- </ul>
- </div>
کد کامل به نظر می رسد، همانطور که در زیر نشان داده شده است.
- <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
- <head>
- <title>News Control</title>
- <!--[if gte mso 9]><xml>
- <mso:CustomDocumentProperties>
- <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
- <mso:MasterPageDescription msdt:dt="string">Display a News Control</mso:MasterPageDescription>
- <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
- <mso:TargetControlType msdt:dt="string">;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
- <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
- <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
- <mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
- <mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
- <mso:HtmlDesignStatusAndPreview msdt:dt="string">http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/bannercontrol.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
- </mso:CustomDocumentProperties>
- </xml><![endif]-->
- </head>
- <body>
- <script>
- $includeScript(this.url, "~sitecollection/Style%20Library/news%20ticker/jquery.min.js");
- $includeScript(this.url, "~sitecollection/Style%20Library/news%20ticker/ticker.js");
- $includeCSS(this.url, "~sitecollection/Style%20Library/news%20ticker/ticker.css");
- </script>
- <div>
- <!--#_if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()){return "";}
- ctx.ListDataJSONGroupsKey = "ResultTables";
- ctx["CurrentItems"] = ctx.ListData.ResultTables[0].ResultRows;
- var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();
- AddPostRenderCallback(ctx, function() {
- $.getScript(siteURL + "");
- });
- _#-->
- <div class="ticker-container">
- <div class="ticker-caption">
- <p>Breaking News</p>
- </div>
- <ul>
- _#= ctx.RenderItems(ctx) =#_
- </ul>
- </div>
- </div>
- </body>
- </html>
بیایید به قالب آیتم برویم، ویژگی های مدیریت شده و متغیرهای لازم را اعلام کنیم.
- <!--#_
- var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();
- var itemIdx = ctx.CurrentItemIdx+1;
- var title = $getItemValue(ctx, "Title");
- var desc = $getItemValue(ctx, "Description");
- _#-->
ساختار HTML را با اطلاعات مورد فهرست ارائه دهید.
- <!--- HTML Goes Here -->
- <div>
- <li><span>_#= title =#_ <a href="#">_#= desc =#_</a></span></li>
- </div>