1 / 2

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

■タブの追加手順. ① 「 jquery.min.js 」「 jquery-ui.min.js 」「 jquery-ui.css 」 　 を自サイトのリソースへアップロードします。 ②ページに WebParts 「 Script Editor 」を追加し、次頁の 　タブ定義「 Java Script 」を追加します。 ③タブに対応するリストは、 WebParts 「アプリ」を追加し、 　 タイトルをタブ名に変更すると、タブ内に取り込まれます。 ★この応用例として、「画面切替」が必要な掲示板の作成 　 依頼時はタブ化すれば、リンク名の変更、掲示板の追加

sonya-banks
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ■タブの追加手順 ①「jquery.min.js」「jquery-ui.min.js」「 jquery-ui.css」 　 を自サイトのリソースへアップロードします。 ②ページにWebParts「Script Editor」を追加し、次頁の 　タブ定義「Java Script」を追加します。 ③タブに対応するリストは、WebParts「アプリ」を追加し、 　 タイトルをタブ名に変更すると、タブ内に取り込まれます。 ★この応用例として、「画面切替」が必要な掲示板の作成 　 依頼時はタブ化すれば、リンク名の変更、掲示板の追加 　 対応など、１ページの編集で済むので、作業工数の削減 　 にもつながる。 Jquery タグスクリプトについて ★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」

  2. ★タブの追加は該当ページに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”

More Related