はじめに

ガジェット

世界時計を読み込み中

為替レート

Help menu

TryCMSも2010年現在、おかげ様でメジャーバージョンも「7.」となりました。
今回、開発言語もPerlからPHPに変更し、機能追加の繰り返しではなく、まったく新たに開発されることにより、時代にあった最新機能もサポートしています。その代表的な物が「jQuery」のサポートです。

jQueryとプラグイン

jQueryは、jquery.comが開発したjavascriptのフレームワークで、これ自体、特に何も行わないのですが、jQuery用のプラグインが世界中に無限に存在し、そのほとんどを無料で使用することが出来ます。
それらのプラグインの中には、このように画像をクルクルと回したり、画像をクリックして拡大することも可能にします。

少し前であれば、高価なフラッシュが必要で、やっとの思いで購入しても使いこなすのがまた大変でした。 jQueryのプラグインであれば、既に完成品が公開されていますので、気に入った動作を探してソースを貼り付けるだけです。

このページのアコーディオンも、ツリー表示されているヘルプメニューもjQueryのプラグインです。それでも設定が難しいと言う方には、これらのプラグインをTryCMSのコントロールパネルで簡単に設定するツールもオプションでご用意しています。

※プラグインは、それぞれ作者が異なりますので、1ページに複数のプラグインを設置する場合は注意が必要です。プラグイン間の相性が悪く、「どちらかが正常に動作しない」、「両方が動作しない」場合も有ります。 TryCMSがサポートするプラグインも例外では有りませんので、すべての動作を保障するものではありません。ご了承ください。

当サイトでご紹介するjQueryもプラグインも導入時にインストール済みです。ご利用の場合には、使用するプラグインのjavascriptをページのヘッダー部でインクルード(読み込み)しておく必要が有ります。

								
									<link rel="stylesheet" href="/jquery/themes/start/jquery-ui.css" type="text/css" />
									<link rel="stylesheet" href="/jquery/colorbox/example1/colorbox.css" type="text/css" />
									<link rel="stylesheet" href="/jquery/colorpicker/css/colorpicker.css" type="text/css" />
									<link rel="stylesheet" href="/jquery/sidemenu/css/webwidget_vertical_menu.css" type="text/css" />
									<link rel="stylesheet" href="/jquery/treeview/treeview.css" type="text/css" />


									<script type="text/javascript" src="/jquery/js/jquery-1.6.4.min.js"></script>
									<script type="text/javascript" src="/jquery/js/jquery-ui-1.8rc3.custom.min.js"></script>

									<script type="text/javascript" src="/jquery/colorbox/colorbox/jquery.colorbox-min.js"></script>
									<script type="text/javascript" src="/jquery/colorpicker/js/colorpicker.js"></script>
									<script type="text/javascript" src="/jquery/sidemenu/js/webwidget_vertical_menu.js"></script>
									<script type="text/javascript" src="/jquery/treeview/jquery.treeview.js"></script>
									<script type="text/javascript" src="/jquery/treeview/lib/jquery.cookie.js"></script>
									<script type="text/javascript" src="/jquery/jquery.k3dCarousel.js"></script>

									<link rel="stylesheet" href="/trycms/initialize.css" type="text/css" />
									<script type="text/javascript" src="/trycms/system.js"></script>

									<link rel="stylesheet" href="/jquery/apymenu/theme21/menu.css" type="text/css" />
									<script type="text/javascript" src="/jquery/apymenu/theme21/menu.js"></script>

これだけ入れておけば、ほとんどが動作可能です。スタイルシートも必要ですので上記をそのままコピーしていただいて結構です。詳細は以下をご参照ください。

	摘要
1行	jquery純正のインターフェース集専用スタイルシート
2行	画像をポップアップ表示する「カラーボックス」用スタイルシート
3行	色選択ダイアログボックス用スタイルシート
4行	サイドメニュー用スタイルシート
5行	サイドメニュー(ツリー表示)用スタイルシート
7行	jQueryの心臓部、javascriptフレームワーク本体
8行	jQuery純正ユーザインターフェース集
10行	画像をポップアップ表示する「カラーボックス」用プラグイン
11行	色選択ダイアログボックス用プラグイン
12行	サイドメニュー用プラグイン
13行、14行	サイドメニュー(ツリー表示)用プラグイン
15行	イメージチェンジャ「Carousel」用プラグイン
17行	tryCMS7専用スタイルシート
18行	TryCMS7システムスクリプト
20行	プルダウンメインメニュー用スタイルシート
21行	プルダウンメインメニュー用プラグイン

W3Cが推奨するxhtmlのヘッダーを含む標準的なhtmlヘッダーは以下のようになります。

								
									<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
									 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
									<html xmlns="http://www.w3.org/1999/xhtml">
									<head>
									<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
									<meta name="content-language" content="ja" />
									<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
									<meta http-equiv="content-style-type" content="text/css" />
									<meta http-equiv="content-script-type" content="text/javascript" />
									<title>ページのタイトル</title>
									<meta name="description" content="ページの概要" />
									<meta name="keywords" content="SEO対策、検索エンジン用キーワード" />

									<link rel="stylesheet" href="/jquery/themes/start/jquery-ui.css" type="text/css" />
									<link rel="stylesheet" href="/jquery/colorbox/example1/colorbox.css" type="text/css" />
									<link rel="stylesheet" href="/jquery/colorpicker/css/colorpicker.css" type="text/css" />
									<link rel="stylesheet" href="/jquery/sidemenu/css/webwidget_vertical_menu.css" type="text/css" />
									<link rel="stylesheet" href="/jquery/treeview/treeview.css" type="text/css" />


									<script type="text/javascript" src="/jquery/js/jquery-1.6.4.min.js"></script>
									<script type="text/javascript" src="/jquery/js/jquery-ui-1.8rc3.custom.min.js"></script>

									<script type="text/javascript" src="/jquery/colorbox/colorbox/jquery.colorbox-min.js"></script>
									<script type="text/javascript" src="/jquery/colorpicker/js/colorpicker.js"></script>
									<script type="text/javascript" src="/jquery/sidemenu/js/webwidget_vertical_menu.js"></script>
									<script type="text/javascript" src="/jquery/treeview/jquery.treeview.js"></script>
									<script type="text/javascript" src="/jquery/treeview/lib/jquery.cookie.js"></script>
									<script type="text/javascript" src="/jquery/jquery.k3dCarousel.js"></script>

									<link rel="stylesheet" href="/trycms/initialize.css" type="text/css" />
									<script type="text/javascript" src="/trycms/system.js"></script>

									<link rel="stylesheet" href="/jquery/apymenu/theme21/menu.css" type="text/css" />
									<script type="text/javascript" src="/jquery/apymenu/theme21/menu.js"></script>

									<link rel="stylesheet" href="/common/main.css" type="text/css" />
									</head>
									<body>

36行に自サイト用のスタイルシートをインクルードするタグを追加しています。自サイト用のスタイルシートはできるだけ1つにまとめ設定します。複数個有る場合は、全てをヘッダーでインクルードしてください。スタイルシート内で他のスタイルシーをインクルードすることはできません。

jQuery ui