はじめに
TryCMSも2010年現在、おかげ様でメジャーバージョンも「7.」となりました。
今回、開発言語もPerlからPHPに変更し、機能追加の繰り返しではなく、まったく新たに開発されることにより、
時代にあった最新機能もサポートしています。その代表的な物が「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行 プルダウンメインメニュー用プラグイン <!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> - jQuery同様、jQuery uiにも標準で対応しています。
jQuery uiは、ユーザインターフェースの略で、webページを飾る部品や、スタイルシートを指します。
以下は、導入時に自動でインストールされるデザインです。
swanky-purse
ui-darkness
smoothness
cupertino
start
sunny
le-frog
redmond
hot-sneaks
humanity
overcast
vader
ui-lightness
blitzer
excite-bike
pepper-grinder
flick
trontastic
base
eggplant
black-tie
dot-luv