Jquery タグスクリプトについて

① 「 jquery.min.js 」「 jquery-ui.min.js 」「 jquery-ui.css 」 　 を自サイトのリソースへアップロードします。

② ページに WebParts 「 Script Editor 」を追加し、次頁の 　タブ定義「 Java Script 」を追加します。

③ タブに対応するリストは、 WebParts 「アプリ」を追加し、　 タイトルをタブ名に変更すると、タブ内に取り込まれます。

★ この応用例として、「画面切替」が必要な掲示板の作成　 依頼時はタブ化すれば、リンク名の変更、掲示板の追加　 対応など、１ページの編集で済むので、作業工数の削減　 にもつながる。

■ タブの追加手順

① jquery.min.js 　　　⇒ 詳しくは「 http://ja.wikipedia.org/wiki/JQuery 」を参照 jquery 「ウェブブラウザ用 JavaScript ライブラリ」の最少版

② jquery-ui.min.js ⇒ 詳しくは、「 http://www.buildinsider.net/web/jqueryuiref/0001 」を参照 jQuery-uiI は、 jQuery を拡張するライブラリ（プラグイン）の一種で、ユーザー・インターフェイス（ UI ）に関わる機能を提供。

③ jquery-ui.css 　　 ⇒ 詳しくは、「 http://www.webopixel.net/javascript/303.html 」を参照　 jquery-ui 用スタイルシート

■ 使用スクリプトの概要「役割」⇒参考サイト URL

■ どんな部分がカスタマイズ可能か？⇒参考サイト URL

この Jquery.js セットで、今回の「タブ」だけではなく、「アコーディオン・パネル」「展開可能なリッチ・メニュー」など、比較的容易に追加可能また、 jquery-ui.css 　は、色々なカラーバリエーション「テーマ」がダウンロードできる。⇒ 「 http://w w w .w ebopix el.net/jav ascript/303.htm l」

★jquery-ui.css 差替え例「テーマ変更」

★ タブの追加は該当ページに WebParts 「 Script Editor 」を追加し、以下の「 Java Script 」を追加<link type="text/css" rel="stylesheet" href="https://ymfield.sharepoint.com/SiteAssets/jquery-ui-1.11.0.min_custBR.css" /> <script type="text/javascript" src="https://ymfield.sharepoint.com/SiteAssets/jquery-1.11.1.min.js"></script><script type="text/javascript" src="https://ymfield.sharepoint.com/SiteAssets/jquery-ui-1.11.0.min_custBR.js"></script> <style type="text/css"></style><script type="text/javascript"> jQuery(document).ready(function($) { $(".s4-wpcell").hide(); $(".s4-wpcell-plain").hide(); //Put the Web Part Title for all the Web Parts you wish //to put into the tabbed view into the array below. setTimeout(function() { HillbillyTabs(["Tab1","Tab2","Tab3","Tab4","Tab5","Tab6","Tab7"]); }, 0); });

function HillbillyTabs(webPartTitles) { for(index in webPartTitles) { var title = webPartTitles[index]; $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" onclick="SetActiveTab(this.id);">'+title+'</a></li>').after('<div id="Tab'+index+'"></div>'); $("span:contains('"+title+"')").each(function(){ if ($(this).text() == title){ var webPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']"); if ($(webPart).contents().html() != undefined) { webPart = $(webPart).contents(); } $("#Tab" + index).append((webPart)); }}); } $("#tabsContainer").tabs(); $(".s4-wpcell").show(); $(".s4-wpcell-plain").show(); }</script><div id="tabsContainer"><ul id="HillbillyTabs"></ul></div>

↑ 上記のタブスクリプト例では、自サイトのリソースに変更しています。"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css” "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js”