スポンサーサイト
Prototype Window Classの使い方
ページ内にサブウインドウを表示するAjaxライブラリPrototype Window Classの使い方の覚書です。
»Prototype Window Class : Introduction
»サンプルを表示
クリックするとページ内にサブウインドウにPrototype Window Class : Introductionを表示します。
Prototype Window Classの特徴
- サブウインドウをレイヤーとして表示
- Prototype Window Classはサブウインドウをページ内にレイヤーとして表示します。ポップアップブロックによる表示制限を受けることがありません。
- 多機能なサブウインドウ
- 閉じる,最大化、最小化やドラッグ&ドロップが可能でです。
Prototype Window Classの使い方
- Prototype Window Classのダウンロード
- Prototype Window Classをダウンロードして解凍します。
»Prototype Window Class : Introduction - 必要ファイルのアップロード
ウインドウを表示するために必要なファイルをアップロードします。下記のファイルは基本的なウインドウの場合です。
prototype.js
effects.js
window.js
default.css
defaultフォルダの画像default.cssは利用画像を相対パスで記載しています。FC2などのディレクトリがアップロードできない場合は、default.cssを修正します。
例) url(default/bottom_left.gif) → url(bottom_left.gif)
- 必要ファイルの読み込み
head要素でアップロードした一連のファイルを読み込みます。
<script type="text/javascript" src="●●●/prototype.js" charset="utf-8"></script>
<script type="text/javascript" src="●●●/effects.js" charset="utf-8"></script>
<script type="text/javascript" src="●●●/window.js" charset="utf-8"></script>
<link href="●●●/default.css" rel="stylesheet" type="text/css"/ charset="utf-8" />FC2ブログなど文字コードがUTF-8以外の場合はtype="text/css"/ charset="utf-8"をつけるのが無難です。
- 関数の定義
-
クリックされたときに呼び出す関数を定義します。
<script type="text/javascript">
function openWindow(){
var win = new Window("cubewin", {
title: "cubu Labo Sample", className: "dialog", top:50, left:120, zIndex: 100,
width:400, height:300,
resizable: true, draggable:true, url:"http://prototype-window.xilinus.com/"
});
win.setDestroyOnClose();
win.showCenter(); // センターに表示
}
</script>
- 呼び出し
Prototype Window Classを呼び出すリンクを記述します。
<a href="javascript: return false;" onclick="openWindow();">サンプルを表示</a>
参考記事
»Prototype Window Class : Introduction
»Prototype Window Classリファレンス
»Prototype Javascript Windowsがパワーアップ。「Prototype Window Class」: Recently Ajax
関連記事
»Javascriptライブラリの使い方
»Javascript/Ajaxライブラリー一覧
»Lightbox2.0の使い方
»ThickBoxの使い方
»Javascriptの角丸ライブラリ
»Prototype Window Classの使い方
»Link Thumnailの使い方
特徴と注意点 -WordPress-
WordPressをCMSとして利用するさいの利点と留意すべき点の簡単な覚書です。
特徴
- 更新が簡単(無料ブログサービスと同等の操作)
- 自由な時間に更新可能
- 更新費用が不要
- デザインの自由度がとても高い
- ブログとしての実績世界No1
- フリーソフト(開発コミュニティーが世界規模)
- CMSとして企業用HPへの導入実績が増加
- RSSに対応
- SEOに有利(Transitional XHTML 1.0 + CSS)
留意点
- DBのバックアップが必要
- 動的なページ生成
- 動的なページ生成によるSEOとの関係
- サーバへの負荷
パーツテンプレートとは -WordPress-
本記事は下記ブログへ移転しました。
- テーマ:ホームページ・ブログ制作
- ジャンル:コンピュータ
font-sizeプロパティ
本記事は下記ブログへ移転しました。
浮動ボックスとfloatプロパティ
本記事は下記ブログへ移転しました。
ボックスの配置方法
本記事は下記ブログへ移転しました。
ブロックボックスの伸縮
本記事は下記ブログへ移転しました。
行ボックス
本記事は下記ブログへ移転しました。
包含ブロック
本記事は下記ブログへ移転しました。
非置換インラインボックス
本記事は下記ブログへ移転しました。
インラインボックス
本記事は下記ブログへ移転しました。
ブロックボックス
本記事は下記ブログへ移転しました。
ボックスモデル
本記事は下記ブログへ移転しました。
CSSの分類(固定/優先/代替)
本記事は下記ブログへ移転しました。
CSSの分類(製作者/ユーザー/デフォルト)
本記事は下記ブログへ移転しました。
外部CSS
本記事は下記ブログへ移転しました。
セレクタ
本記事は下記ブログへ移転しました。
CSSとは
本記事は下記ブログへ移転しました。
アクセシビリティ
本記事は下記ブログへ移転しました。
Geckoの画像間の隙間問題
本記事は下記ブログへ移転しました。
CSSハックとは
本記事は下記ブログへ移転しました。
Clearfix
本記事は下記ブログへ移転しました。
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
Google Mapで目的の場所にタブを持った吹き出し付マーカーを表示します。 マーカーをクリックするとタブを持った吹き出しが表示されます。例では東京タワーにマーカーを表示しています。
マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル※1
※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。
コード
head部
地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。
<script src="http://maps.google.com/maps?file=api&v=2&key=●●●"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.659057, 139.744442), 16); //基準点
map.addControl(new GLargeMapControl()); // 拡大縮小ボタン表示
map.addControl(new GMapTypeControl());// 地図タイプ変更ボタン表示
var marker =new GMarker(GLatLng(35.658632, 139.745411)); // 東京タワーにマーカーを設定
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml([new GInfoWindowTab('名称','東京タワー'), new GInfoWindowTab('正式名称','日本電波塔')]);
map.addOverlay(marker); // マーカーを表示
}
}
//]]>
</script>
body部
body要素に挿入するHTMLコードです。
<div id="map" style="width: 500px; height: 300px">div>
関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-
- テーマ:ホームページ・ブログ制作
- ジャンル:コンピュータ
地図の表示(3) 吹き出しの表示 -Google Maps-
Google Mapで目的の場所に吹き出し付マーカーを表示します。 マーカーをクリックすると吹き出しが表示されます。例では東京タワーにマーカーを表示しています。
マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル※1
※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。
コード
head部
地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。
<script src="http://maps.google.com/maps?file=api&v=2&key=●●●"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.659057, 139.744442), 16); //基準点
map.addControl(new GLargeMapControl()); // 拡大縮小ボタン表示
map.addControl(new GMapTypeControl());// 地図タイプ変更ボタン表示
var marker =new GMarker(GLatLng(35.658632, 139.745411)); // 東京タワーにマーカーを設定
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('東京タワー');});
map.addOverlay(marker); // マーカーを表示
}
}
//]]>
</script>
body部
body要素に挿入するHTMLコードです。
<div id="map" style="width: 500px; height: 300px">div>
関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-
- テーマ:ホームページ・ブログ制作
- ジャンル:コンピュータ
地図の表示(2) マーカー表示 -Google Maps-
Google Mapで目的の場所にマーカーを表示します。例では東京タワーにマーカーを表示しています。
マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル※1
※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。
コード
head部
地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。
<script src="http://maps.google.com/maps?file=api&v=2&key=●●●"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.659057, 139.744442), 16); //基準点
map.addControl(new GLargeMapControl()); // 拡大縮小ボタン表示
map.addControl(new GMapTypeControl());// 地図タイプ変更ボタン表示
var marker =new GMarker(GLatLng(35.658632, 139.745411)); // 東京タワーにマーカーを設定
map.addOverlay(marker); // マーカーを表示
}
}
//]]>
</script>
body部
body要素に挿入するHTMLコードです。
<div id="map" style="width: 500px; height: 300px">div>
関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-
- テーマ:ホームページ・ブログ制作
- ジャンル:コンピュータ
地図の表示(1) 基本地図 -Google Maps-
もっとも基本的なGoogle Mapsの表示例です。東京タワーの周辺の地図を表示しています。
コード
head部
地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。
<script src="http://maps.google.com/maps?file=api&v=2&key=●●●"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.659057, 139.744442), 16);
map.addControl(new GLargeMapControl()); // 拡大縮小ボタン表示
map.addControl(new GMapTypeControl()); // 地図タイプ変更ボタン表示
}
}
//]]>
</script>
body部
body要素に挿入するHTMLコードです。
<div id="map" style="width: 500px; height: 300px">div>
関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-
- テーマ:ホームページ・ブログ制作
- ジャンル:コンピュータ
Google Mapsでオリジナルアイコンを表示する
Google Mapsでオリジナルのアイコンを表示する方法を説明しています。下記サンプルではmarker1.png〜marker9.pngがサーバへアップロードします
アルファベットや番号付のGoogle Maps用アイコンは下記のサイトで無料でウェブ上で作成できます。
»Google-Maps markers generator
関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-
- テーマ:ホームページ・ブログ制作
- ジャンル:コンピュータ
外部ファイル -Google Maps-
Google Mapsのコード量が多くなってきたら、Google Maps用のコードを外部Javascriptファイルに記載して、読み込む方法が便利です。
<head>
・・・・・・・・・・
<script src="http://maps.google.com/maps?file=api&v=2&key=マップキー" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="外部Javascriptファイルへのパス"></script>
・・・・・・・・・・
</head>
Javascriptファイル(拡張子.js)はアップロードしておきます。
関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-
- テーマ:JavaScript（ジャバスクリプト）
- ジャンル:コンピュータ