Transcript Jquery_タグスクリプト「動作検証」について

Jquery タグスクリプトについて
■タブの追加手順
① 「jquery.min.js」「jquery-ui.min.js」「 jquery-ui.css」
を自サイトのリソースへアップロードします。
②ページにWebParts「Script Editor」を追加し、次頁の
タブ定義「Java Script」を追加します。
③タブに対応するリストは、WebParts「アプリ」を追加し、
タイトルをタブ名に変更すると、タブ内に取り込まれます。
★この応用例として、「画面切替」が必要な掲示板の作成
依頼時はタブ化すれば、リンク名の変更、掲示板の追加
対応など、１ページの編集で済むので、作業工数の削減
にもつながる。
★jquery-ui.css差替え例「テーマ変更」
■使用スクリプトの概要「役割」⇒参考サイトURL
①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
この Jquery.js セットで、今回の「タブ」だけではなく、「アコーディオン・パネル」「展開可能なリッチ・メニュー」など、比較的容易に追加可能
また、jquery-ui.css は、色々なカラーバリエーション「テーマ」がダウンロードできる。
⇒ 「http://www.webopixel.net/javascript/303.html」
★タブの追加は該当ページに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>
"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css”
<script type="text/javascript">
"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”
jQuery(document).ready(function($) {
"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js”
$(".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>