» javascriptのブログ記事

電光掲示板の様な流れるテキストを表示するタブに<marquee>というもがある。

<marquee>
文字が流れます
</marquee>

しかし、これは独自仕様の要素でHTMLの仕様書にはどこにも書かれていない。

そこで、この代わりに、jQueryを使って実現する。

サンプル

以下のソースをダウンドードする。

ヘッダに以下のソースを記述する

<link rel="stylesheet" href="li-scroller.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="jquery.li-scroller.1.0.js"></script>
<script type="text/javascript">
$(function(){
	$("ul#ticker01").liScroll({travelocity: 0.15});
});
</script>

「travelocity」は速さを表し、数値が大きいほど速くなる。

HTMLを記述する

<ul id="ticker01">
<li><a href="#">サンプルテキスト1</a></li>
<li><a href="#">サンプルテキスト2</a></li>
<li><a href="#">サンプルテキスト3</a></li>
<li><a href="#">img src="003.gif" width="16" height="16" alt="車" /></a></li>
</ul>

参照:
liScroll (a jQuery News Ticker made easy) 1.0
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

http://webscripts.softpedia.com/scriptDownload/jquery-liScroll-Download-70374.html


アクセシビリティを考慮した場合「ポップアップウィンドウ」はNGかもしれないが、どうしてもホップアップさせたい場合もある。

そんな時

<a href="noge.html" target="open" onclick="if (window.open) { window.open('hoge.html','open',''); return false; };">

のようにすると、javascriptが無効な場合でも取り合えすはリンク先のページが開く。
また、検索エンジンに登録される。

ホップアップのサンプル(Googoleがホップアップ)


最近、ウエブサイトでおしゃれなホップアップを見かけます。
どうなっているのかと調べてみると、

* LightBox http://www.huddletogether.com/projects/lightbox2/
* GreyBox http://orangoo.com/labs/?page_id=5
* ThickBox http://jquery.com/demo/thickbox/

のようなライブラリがみつかった。

LightBoxは画像を対象にしているのに対して、ThickBoxやGreyBoxはURLを指定して、コンテンツを全てBox表示する事はできるらしい。
今回はGreyBoxを使わせて頂き、リンク先の他のページを表示してみることにした。

ますは次のとこらからダウンロードする
http://orangoo.com/labs/GreyBox/Download/

ダウンロードしたZIPファイルを解凍すると色々なフォルダやファイルがあるが、とりあえず必要な物はgreyboxフォルダであるので、これをドキュメントルートに配置する。

GreyBoxは非同期通信とエフェクト処理、スライド処理を行う3つのファイルに分かれているので、
greyboxフォルダのパスを指定した後に、実際に処理を行う3つのファイルを以下のように順番に読み込ませる必要がある。
つまり、greyboxを使いたいhtmlファイルのhead部分に次の記述をする。
————————————————
<script type=”text/javascript”><!–
var GB_ROOT_DIR = “./greybox/”;
// –></script>

<script type=”text/javascript” src=”greybox/AJS.js”></script>

<script type=”text/javascript” src=”greybox/AJS_fx.js”></script>

<script type=”text/javascript” src=”greybox/gb_scripts.js”></script>
————————————————–

スタイルシートファイルも読み込ませる必要があるので、greyboxフォルダ内にあるgb_styles.cssの読み込む。
—————————————————
<link rel=”stylesheet” href=”greybox/gb_styles.css” type=”text/css” media=”all”>
—————————————————

これで準備完了。

後は表示させていページを<a>タグのrel属性にrel=”gb_page[横幅, 縦幅]”を指定する。
横幅と縦幅はページ内に表示されるウィンドウの幅をピクセル値である。
———————————————-
<a href=”http://kumao.net/” title=”kumaoの押入” rel=”gb_page[480,360]”>〜</a>
———————————————-

上記の場合ウィンドウは上部に表示されるが、ウィンドウの中央に表示させることもできる。
この場合は<a>タグのrel属性にgbpagecenter[横幅, 縦幅]を指定しする。
———————————————–
<a href=”http://kumao.net/” title=”kumaoの押入” rel=”gb_page_center[480,360]”>〜</a>
———————————————–

また、指定したサイズではなく、ウィンドウサイズに合わせて最大で表示することもでる。この場合は<a>タグのrel属性にgbpagefs[]を指定する。
そして、ウィンドウをリサイズした場合でも自動的に最大になるように調整が行われます。
———————————————–
<a href=”http://kumao.net/” title=”kumaoの押入” rel=”gb_page_fs[]”>〜</a>
———————————————–

そして、ウィンドウに表示されるページをグループ化して扱うこともできる。この場合は<a>タグのrel属性にgb_pageset[グループ名]を指定する。
グループ名は任意の文字列を指定し、複数の異なるグループ名を指定した場合、それぞれ別のグループとして処理される。
————————————————
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=Shift_JIS”>
<title>Sample</title>
<link rel=”stylesheet” href=”greybox/gb_styles.css” type=”text/css” media=”all”>
<script type=”text/javascript”><!–
var GB_ROOT_DIR = “./greybox/”;
// –></script>
<script type=”text/javascript” src=”greybox/AJS.js”></script>
<script type=”text/javascript” src=”greybox/AJS_fx.js”></script>
<script type=”text/javascript” src=”greybox/gb_scripts.js”></script>
</head>
<body>
<h1>GreyBox グループ表示サンプル</h1>
<ul>
<li><a href=”http://kumao.net/” title=”kumaoの押入” rel=”gb_pageset[favPage]”>kumaoの押入のページ表示</a>
</li>
<li><a href=”http://www.ayumi.cn/” title=”アユゴンの部屋” rel=”gb_pageset[favPage]”>アユゴンの部屋のページ表示</a>
</li>
<li><a href=”http://blackwidow.bgrp.jp/” title=”マリネルス峡谷の対決” rel=”gb_pageset[favPage]”>マリネルス峡谷の対決のページ表示</a>
</li>
<li><a href=”http://kmp.bgrp.jp/” title=”KINUGASA MOTION PICTURES” rel=”gb_pageset[favPage]”>KINUGASA MOTION PICTURESのページ表示</a>
</li>
</ul>
<h1>GreyBox 上部表示サンプル</h1>
<ul>
<li>
<a href=”http://kumao.net/” title=”kumaoの押入” rel=”gb_page[480,360]”>kumaoの押入(上部表示)</a>
</li>
</ul>
<h1>GreyBox 中央表示サンプル</h1>
<ul>
<li>
<a href=”http://kumao.net/” title=”kumaoの押入” rel=”gb_page_center[480,360]”>kumaoの押入(中央表示)</a>
</li>
</ul>
<h1>GreyBox 最大表示サンプル</h1>
<ul>
<li>
<a href=”http://kumao.net/” title=”kumaoの押入” rel=”gb_page_fs[]”>kumaoの押入(最大表示)</a>
</li>
</ul>
</body>
</html>
——————————————————

GreyBoxは必要なファイルが greyboxフォルダにまとめられているため、他のプログラムファイルやスタイルシートファイル名と干渉しないのでよい。
次回は画像表示も試してみたい。


KUMAOの押入TOP

  • 累積 666530
  • 本日 105
  • 昨日 117
  • 累積PV 2134733
  • 本日のPV 134
  • 昨日のPV 143
  • 現在の閲覧 0

カレンダー

2019年11月
« 8月    
 123
45678910
11121314151617
18192021222324
252627282930  

カテゴリー

最近のコメント

アーカイブ

年間アーカイブ

Twitter

Get Adobe Flash player