jQuery pluginその他のプラグイン
- crop〔画像の切り出し〕
- Displaying source code with Ajax〔外部ファイルの内容を読み込んで行番号付き表示〕
- Drag to Shares〔現在閲覧中のページを画像のドラッグ＆ドロップで共有サイトへ投稿〕
- equalHeights.js〔要素の高さを揃えるライブラリ〕
- Exactly Twitter like Follow and Remove buttons with jQuery and Ajax 〔Twitter風のフォロー＆削除ボタン〕
- Flip! A jQuery plugin〔ブロック要素を上下左右方向に回転して切り替えるライブラリ〕
- highlight: JavaScript text higlighting jQuery plugin〔指定したテキストをハイライト表示〕
- hoverIntent jQuery Plug-in〔ホバー処理〕
- Internal Links with Favicon using jQuery〔内部リンクにファビコン表示〕
- jFootnotes〔インラインコンテンツに基づいて脚注を生成〕
- jqPuzzle - Cusomizable Sliding Puzzles with jQuery〔1枚の画像からパズルを作成〕
- jQuery jTagging plugin 〔タグの入力を簡単にする 〕
- jQuery Keypad〔ポップアップするキーボード〕
- jQuery PhotoShoot Plugin〔写真撮影をしているように指定範囲の画像を切り出し〕
- jQuery Plugin FlyDOM〔動的コンテンツをすばやく簡単に作成〕
- jQuery Spoilers plugin〔マッチした要素の内容をを指定した要素でラップ 〕
- jquery.autoscale.js〔ウィンドウサイズに合わせて画像をリサイズ〕
- jquery.biggerlink〔指定した要素全体をリンク可能な領域にする〕
- Link Wrapper - jQuery plugin for long URL〔長いURLを折り返す〕
- Making an Expanding Code Box〔コードボックスからテキストがあふれる場合に広げて表示〕
- Smart Columns w/ CSS & jQuery〔ウィンドウサイズに合わせてカラムを整列〕
- Text Resizing With jQuery〔テキストのリサイズ〕
- The jQuery Feed Menu〔ページのメタ情報からフィード情報を取得してフィード一メニューをアイコン表示〕
- Unobtrusive IFrame with jQuery〔リンクをインラインフレームに変換〕
- ロールオーバー〔ロールオーバー〕
- 指定した要素だけを印刷
crop
画像の切り出し
unknown
jQuery plugin: Crop
jquery.js／jquery.crop.js
画像を指定したサイズに切り取るjQueryプラグイン。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery plugin : Crop | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.crop.js"></script>
<script type="text/javascript">
$(function() {
$('#crop').submit(function() {
var t = this;
$(this).trigger('reset'); // fiddle to reset the image for the demo
var img = $('img');
img.crop({ height: t.height.value, width: t.width.value })
return false;
}).bind('reset', function() {
var img = $('img');
var resetImg = document.createElement('img');
resetImg.src = 'http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png';
resetImg.height = '240';
resetImg.width = '320';
resetImg.alt = resetImg.title = "クリスピー・クリーム・ドーナツ";
img[0].parentNode.replaceChild(resetImg, img[0]);
});
});
</script>
<!-- CSS -->
<style type="text/css">
textarea { width:80%;}
fieldset { border:1px solid #ccc; padding:1em; margin:0 0 20px 0; }
legend { color:#ccc; font-size:120%; }
input, textarea { font-size:125%; padding:7px; border:1px solid #999; }
label { font-weight:bold; display:block; margin-top:10px; }
img { margin:5px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/'>jQuery plugin: Crop</a> | 設置サンプル</h1>
<!-- CODE -->
<form action="" id="crop">
<fieldset>
<legend>Crop Control</legend>
<input type="submit" name="crop" value="Crop Image" />
<input type="reset" name="reset" value="Reset Image" id="reset" />
<label for="height">Height: </label><input type="text" name="height" value="200" id="height" /> px
<label for="width">Width: </label><input type="text" name="width" value="200" id="width" /> px
</fieldset>
<div class="clear"></div>
</form>
<a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" width="320" height="240" alt="クリスピー・クリーム・ドーナツ" /></a>
<!-- / CODE -->
</div>
</body>
</html>
Displaying source code with Ajax
外部ファイルの内容を読み込んで行番号付き表示
2009/4/11
Displaying source code with Ajax
jquery.js v1.2.2+、ajaxcodedisplay-src-commented.js
外部ファイルの内容を読み込んで行番号付き表示するjQueryプラグイン。
下記のように、a要素のクラス名にcodeexampleを指定すると、a要素のhref属性に指定したファイルの内容を読み込んで表示します。 ソースコードの表示などに便利です。
<a href='ordered.html'
class='codeexample'>
ordered.html</a>
指定した行番号の内容だけを表示するには、下記のようにlinesクラスに表示する行番号の範囲を指定します。
<a href='ordered.html'
class='codeexample lines[1,5,9-14,18-19]'>
ordered.html</a>
指定した行をハイライト表示するには、下記のようにhighlightクラスには依頼と表示する行番号の範囲を指定します。
<a href='ordered.html' class='codeexample lines[10-15] highlight[10,12,14-15]'> ordered.html (lines 10 to 15)<dodisplayクラスを指定すると、リンクをクリックした時に、インラインフレーム（iframe）を生成してプレビュー表示することもできます。
ordered.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Example of an ordered menu</title> </head> <body> <ol id="mainmenu"> <li><a href="index.html">Introduction</a></li> <li><a href="setup.html">Setting up your workspace</a></li> <li><a href="software.html">Software</a></li> <li><a href="files.html">File Resources</a></li> <li><a href="printers.html">Printers</a></li> <li><a href="methodology.html">Work Methodology</a></li> </ol> </body> </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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>Displaying source code with Ajax | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/ajaxcodedisplay-src-commented.js"></script> <script type="text/javascript"> $(function() { }); </script> </head> <body> <div id="wrap"> <h1><a href='http://icant.co.uk/sandbox/ajax-code-display/'>Displaying source code with Ajax</a> | 設置サンプル</h1> <!-- CODE --> <h2>デフォルト</h2> <p><a href="include/ajax/jquery_plugin_other/ordered.html" class="codeexample">ordered.html</a></p> <h2>指定した行番号の範囲だけ表示</h2> <p><a href="include/ajax/jquery_plugin_other/ordered.html" class="codeexample lines[1,5,9-14,18-19]">ordered.html (lines 1, 5, 9 to 14 and 18 to 19)</a></p> <p><a href="include/ajax/jquery_plugin_other/ordered.html" class="codeexample lines[10-15]">ordered.html (lines 10 to 15)</a></p> <p><a href="include/ajax/jquery_plugin_other/ordered.html" class="codeexample lines[5,8,9]">ordered.html (lines 5, 8 and 9)</a></p> <h2>指定した行番号の範囲をハイライト表示</h2> <p><a href="include/ajax/jquery_plugin_other/ordered.html" class="codeexample lines[10-15] highlight[10,12,14-15]">ordered.html (lines 10 to 15)</a></p> <h2>リンクをクリックすると、iframe内にファイルの内容をプレビュー表示</h2> <p><a href="include/ajax/jquery_plugin_other/ordered.html" class="codeexample dodisplay highlight[10,12,14-15]">ordered.html (click to show output)</a></p> <!-- / CODE --> </div> </body> </html>
Drag to Shares
現在閲覧中のページを画像のドラッグ＆ドロップで共有サイトへ投稿
2009/12/13
Drag to Share - Nettuts+
現在閲覧中のWebページを、Twitter、Delicious、Facebookなどの共有サイトに、画像のドラッグ＆ドロップで投稿可能なjQueryプラグイン。 画像のドラッグ＆ドロップを実装するのに、jQuery UIが使用されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/drag-to-share/js/jquery-ui-1.7.2.custom.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/drag-to-share/ui-lightness/jquery-ui-1.7.2.custom.css" />
<style type="text/css">
#content { width:440px; }
#content img { float:right; margin-left:20px; }
.ui-draggable { cursor:move; }
#tip { position:absolute; display:none; height:25px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }
#tip .arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }
#targets { display:none; list-style-type:none; position:absolute; top:10px; z-index:99999; }
#targets li { float:left; margin-right:20px; display:block; width:60px; height:60px; background:url("/content/lib/jquery/drag-to-share/iconSprite.png") no-repeat 0 0; position:relative; }
#targets li#delicious { background-position:0 -60px; }
#targets li#facebook { background-position:0 -120px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#fff; }
#overlay { background-color:#000; position:absolute; top:0; left:0; width:100%; height:100%; z-index:99997; }
#helper { background-color:#c2c2c2; position:absolute; height:35px; padding:15px 70px 0 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:18px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:3px solid #7d7d7d; }
#thumb { width:50px; height:50px; position:absolute; right:0; top:0; border-left:3px solid #7d7d7d; }
.share { font-weight:bold; position:absolute; font-size:14px; font-family:Verdana; margin-left:-38px; }
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://net.tutsplus.com/tutorials/javascript-ajax/drag-to-share/'>Drag to Share - Nettuts+</a></p>
<!-- CODE -->
<div id="content">
<p>画像をドラッグすると、共有ボタンが表示されます。例えば、Tweetボタンにドロップすると、Twitterに現在のページを投稿できます。</p>
<img src="/content/lib/jquery/drag-to-share/pjr.jpg" alt="PHP & JavaScript Room">
<p>「PHP & JavaScript Room」は、PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画のストリーム配信方法など、Webサイト制作に役立つ実用的なプログラミング・テクニックを解説しています。</p>
</div>
<ul id="targets">
<li id="twitter"><a href="http://twitter.com"><!-- --></a></li>
<li id="delicious"><a href="http://delicious.com"><!-- --></a></li>
<li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li>
</ul>
<div style="clear:both;"></div>
<script type="text/javascript">
$(function() {
//cache selector
var images = $("#content img"),
title = $("title").text() || document.title;
//make images draggable
images.draggable({
//create draggable helper
helper: function() {
return $("<div>").attr("id", "helper").html("<span>" + title + "</span><img id='thumb' src='" + $(this).attr("src") + "'>").appendTo("body");
},
cursor: "pointer",
cursorAt: { left: -10, top: 20 },
zIndex: 99999,
//show overlay and targets
start: function() {
$("<div>").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
$("#tip").remove();
$(this).unbind("mouseenter");
$("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
},
//remove targets and overlay
stop: function() {
$("#targets").slideUp();
$(".share", "#targets").remove();
$("#overlay").remove();
$(this).bind("mouseenter", createTip);
}
});
//make targets droppable
$("#targets li").droppable({
tolerance: "pointer",
//show info when over target
over: function() {
$(".share", "#targets").remove();
$("<span>").addClass("share").text("Share on " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
},
drop: function() {
var id = $(this).attr("id"),
currentUrl = window.location.href,
baseUrl = $(this).find("a").attr("href");
if (id.indexOf("twitter") != -1) {
window.location.href = baseUrl + "/home?status=" + title + ": " + currentUrl;
} else if (id.indexOf("delicious") != -1) {
window.location.href = baseUrl + "/save?url=" + currentUrl + "&title=" + title;
} else if (id.indexOf("facebook") != -1) {
window.location.href = baseUrl + "/sharer.php?u=" + currentUrl + "&t=" + title;
}
}
});
var createTip = function(e) {
//create tool tip if it doesn't exist
($("#tip").length === 0) ? $("<div>").html("<span>Drag this image to share the page<\/span><span class='arrow'><\/span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null;
};
images.bind("mouseenter", createTip);
images.mousemove(function(e) {
//move tooltip
$("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
});
images.mouseleave(function() {
//remove tooltip
$("#tip").remove();
});
});
</script>
<!-- / CODE -->
</div>
</body>
</html>
equalHeights.js
要素の高さを揃えるライブラリ
unknown
Setting Equal Heights with jQuery
jquery.js／jQuery.equalHeights.js
jquery.js／jQuery.equalHeights.js
水平方向に並んだブロック要素を、一番高さの高い要素の高さに合わせて表示するJSライブラリです。 要素の高さは、要素の内容量によって左右されますが、このライブラリを使えば、内容量を気にせずにきれいに表示させることが出来ます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Setting Equal Heights with jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jQuery.equalHeights.js"></script>
<script type="text/javascript">
$(function(){ $('#equalize').equalHeights(); });
</script>
<!-- CSS -->
<style type="text/css">
body{ margin:20px; padding:0; font:12px/1.5 verdana,sans-seif; }
h1 { font-size:150%; }
h2 { font-size:120%; }
/* equalHeights */
.container { width:100%; padding:0 0 2em; }
.box { float:left; width:24%; margin-right:1%; background-color:#c9efbe; }
.box p { margin:.5em; padding:0; }
.containWidth {width: 480px;}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.filamentgroup.com/examples/equalHeights/'>Setting Equal Heights with jQuery</a> | 設置サンプル</h1>
<!-- CODE -->
<div class="containWidth">
<h2>通常の表示</h2>
<div class="cf">
<div class="container">
<div class="box"><p>クリスピー・クリーム・ドーナツ</p></div>
<div class="box"><p>新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。</p></div>
<div class="box"><p>ドーナツの箱がピザの箱みたいで、味もアメリカン！ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。</p></div>
<div class="box"><p>生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもｗ</p></div>
</div>
</div>
<h2>equalHeights.jsで高さを揃えて表示</h2>
<div class="cf">
<div class="container" id="equalize">
<div class="box"><p>クリスピー・クリーム・ドーナツ</p></div>
<div class="box"><p>新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん。</p></div>
<div class="box"><p>ドーナツの箱がピザの箱みたいで、味もアメリカン！ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。</p></div>
<div class="box"><p>生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもｗ</p></div>
</div>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
Exactly Twitter like Follow and Remove buttons with jQuery and Ajax
Twitter風のフォロー＆削除ボタン
2009/7/11
Exactly Twitter like Follow and Remove buttons with jQuery and Ajax
jquery.js
Twitterのように、各レコードのステータス（フォロー／削除）をボタンクリック（フェードイン・フェードアウト効果あり）で変更する方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Exactly Twitter like Follow and Remove buttons with jQuery and Ajax | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".follow").click(
function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "ajaxfollow.tix",
data: info,
success: function(){}
});
$("#follow"+I).fadeOut(200).hide();
$("#remove"+I).fadeIn(200).show();
return false;
});
$(".remove").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "ajaxfollow.tix",
data: info,
success: function(){}
});
$("#remove"+I).fadeOut(200).hide();
$("#follow"+I).fadeIn(200).show();
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
a {
text-decoration:none;
}
table {
width:455px;
border:0;
border-collapse:collapse;
border-spacing:0;
background-color:#fff;
}
th,
td {
padding:10px;
}
td.icon {
width:32px;
border-bottom:1px dashed #ccc;
}
.content {
border-bottom:1px dashed #ccc;
background-color:#fff;
}
.follow_b {
border:#dedede solid 2px;
background-color:#f5f5f5;
color:#000;
font-size:12px;
font-weight:bold;
padding-left:4px ;
padding-right:4px ;
-moz-border-radius: 6px; -webkit-border-radius: 6px;
}
.youfollowing_b {
font-size:10px; color:#006600; font-weight:bold;
}
.remove_b {
border:#dedede solid 2px;
background-color:#f5f5f5;
color:#CC3333;
font-size:12px;
padding-left:4px ;
padding-right:4px ;
font-weight:bold;
margin-left:280px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://9lessons.blogspot.com/2009/04/exactly-twitter-like-follow-and-remove.html'>Exactly Twitter like Follow and Remove buttons with jQuery and Ajax</a> | 設置サンプル</h1>
<!-- CODE -->
<table>
<tr class="record">
<td class="icon"><img src="/content/img/picon/twitter.png" width="32" height="32" /></td>
<td class="content">
<strong>User A</strong>
<div id="follow1"><a href="#" class="follow" id="1"><span class="follow_b">フォローする</span></a></div>
<div id="remove1" style="display:none">
<span class="youfollowing_b">フォロー中</span>
<a href="" class="remove" id="1"><span class="remove_b">削除</span></a>
</div>
</td>
</tr>
<tr class="record">
<td class="icon"><img src="/content/img/picon/twitter.png" width="32" height="32" /></td>
<td class="content">
<strong>User B</strong>
<div id="follow2"><a href="#" class="follow" id="2"><span class="follow_b">フォローする</span></a></div>
<div id="remove2" style="display:none">
<span class="youfollowing_b">フォロー中</span>
<a href="" class="remove" id="2"><span class="remove_b">削除</span></a>
</div>
</td>
</tr>
<tr class="record">
<td class="icon"><img src="/content/img/picon/twitter.png" width="32" height="32" /></td>
<td class="content">
<strong>User C</strong>
<div id="follow3"><a href="#" class="follow" id="3"><span class="follow_b"> フォローする </span></a></div>
<div id="remove3" style="display:none">
<span class="youfollowing_b"> フォロー中 </span>
<a href="" class="remove" id="3"><span class="remove_b">削除</span></a>
</div>
</td>
</tr>
</table>
<!-- / CODE -->
</div>
</body>
</html>
Flip! A jQuery plugin
ブロック要素を上下左右方向に回転して切り替えるライブラリ
unknown
Flip!0.4 - A jQuery plugin
Firefox 2+、IE 6+、Windows Safari 3.1、Google Chrome
jquery.js、jquery-ui-personalized-1.6rc2.packed.js、jquery.flip.js
ブロック要素をパネルのように上下左右方向に回転させて切り替え表示するjQueryプラグイン。 ブロック要素内に表示するコンテンツ、回転速度や方向、背景色などはオプションで指定可能です。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Setting Equal Heights with jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery-ui-personalized-1.6rc2.packed.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.flip.js"></script>
<script type="text/javascript">
$(function(){
$("#flipBT").click(function(){
$("#flipBox").flip({
direction: 'bt',
color: '#D46419',
speed: 400,
content: "<div class='demo_one'>Krispy Kreme Doughnuts!!</div>"
});
});
$("#flipTB").click(function(){
$("#flipBox").flip({
direction: 'tb',
color: '#B34212',
speed: 600,
content: "<div class='demo_two'>くまさんケーキ</div>"
});
});
$("#flipLR").click(function(){
$("#flipBox").flip({
direction: 'lr',
color: '#341405',
content: "<div class='demo_three'>CAFE EAT@代官山</div>"
});
});
$("#flipRL").click(function(){
$("#flipBox").flip({
direction: 'rl',
color: '#166665',
speed: 550,
content: "<div class='demo_four'>銀座GINTO<br>Birthday Cake!</div>"
});
});
});
</script>
<!-- CSS -->
<style type="text/css">
#flipBox {
width:320px;
height:240px;
margin:0 auto;
background-color:#000;
color:#fff;
font-weight:bold;
font-size:24px;
}
#flipBox > * {
padding:10px;
}
div#buttons {
width:320px;
margin:0 auto;
margin-top:25px;
}
#buttons a {
padding:5px 20px;
border-bottom:1px solid #000;
border-right:1px solid #000;
color:#fff;
background-color:#333;
text-decoration:none;
font-size:11px;
}
/* ** demo ** */
.demo_one {
background-image: url('http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png');
background-repeat: no-repeat;
background-position:0 0;
width: 100%;
height: 100%;
}
.demo_two {
background-image: url('http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png');
background-repeat: no-repeat;
background-position:0 0;
width: 100%;
height: 100%;
}
.demo_three {
background-image: url('http://farm4.static.flickr.com/3174/2973352946_3814779ceb_o.jpg');
background-repeat: no-repeat;
background-position:0 0;
width: 100%;
height: 100%;
}
.demo_four {
background-image: url('http://farm4.static.flickr.com/3288/2970998187_50bee2de0c_o.jpg');
background-repeat: no-repeat;
background-position:0 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://lab.smashup.it/flip/'>Flip!0.4 - A jQuery plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<div id="flipBox">
<div class="demo_one">Krispy Kreme Doughnuts!!</div>
</div>
<div id="buttons">
<a id="flipBT" href="#">下→上</a>
<a id="flipTB" href="#">上→下</a>
<a id="flipLR" href="#">左→右</a>
<a id="flipRL" href="#">右→左</a>
</div>
<!-- / CODE -->
</div>
</body>
</html>
highlight: JavaScript text higlighting jQuery plugin
指定したテキストをハイライト表示
2009/2/15
highlight: JavaScript text higlighting jQuery plugin
jquery.js／jquery.highlight-2.js
指定したテキストをハイライト表示するjQueryプラグイン。
ハイライト表示を有効にする要素のID属性に「highlight-plugin」を指定します。
指定するテキストには、日本語も使えます。アルファベットを指定する場合は、大文字で指定します。
アルファベットの大文字小文字を区別しない場合は、$.highlight(this, 'BLA');のように、第2引数に「BLA」を指定します。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>highlight: JavaScript text higlighting jQuery plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.highlight-2.js"></script>
<script type="text/javascript">
$(function() {
$('li').each(function() { $.highlight(this, 'BLA'); });
});
</script>
<!-- CSS -->
<style type="text/css">
.highlight { background-color:yellow; font-weight:bold; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html'>highlight: JavaScript text higlighting jQuery plugin</a> | 設置サンプル</h1>
<p>▼クリックした単語をハイライト表示します。</p>
<!-- CODE -->
<ul>
<li><a href="javascript:void($('#highlight-plugin').removeHighlight().each(function() { $.highlight(this, 'HTML')}))">HTML</a></li>
<li><a href="javascript:void($('#highlight-plugin').removeHighlight().each(function() { $.highlight(this, 'AJAX')}))">Ajax</a></li>
<li><a href="javascript:void($('#highlight-plugin').removeHighlight().each(function() { $.highlight(this, '動的')}))">動的</a></li>
</ul>
<p>
<a href="javascript:void($('#highlight-plugin').removeHighlight());">ハイライト表示を解除する</a>
</p>
<blockquote id="highlight-plugin">
<p>従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取り画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる。例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していくといったことが可能になる。</p>
<p>Webブラウザのみで動作する（別途プラグインを要求しない）、既存の技術の組み合わせであることが特徴。技術自体はこの用語が発生する前から存在していたが、Ajaxという名前が付けられたこと、GoogleがGoogle マップやGoogle サジェストにこの技術を利用したことで有名になり、Webアプリケーションの可能性を広げるものとして注目され始めた。さらに、Googleでは、デスクトップアプリケーションと遜色のない電子メールクライアントであるGmailやGoogle Calendarでも積極的にAjaxを採用し、Ajaxの実用性がGoogleのWebアプリケーションを通じて世間に認知されはじめている。</p>
<p>AjaxによるWebプログラミング（Webアプリケーション製作）が注目されだした背景には、この従来のページ遷移のみに頼ったWebの使い勝手の悪さに対する不満や、XML、DOMなどのWeb関連技術の標準化（ウェブ標準）、および高い機能を持ったWebブラウザの普及などが挙げられる。</p>
<p>また、ダウンロード型アプリケーションは、マニア層から先に広がりにくい、競合がOSメーカーとなったときに競争に負けてしまう、といった問題を抱えているため、ダウンロード型アプリケーションからWebアプリケーションに切り替える技術として、Ajaxが利用されている。</p>
<p>DHTMLが登場した当時は、単にお遊び要素に過ぎないと考えられていた動的ページだが、JavaScriptをより効果的に使うことで、業務や実用に耐える優秀なインターフェースを備えたアプリケーションをHTMLで作ることが可能であったという事実を世の中に知らしめたという意義をもつ技術である。</p>
<cite>出典: フリー百科事典『ウィキペディア（Wikipedia）』</cite>
</blockquote>
<!-- CODE / -->
</div>
</body>
</html>
hoverIntent jQuery Plug-in
ホバー処理
2009/3/1
hoverIntent jQuery Plug-in
マウスの動作だけでクリスタルボールのようにユーザーの意図を決定できるjQueruプラグイン。
jQueryのhoverイベントのように動作しますが、すぐにonMouseOver関数を呼ばずに、ユーザーのマウスが十分を減速するのを待ってからonMouseOverを呼び出します。 オプションでタイムアウト時間、ポーリング間隔などをカスタマイズすることができます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Spoilers plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.hoverIntent.js"></script>
<script type="text/javascript">
$(function(){
$("#demo1 li").hover(makeTall,makeShort);
$("#demo2 li").hoverIntent(makeTall,makeShort);
$("#demo3 li").hoverIntent({
sensitivity: 3,
interval: 200,
over: makeTall,
timeout: 500,
out: makeShort
});
});
function makeTall(){ $(this).animate({"height":75},200);}
function makeShort(){ $(this).animate({"height":50},200);}
</script>
<!-- CSS -->
<style type="text/css">
#demo { width:600px; }
ul.demo {display:block; width:100%; height:75px; padding:0; margin:0; background:#9cc; list-style-type:none;}
ul.demo li {background:#fcc; display:block; width:25%; height:50px; padding:0; margin:0; float: left; position:relative; overflow:hidden; cursor:default; font-size:0.9em; line-height:1.1em; text-align:center;}
ul.demo li.p2 {background:#ffc;}
ul.demo li.p3 {background:#cfc;}
ul.demo li.p4 {background:#ccf;}
ul.demo li span { display:block; margin:4px; background:#eef; cursor:default;}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://cherne.net/brian/resources/jquery.hoverIntent.html'>hoverIntent jQuery Plug-in</a> | 設置サンプル</h1>
<!-- CODE -->
<div id="demo">
<h2>jQueryのhoverイベントの場合</h2>
<pre>$("#demo1 li").hover(makeTall, makeShort)</pre>
<ul class="demo" id="demo1">
<li class="p1">マウスオーバーしてください</li>
<li class="p2">マウスオーバーしてください</li>
<li class="p3">マウスオーバーしてください</li>
<li class="p4"><span>hover ignores over/out events from children</span></li>
</ul>
<h2>hoverイベントをhoverIntentで置換した場合</h2>
<pre>$("#demo2 li").hoverIntent(makeTall, makeShort)</pre>
<ul class="demo" id="demo2">
<li class="p1">マウスオーバーしてください</li>
<li class="p2">マウスオーバーしてください</li>
<li class="p3">マウスオーバーしてください</li>
<li class="p4"><span>hoverIntent also ignores over/out events from children</span></li>
</ul>
<h2>hoverイベントをhoverIntentで置換した場合（オプション指定）</h2>
<pre>var config = {
sensitivity: 3, <span class='green'>// number = sensitivity threshold (must be 1 or higher)</span>
interval: 200, <span class='green'>// number = milliseconds for onMouseOver polling interval</span>
over: makeTall, <span class='green'>// function = onMouseOver callback (必須)</span>
timeout: 500, <span class='green'>// number = milliseconds delay before onMouseOut</span>
out: makeShort <span class='green'>// function = onMouseOut callback (必須)</span>
};
$("#demo3 li").hoverIntent(config);</pre>
<ul class="demo" id="demo3">
<li class="p1">マウスオーバーしてください</li>
<li class="p2">マウスオーバーしてください</li>
<li class="p3">マウスオーバーしてください</li>
<li class="p4">マウスオーバーしてください</li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
Internal Links with Favicon using jQuery
内部リンクにファビコン表示
2009/3/28
Internal Links with Favicon using jQuery
現在のURLからホスト名を取得し、a要素のhref属性の値がその「http://」＋ホスト名で始まるリンクに、そのドメイン直下にあるファビコン（favicon.ico）を表示するjQueryプラグイン。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Internal Links with Favicon using jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.internalfavlinks.js"></script>
<script type="text/javascript">
$(function() {
$().internalFavLinks();
});
</script>
<!-- CSS -->
<style type="text/css">
ul li a { text-decoration:none; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.thatagency.com/design-studio-blog/2009/03/internal-links-with-favicon-using-jquery/'>Internal Links with Favicon using jQuery</a> | 設置サンプル</h1>
<p>▼内部リンクにファビコンを表示します。</p>
<!-- CODE -->
<ul>
<li><a href="http://phpjavascriptroom.com/">That Agency</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
<li><a href="http://www.Yahoo.com">YAHOO</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
<li><a href="http://phpjavascriptroom.com/">Contact THAT</a></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
jFootnotes
インラインコンテンツに基づいて脚注を生成
2009/3/10
jFootnotes
jquery.js、jquery.footnotes.js
インラインコンテンツに基づいて脚注を作成してフォーマットするjQueryプラグイン。
デフォルトで、「footnoteクラスを持つspan要素」と「blockquote要素のtitle属性」が脚注に変換されます。
$('.example').footnotes();のように、脚注を付ける要素を持つ親要素にマッチする条件を指定します。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jFootnotes | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.footnotes.js"></script>
<script type="text/javascript">
$(function(){
$(".example").footnotes();
})
</script>
<!-- CSS -->
<style type="text/css">
blockquote { position:relative; width:500px; }
blockquote sup { position:absolute; right:5px; top:5px; }
ol.footnotesList li { font-size:11px; }
ol.footnotesList li sup { margin-right:10px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.planetholt.com/articles/jQuery-Footnotes'>jFootnotes</a> | 設置サンプル</h1>
<!-- CODE -->
<div class="example">
<p>
Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称です<span class="footnote"><a href="http://ja.wikipedia.org/wiki/Ajax">（Ajax | 出典: フリー百科事典『ウィキペディア（Wikipedia）』</a>)</span>.
</p>
<blockquote title="Ajax | 出典: フリー百科事典『ウィキペディア（Wikipedia）』">
<p>
Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。
XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
</p>
</blockquote>
<ol id="autoFootnotes0" class="footnotesList"></ol>
</div>
<!-- / CODE -->
</body>
</html>
jqPuzzle - Cusomizable Sliding Puzzles with jQuery
1枚の画像からパズルを作成
unknown
jqPuzzle - Cusomizable Sliding Puzzles with jQuery
1枚の画像からパズルを簡単に作成できるjQueryプラグイン。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery: jqPuzzle | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jqpuzzle.min.js"></script>
<script type="text/javascript">
$(function(){
$('.sample').jqShuffle();
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery.jqpuzzle.css" />
<style type="text/css">
.sample { margin:0 auto; padding:0; text-align:center; list-style:none; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.2meter3.de/jqPuzzle/'>jqPuzzle - Cusomizable Sliding Puzzles with jQuery</a> | 設置サンプル</h1>
<!-- CODE -->
<img id="heli" src="/content/img/pic1.png" alt="Isla Tabarca, Spain" class="jqPuzzle" />
<!-- / CODE -->
</div>
</body>
</html>
jQuery jTagging plugin
タグの入力を簡単にする
2009/2/28
jQuery Plugin -- jTagging
タグの入力を簡単にする軽量のjQuery plugin。
キーワードリンクをクリックすると指定した区切り文字（空白またはカンマなど）で、クリックしたキーワードを連結して1つの文字列にし、テキスト入力欄に表示します。 クリックしたキーワードはハイライト表示されます。 再度クリックすると、連結した文字列から、そのキーワードを削除することができます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Plugin -- jTagging | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jQuery.jTagging.js"></script>
<script type="text/javascript">
$(function() {
$("#TagText1").jTagging($("#TagDiv1"), ",");
var tagDivList = new Array($("#TagDiv3"), $("#TagDiv4"));
var normalClass = { padding: "2px 1px 0 1px", textDecoration: "underline", color: "#f00", backgroundColor: "" };
var selectedClass = { padding: "2px 1px 0 1px", textDecoration: "underline", color: "#fff", backgroundColor: "#f00" };
var normalHoverClass = { padding: "2px 1px 0 1px", textDecoration: "none", color: "#fff", backgroundColor: "#00f" };
$("#TagText2").jTagging(tagDivList, " ", normalClass, selectedClass, normalHoverClass);
});
</script>
<!-- CSS -->
<style type="text/css">
div.box { border:1px solid #5ab500;margin:5px;padding:10px;background-color:#e6f7d4; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.alcoholwang.cn/jquery/jTagging.htm'>jQuery Plugin -- jTagging</a> | 設置サンプル</h1>
<p>▼キーワードリンクをクリックすると、テキスト入力欄に、空白またはカンマ区切りでクリックしたキーワードを連結させます。</p>
<!-- CODE -->
<h2>例1</h2>
<p>your tags: <input id="TagText1" size="65"> カンマ区切り</p>
<div id="TagDiv1" class="box"><a href="#" onclick="return false;">javascript</a> <a href="#" onclick="return false;">jquery</a> <a href="#" onclick="return false;">tag</a> <a href="#" onclick="return false;">cool</a></div>
<h2>例2</h2>
<p>website: <input type="text" id="TagText2" size="65" value="dianping"/> 空白区切り</p>
<div id="TagDiv3" class="box"><a href="#" onclick="return false;">Google</a> <a href="#" onclick="return false;">Yahoo</a> <a href="#" onclick="return false;">MSN</a></div>
<div id="TagDiv4" class="box"><a href="#" onclick="return false;">yelp</a> <a href="#" onclick="return false;">judysbook</a> <a href="#" onclick="return false;">dianping</a> <a href="#" onclick="return false;">Zagat</a></div>
<!-- CODE / -->
</div>
</body>
</html>
jQuery Keypad
ポップアップするキーボード
2009/7/11
jQuery Keypad
テキストフィールドへの入力をポップアップキーボードから行えるようにするjQueryプラグイン。
テキストフィールドをクリックすると、キーボードがポップアップされ、クリックしたキーがテキストフィールドに入力されます。 入力内容のクリアや戻す機能もついています。 キーボードの配列をランダムにしたり、キーボード表示のスタイルをCSSでカスタマイズすることもできます。 ギリシャ文字やシンボルマーク、数学記号などの特殊文字をユーザーに入力してもらう必要がある場合などに役立ちそうです。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Keypad | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery_keypad/jquery.keypad.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery_keypad/jquery.keypad.css" />
</head>
<body>
<div id="wrap">
<h1><a href='http://keith-wood.name/keypad.html'>jQuery Keypad</a> | 設置サンプル</h1>
<p>▼テキストフィールドをクリックすると、キーボードがポップアウトします。</p>
<!-- CODE -->
<h1>Basic</h1>
<p>
<input type="text" id="defaultKeypad" />
<button type="button" id="viewKeypad">View</button>
<button type="button" id="removeKeypad">Remove</button>
</p>
<script type="text/javascript">
$(function() {
$('#defaultKeypad').keypad();
$('#viewKeypad').click(function() {
alert('現在の入力値: ' + $('#defaultKeypad').val());
});
$('#removeKeypad').toggle(function() {
$(this).text('Re-attach');
$('#defaultKeypad').keypad('destroy');
},
function() {
$(this).text('Remove');
$('#defaultKeypad').keypad();
}
);
});
</script>
<h2>Qwerty keypad</h2>
<p><input type="text" id="qwertyKeypad" /></p>
<script type="text/javascript">
$(function(){
var qwertyLayout = [
$.keypad.qwertyAlphabetic[0] + $.keypad.CLOSE,
$.keypad.HALF_SPACE + $.keypad.qwertyAlphabetic[1] +
$.keypad.HALF_SPACE + $.keypad.CLEAR,
$.keypad.SPACE + $.keypad.qwertyAlphabetic[2] +
$.keypad.SHIFT + $.keypad.BACK
];
$('#qwertyKeypad').keypad({keypadOnly: false, layout: qwertyLayout});
});
</script>
<h2>数値キーボード</h2>
<p> <input type="text" id="alphaKeypad" /></p>
<script type="text/javascript">
$(function(){
$('#alphaKeypad').keypad({
keypadOnly: false,
layout: [
'abcdefghij' + $.keypad.CLOSE, 'klmnopqrst' + $.keypad.CLEAR,
'uvwxyz' + $.keypad.SPACE + $.keypad.SPACE + $.keypad.SHIFT + $.keypad.BACK
]
});
});
</script>
<h2>フルキーボード</h2>
<p><input type="text" id="fullKeypad" /></p>
<script type="text/javascript">
$(function(){
$('#fullKeypad').keypad({
keypadOnly: false,
layout: $.keypad.qwertyLayout
});
});
</script>
<h2>特殊文字</h2>
<h3>ギリシャ文字</h3>
<p><input type="text" id="greekKeypad" /></p>
<script type="text/javascript">
$(function(){
$('#greekKeypad').keypad({keypadOnly: false,
layout: ['αβγδεζ', 'ηθικλμ', 'νξοπρσ', 'τυφχψω'],
prompt: 'ギリシャ文字'
});
});
</script>
<h3>数学記号</h3>
<p><input type="text" id="mathKeypad" /></p>
<script type="text/javascript">
$(function(){
$('#mathKeypad').keypad({
keypadOnly: false,
layout: ['÷±√≠≤≥', '²³¼½¾∞'],
prompt: '数学記号'
});
});
</script>
<h3>その他のシンボル</h3>
<p><input type="text" id="otherKeypad" /></p>
<script type="text/javascript">
$(function(){
$('#otherKeypad').keypad({
keypadOnly: false,
layout: ['©®™℠', '€£¥¢'], prompt: 'Other symbols'
});
});
</script>
<!-- CODE / -->
</div>
</body>
</html>
jQuery PhotoShoot Plugin
写真撮影をしているように指定範囲の画像を切り出し
2010/2/10
jQuery PhotoShoot Plugin
［JS］jquery.js、jquery.photoShoot-1.0.js
［画像］viewfinder.png
［カーソル］blank.cur、blank_google_chrome.cur
［画像］viewfinder.png
［カーソル］blank.cur、blank_google_chrome.cur
カメラのファインダーを除いて写真を撮影するように、指定範囲の画像をクリック操作で切り出し表示するjQueryプラグイン。 CSSでオリジナルカーソルを指定しており、クリック時には画像にフラッシュ効果がつきます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Displaying source code with Ajax | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/photoShoot/jquery.photoShoot-1.0.js"></script>
<script type="text/javascript">
$(function() {
/* This code is executed after the DOM has been completely loaded */
// Assigning the jQuery object to a variable for speed:
var main = $('#main');
// Setting the width of the photoshoot area to
// 1024 px or the width of the document - whichever is smallest:
main.width(Math.min(1024,$(document).width()));
// Creating an array with four possible backgrounds and their sizes:
var pics = new Array(
{ url:'http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_b.jpg', size:{x:1024,y:576}},
{ url:'http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_b.jpg', size:{x:1024,y:576}},
{ url:'http://farm4.static.flickr.com/3394/3664935528_16fff63afc_b.jpg', size:{x:1024,y:576}}
);
// Choosing a random picture to be passed to the PhotoShoot jQuery plug-in:
var bg = pics[parseInt(Math.random()*3)];
// Creating an options object (try tweeking the variables):
var opts = {
image : bg.url,
onClick : shoot,
opacity : 0.8,
blurLevel : 4
}
// Converting the #main div to a photoShoot stage:
main.photoShoot(opts);
// Adding the album holder to the stage:
$('<div class="album">').html('<div class="slide" />').appendTo(main);
// Our own shoot function (it is passed as onClick to the options array above):
function shoot(position){
// This function is called by the plug-in when the button is pressed
// Setting the overlay's div to white will create the illusion of a camera flash:
main.find('.overlay').css('background-color','white');
// The flash will last for 100 milliseconds (a tenth of the second):
setTimeout(function(){main.find('.overlay').css('background-color','')},100);
// Creating a new shot image:
var newShot = $('<div class="shot">').width(150).height(100);
newShot.append( $('<img src="'+bg.url+'" width="'+(bg.size.x/2)+'" height="'+(bg.size.y/2)+'" />').css('margin',-position.top*0.5+'px 0 0 -'+position.left*0.5+'px') );
// Removing the fourth shot (the count starts from 0):
$('.shot').eq(3).remove();
// Adding the newly created shot to the album div, but moved 160px to the right.
// We start an animation to slide it in view:
newShot.css('margin-right',-160).prependTo('.album .slide').animate({marginRight:0},'slow');
}
});
</script>
<!-- CSS -->
<style type="text/css">
#main{
/* This div is converted to a photoShoot stage by the Photo Shoot plug-in */
margin:0;
width:1024px; height:576px;
position:relative;
overflow:hidden;
}
.shot{
/* These contain a scaled down version of the background image: */
border:3px solid #fcfcfc;
float:right;
position:relative;
margin-left:10px;
overflow:hidden;
/* Adding a CSS3 shadow below the shots: */
-moz-box-shadow:0 0 2px black;
-webkit-box-shadow:0 0 2px black;
box-shadow:0 0 2px black;
}
.shot img{
display:block;
}
.album{
/* This div holds the shots */
bottom:50px; right:20px;
overflow:hidden;
position:absolute;
width:490px; height:110px;
}
.album .slide {
/* The slide div is contained in album */
width:700px; height:110px;
position:relative;
left:-210px;
}
/* カーソル */
.container{
overflow:hidden;
cursor:url("/content/lib/jquery/photoShoot/blank.cur"),default;
position:relative;
}
.container.googleChrome{
cursor: url("/content/lib/jquery/photoShoot/blank_google_chrome.cur"),default;
}
.overlay{
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:black;
}
.viewFinder{
position:absolute;
top:0; left:0;
}
.blur{
position:absolute;
top:0; left:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://tutorialzine.com/2010/02/jquery-photoshoot-plugin/'>jQuery PhotoShoot Plugin</a></p>
<!-- CODE -->
<div id="main"></div>
<!-- / CODE -->
</div>
</body>
</html>
jQuery Plugin FlyDOM
動的コンテンツをすばやく簡単に作成
2009/3/1
jQuery Plugin FlyDOM
動的コンテンツをすばやく簡単に作成できるjQueryプラグイン。
指定した要素の先頭あるいは末尾に、生成した要素を追加することができます。 JSON形式のデータをテンプレートとして指定することもできます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Plugin FlyDOM | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="/content/lib/jquery/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.flydom-3.1.1.js"></script>
<script type="text/javascript">
$(function() {
// Create our remove me link actions
$('a[rel^="clean"]').each(function() {
var pairs = $(this).attr('rel').split('-');
$(this).click(function() {
$('#' + pairs[1] + ' table').remove();
return false;
});
});
});
</script>
<!-- CSS -->
<style type="text/css">
.example { border: 1px solid #336699; padding: 8px; background-color: #F2F4FC; width: 700px; overflow: auto; }
.exampleRow { background-color: #46907F; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://flydom.socianet.com/'>jQuery Plugin FlyDOM</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>createAppend(string element[, object attrs[, mixed content]])</h2>
<p>
DOM要素をフライ上に作成し、現在のDOMオブジェクトに追加します。
</p>
<h2>createPrepend(string element[, object attrs[, mixed content]])</h2>
<p>
DOM要素をフライ上に作成し、現在のDOMオブジェクトの先頭に追加します。
</p>
<p>
<a id="tryme-exampleCA" href="#">追加</a>
|
<a id="tryme-exampleCP" href="#">先頭に追加</a>
|
<a rel="clean-exampleCA" href="#">削除</a></p>
</p>
<div id="exampleCA"></div>
<script type="text/javascript">
$(function(){
$("#tryme-exampleCA").click(function(){
$('#exampleCA').createAppend(
'table', { width: '718px', style: 'border: 2px inset #336699;' }, [
'tr', { className: 'exampleRow' }, [
'td', { align: 'center', style: 'color: white;' }, 'I was created by createAppend()!'
]
]
);
});
$("#tryme-exampleCP").click(function(){
$('#exampleCA').createPrepend(
'table', { width: '718px', style: { 'borderWidth': 2, 'borderStyle': 'inset', 'border-color': '#336699' } }, [
'tr', { className: 'exampleRow' }, [
'td', { align: 'center', style: 'color: white;' }, 'I was created by createPrepend()!'
]
]
);
});
});
</script>
<h2>tplAppend(json, tpl)</h2>
<p>
シンプルなテンプレートを使用して、フライ上にDOM要素を作成し、オブジェクトの末尾に新しい要素として追加します。
</p>
<h2>tplPrepend(json, tpl)</h2>
<p>
シンプルなテンプレートを使用して、フライ上にDOM要素を作成し、オブジェクトの先頭に新しい要素として追加します。
</p>
<p>
<a id="tryme-exampleTA" href="javascript:void(0)">末尾に追加</a>
|
<a id="tryme-exampleTP" href="javascript:void(0)">先頭に追加</a>
|
<a rel="clean-exampleTA" href="javascript:void(0)">削除</a></p>
</p>
<div id="exampleTA"></div>
<script type="text/javascript">
$(function(){
$("#tryme-exampleTA").click(function(){
var json = { text: 'I was created by tplAppend()!' };
var tpl = function() {
return [
'table', { width: '718px', style: 'border: 2px inset #336699;' }, [
'tr', { className: 'exampleRow' }, [
'td', { align: 'center', style: 'color: white;' }, this.text
]
]
];
};
$('#exampleTA').tplAppend(json, tpl);
});
$("#tryme-exampleTP").click(function(){
var json = { text: 'I was created by tplPrepend()!' };
var tpl = function() {
return [
'table', { width: '718px', style: 'border: 2px inset #336699;' }, [
'tr', { className: 'exampleRow' }, [
'td', { align: 'center', style: 'color: white;' }, this.text
]
]
];
};
$('#exampleTA').tplPrepend(json, tpl);
});
});
</script>
<!-- CODE / -->
</div>
</body>
</html>
jQuery Spoilers plugin
マッチした要素の内容をを指定した要素でラップ
2009/2/28
jQuery Spoilers plugin
jquery.js、jquery.hoverIntent.js（要jQuery 1.1.2+）、sgbeal-spoilers.jquery.js
テキストなど、ページ上のコンテンツの一部をテープで隠したように見せるjQueryプラグイン。
ページを表示したときに、指定した要素を「
!」という赤いテキスト画像でテープのように隠します。
その赤いテキストにマウスオーバーすると隠されていた要素が表示されます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Spoilers plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="/content/lib/jquery/sgbeal-spoilers.jquery.js"></script>
<script type="text/javascript">
$(function(){
// On-hover spoiler:
$('.jqSpoiler').initSpoilers();
// On-hover spoiler using hoverIntent plugin:
$('.jqSpoilerIntent').initSpoilers({method:'hoverIntent'}).addClass('jqSpoiler');
// Clickable spoiler:
$('.jqSpoilerClick').initSpoilers({method:'click'}).addClass('jqSpoiler');
});
</script>
<!-- CSS -->
<style type="text/css">
.jqSpoiler { background:transparent url(/content/img/ajax/bg_spoilers.png) repeat 0 0; border:1px dotted red; font-weight:bold; color:red; line-height:2; }
.jqSpoiler span { visibility:hidden; }
.jqSpoiler.reveal { background-image:none; border:none; }
.jqSpoiler.reveal span { visibility:visible; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://wanderinghorse.net/computing/javascript/jquery/spoilers/demo.html'>jQuery Spoilers plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>マウスオーバーで隠されている部分を表示、マウスアウトで非表示に</h2>
<p>
赤いSpoilers!というテープの上にマウスオーバーすると、隠されているコンテンツが表示されます。<br>
<span class='jqSpoiler'><span>このテキストからマウスアウトすると、また隠されますｗ</span></span>
</p>
<h2>マウスオーバーで隠されている部分を表示、マウスアウトで非表示に（the hoverIntent plugin使用）</h2>
<p>
上記の例に、<a href='http://cherne.net/brian/resources/jquery.hoverIntent.html'>the hoverIntent plugin</a>（ホバー処理）を使用して、隠された部分を表示されるのが早すぎないようにしています。<br>
<span class='jqSpoilerIntent'><span>このテキストからマウスアウトすると、また隠されますｗ</span></span>
</p>
<h2>クリックで隠されている部分の表示・非表示を交互に切り替え</h2>
<p>
<span class='jqSpoilerClick'><span>このテキストは、再度クリックするとまた隠されますｗ</span></span>
</p>
<!-- / CODE -->
</div>
</body>
</html>
jquery.autoscale.js
ウィンドウサイズに合わせて画像をリサイズ
unknown
jquery.autoscale.js
jquery.js／jquery.autoscale.js
ウィンドウサイズに合わせて画像をリサイズするjQueryプラグイン。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jquery.autoscale.js | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.autoscale.js"></script>
<script type="text/javascript">
$(function(){
$(window).autoscale('.autoscale');
});
</script>
<!-- CSS -->
<style type="text/css">
body { margin:20px 0; text-align:center; }
h1 { text-align:left; margin-left:10px;}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://jquery.autoscale.js.googlepages.com/autoscale1.html'>jquery.autoscale.js</a> | 設置サンプル</h1>
<!-- CODE -->
<img src="/content/img/ajax/cross-fading_disjointed_image_rollover.png" alt="画像" class="autoscale" />
<!-- / CODE -->
</div>
</body>
</html>
jquery.biggerlink
指定した要素全体をリンク可能な領域にする
2009/2/24
jquery.biggerlink 2
jquery.js v1.3.1+、jquery.biggerlink.js v2.0.0
指定した要素全体をリンク可能な領域するjQueryプラグイン。
リンクする領域が大きくなることで、クリックしやすくなります。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jquery.biggerlink 2 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.biggerlink.js"></script>
<script type="text/javascript">
$(function(){
$('#links li').biggerlink();
});
</script>
<!-- CSS -->
<style type="text/css">
.bl-hot {
border:solid 1px #ccc;
zoom:1; /* Should be IE only */
background-color:#fff;
}
.bl-hover {
border-color:#aaf;
cursor:pointer;
background-color:#cdF;
}
.bl-hover a:link {
color:#CC3333;
}
.bl-hover a:visited {
color:#CC3333;
}
#links {
float:left;
width:100%;
clear:both;
margin:0;
padding:0;
margin-bottom:2em;
}
#links li.bl-hot {
width:30%;
float:left;
padding:0 1%;
margin:0;
margin-right:-1px;
display:inline;
text-indent:0;
list-style-type:none;
min-height:14em;
}
#links li:before {
content:'';
}
#links h3 {
margin:.5em 0;
font-size:1.4em;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.ollicle.com/eg/jquery/biggerlink2/'>jquery.biggerlink 2</a> | 設置サンプル</h1>
<p>▼li要素全体をリンク対象にして、クリックしやすくしています。</p>
<!-- CODE -->
<ul id="links">
<li>
<h3><a href="http://phpjavascriptroom.com/?t=php">PHP</a></h3>
<p>Windows OS に PHPとApacheサーバーのインストール ～ php.iniの設定まで、 パソコンでPHPを使えるようになるまでの手順を図解。 .htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。 Tipsでは実用的な自作関数を紹介。</p>
</li>
<li>
<h3><a href="http://phpjavascriptroom.com/?t=strm">音声・動画配信</a></h3>
<p>Windows Media Player、RealPlayer、QuickTime、FlashPlayerのWebページ埋め込みによるストリーム配信方法を図・サンプルスクリプト付で解説。 表示するコントロールのカスタマイズ方法やメタファイル作成も。</p></li>
<li>
<h3><a href="http://phpjavascriptroom.com/?t=js">JavaScript</a></h3>
<p>JavaScriptの基本～実用的な関数までサンプル付きで解説。 ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック（正規表現含む）など、 サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。 JavaScriptでDOM（Document Object Model）のメソッド・プロパティを使ってページ上のノードにアクセスするサンプルも追加しました。</p>
</li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
Link Wrapper - jQuery plugin for long URL
長いURLを折り返す
unknown
jquery.linkwrapper.js
IE 6.0、IE 7.0、Firefox 2.0.0.11、Safari 3.0.4、Netscape 7.1、Opera 9.25
jquery.js、jquery.linkwrapper.js v1.0.3
長いURLを折り返すjQueryプラグイン。
設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jquery.linkwrapper.js | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.linkwrapper-1.0.3.js"></script>
<script type="text/javascript">
$(function() {
$('a.wbr').linkwrapper().css('color', '#f00');
});
</script>
<!-- CSS -->
<style type="text/css">
#wrap { width:300px; }
#wrap p { border:1px solid #ccc; padding:20px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://cl.pocari.org/2008-02-03-1.html'>jquery.linkwrapper.js</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>折り返しなし</h2>
<p><a href="http://localhost/test/pj_roomer/index.php?t=ajax&p=jquery_plugin#a_basic">http://localhost/test/pj_roomer/index.php?t=ajax&p=jquery_plugin#a_basic</a></p>
<h2>折り返しあり（プラグイン使用）</h2>
<p><a href="http://localhost/test/pj_roomer/index.php?t=ajax&p=jquery_plugin#a_basic" class="wbr">http://localhost/test/pj_roomer/index.php?t=ajax&p=jquery_plugin#a_basic</a></p>
<!-- / CODE -->
</div>
</body>
</html>
Making an Expanding Code Box
コードボックスからテキストがあふれる場合に広げて表示
2010/2/7
Making an Expanding Code Box
jquery.js
jQueryを使用して、hoverイベントが発生した時に伸縮させる方法が掲載されています。
pre要素に記述したスクリプトコードが1行に収まらない場合、ボックスの幅が固定だと折り返されずに切れてしまうと時があります。 CSSで「overflow:auto」を指定して横スクロールバーで見せるのが一般的ですが、ここに掲載されているように、ボックスにマウスオーバーするとボックスの幅を広げて表示し、マウスアウトで元の幅に戻すというアニメーションで見せるのも面白いですね。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/piroBox.1_2.js"></script>
<script type="text/javascript">
$(function(){
$("pre.codebox").hover(function() {
var codeInnerWidth = $("code", this).width() + 10;
if (codeInnerWidth > 563) {
$(this)
.stop(true, false)
.css({
zIndex: "100",
position: "relative"
})
.animate({
width: codeInnerWidth + "px"
});
}
}, function() {
$(this).stop(true, false).animate({
width:563
});
});
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/img/ajax/jquery/css_pirobox/white/style.css" />
<style type="text/css">
pre.codebox {
padding: 10px;
border: 2px solid #c94a29;
overflow: hidden;
margin: 0 0 15px 0;
width: 563px;
font-family: Courier, Monospace;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://digwp.com/2009/07/making-an-expanding-code-box/'>Making an Expanding Code Box</a></p>
<!-- CODE -->
<pre class="codebox"><code>This is a really long line of code that is even longer than the world super-cala-frag-alistic-espee-ala-dosis</code></pre>
<!-- / CODE -->
</body>
</html>
Smart Columns w/ CSS & jQuery
ウィンドウサイズに合わせてカラムを整列
2009/6/16
Smart Columns with CSS & jQuery
jquery.js
カラムをウィンドウサイズに合わせて整列させるjQueryプラグイン。 各カラムはli要素になっており、ウィンドウをリサイズした時に、ウィンドウ幅にぴったりカラムが収まるように1列に配置するカラムの数や幅を調整します。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Smart Columns with CSS & jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
function smartColumns() { //Create a function that calculates the smart columns
//Reset column size to a 100% once view port has been adjusted
$("ul.column").css({ 'width' : "100%"});
var colWrap = $("ul.column").width(); //Get the width of row
var colNum = Math.floor(colWrap / 240); //Find how many columns of 240px can fit per row / then round it down to a whole number
var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column
$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
$("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column
}
$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
smartColumns();
});
$(function(){
smartColumns();
});
</script>
<!-- CSS -->
<style type="text/css">
ul.column{
width: 100%;
padding: 0;
margin: 10px 0;
list-style: none;
}
ul.column li {
float: left;
width: 240px; /*Set default width*/
padding: 0;
margin: 5px 0;
display: inline;
}
.block {
height: 355px;
font-size: 1em;
margin-right: 10px; /*Creates the 10px gap between each column*/
padding: 20px;
background: #e3e1d5;
}
.block h3 {
margin:0 0 10px 0; padding:0;
font-size: 1.1em;
}
.block img {
/*Flexible image size with border*/
width: 89%; /*Took 1% off of the width to prevent IE6 bug*/
padding: 5%;
background:#fff;
margin: 0 auto;
display: block;
-ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/'>Smart Columns with CSS & jQuery</a> | 設置サンプル</h1>
<p>▼ウィンドウをリサイズすると、ウィンドウサイズにぴったりフィットするようにカラムが整列します。</p>
<!-- CODE -->
<div class="cf">
<ul class="column">
<!--Repeating list item-->
<li>
<div class="block">
<h3>アボカド シーザーサラダ@アボガドダイニング Platinum Lounge</h3>
<p><a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a></p>
<p>よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p>
</div>
</li>
<li>
<div class="block">
<h3>アボカド刺@アボガドダイニング Platinum Lounge</h3>
<p><a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" width="240" height="180" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a></p>
<p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ</p>
</div>
</li>
<li>
<div class="block">
<h3>ハニートースト@アボガドダイニング Platinum Lounge</h3>
<p><a href="http://www.flickr.com/photos/22559849@N06/3273696493/" title="ハニートースト@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" width="240" height="180" alt="ハニートースト@アボガドダイニング Platinum Lounge" /></a></p>
<p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました！</p>
</div>
</li>
<li>
<div class="block">
<h3>ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge</h3>
<p><a href="http://www.flickr.com/photos/22559849@N06/3273696469/" title="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" width="240" height="180" alt="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge" /></a></p>
<p>めちゃくちゃおいしかったアボカドのピザ！ピザ生地はクリスピータイプでさくさく！</p>
</div>
</li>
<li>
<div class="block">
<h3>フライドポテト アボカドディップ添え@アボガドダイニング Platinum Lounge</h3>
<p><a href="http://www.flickr.com/photos/22559849@N06/3273696401/" title="フライドポテト アボカドディップ添え@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3324/3273696401_f4ea6c7677_m.jpg" width="240" height="180" alt="フライドポテト アボカドディップ添え@アボガドダイニング Platinum Lounge" /></a></p>
<p>アボカドディップはとってもクリーミー！ポテトじゃなくてもなんにでも合いそう♪</p>
</div>
</li>
<li>
<div class="block">
<h3>ダークチェリーモカ@STARBUCKS</h3>
<p><a href="http://www.flickr.com/photos/22559849@N06/3055162547/" title="ダークチェリーモカ@STARBUCKS by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_m.jpg" width="240" height="180" alt="ダークチェリーモカ@STARBUCKS" /></a></p>
<p>ビターなチョコレートとチェリーの甘さがすごくマッチしてます。ホットで飲むとホイップクリームが溶けてとってもまろやか♪寒い日にぴったりですね！</p>
</div>
</li>
<li>
<div class="block">
<h3>バニラミルクフラペチーノ@STARBUCKS</h3>
<p><a href="http://www.flickr.com/photos/22559849@N06/3104684709/" title="バニラミルクフラペチーノ@STARBUCKS by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3113/3104684709_6911f58648_m.jpg" width="240" height="180" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></p>
<p>牛乳ヒゲできそうですよねｗ</p>
</div>
</li>
<li>
<div class="block">
<h3>メロンソーダとカフェオレ@CAFE EAT代官山</h3>
<p><a href="http://www.flickr.com/photos/22559849@N06/2973352946/" title="メロンソーダとカフェオレ@CAFE EAT代官山 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_m.jpg" width="240" height="180" alt="メロンソーダとカフェオレ@CAFE EAT代官山" /></a></p>
<p>代官山アドレスにあるCafe eat。メロンソーダーとアイス・カフェオーレ！ドリンクが大きくて長居にはもってこい♪</p>
</div>
</li>
<!--end repeating list item-->
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
Text Resizing With jQuery
テキストのリサイズ
2009/6/6
Text Resizing With jQuery
jquery.js
Webページのテキストサイズ（フォントサイズ）を訪問者が変更できるように、jQueryを使用してフォントサイズをクリック操作で簡単に変更する方法が掲載されています。
CSSのfont-sizeプロパティで、「px」や「pt」で固定サイズを指定している場合は変更できませんが、「em」や「%」など相対サイズ指定している場合は、現在のフォントサイズから相対的に大きくしたり小さくすることができます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Text Resizing With jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="/content/lib/jquery/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.flydom-3.1.1.js"></script>
<script type="text/javascript">
$(function() {
// フォントサイズをリセット
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// フォントサイズを大きく
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// フォントサイズを小さく
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
* {
font-size:100%;
}
body {
font-size:100%;
}
.pixels {
font-size:16px;
line-height:30px;
margin-bottom:20px;
padding:20px;
background-color:#222;
color:#fff;
}
.point {
font-size:12pt;
line-height:30px;
margin-bottom:20px;
padding:20px;
color:#fff;
background-color:#222;
}
.em {
font-size:1em;
margin-bottom:20px;
padding:20px;
color:#fff;
background-color:#222;
}
.percentage {
font-size:100%;
margin-bottom:20px;
padding:20px;
color:#fff;
background-color:#222;
}
.undefined {
margin-bottom:20px;
padding:20px;
color:#fff;
background-color:#222;
}
#changeFont {
position:absolute;
top:10px;
right:10px;
background-color:#333;
padding:5px;
}
.increaseFont,
.decreaseFont,
.resetFont {
color:#ccc;
font-size:14px;
float:left;
margin:10px;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.shopdev.co.uk/blog/text-resizing-with-jquery/'>Text Resizing With jQuery</a> | 設置サンプル</h1>
<!-- CODE -->
<div class="pixels">このdiv要素のクラスには「px」でfont-sizeプロパティが指定されています。</div>
<div class="point">このdiv要素のクラスには「pt」でfont-sizeプロパティが指定されています。</div>
<div class="em">このdiv要素のクラスには、「em」でfont-sizeプロパティが指定されています。</div>
<div class="percentage">
このdiv要素のクラスには、親要素に対するパーセンテージでfont-sizeプロパティが指定されています。
</div>
<div class="undefined">
このdiv要素のクラスには、font-sizeプロパティが指定されていません。
</div>
<div id="changeFont">
<a href="#" class="increaseFont">大きく</a>
<a href="#" class="decreaseFont">小さく</a>
<a href="#" class="resetFont">リセット</a>
</div><!-- #changeFont -->
<!-- CODE / -->
</div>
</body>
</html>
The jQuery Feed Menu
ページのメタ情報からフィード情報を取得してフィード一メニューをアイコン表示
unknown
The jQuery Feed Menu
［JS］jquery.js、feed_menu.js
［CSS］feed_menu.css、feed_menu_ie.css
［CSS］feed_menu.css、feed_menu_ie.css
ページのmeta情報からRSS、Atomなどのフィード情報を取得してフィードメニューをアイコン表示するライブラリ。 アイコンをクリックすると、取得したフィードメニューが表示されます。 Atom形式のフィードのみ、RSS形式のフィードのみを表示することも可能です。 また暗めの背景用、明るめの背景用のテーマも用意されていますので、サイトのデザインに合わせて設置することができます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>The jQuery Feed Menu | 設置サンプル</title>
<link rel="alternate" type="application/rss+xml" title="RSS 1.0 (RDF)" href="http://phpjavascriptroom.com/index.rdf" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 (XML)" href="http://phpjavascriptroom.com/index.xml" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery_feed_menu/feed_menu.js"></script>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery_feed_menu/feed_menu.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/content/lib/jquery_feed_menu/feed_menu_ie.css" />
<![endif]-->
<script type="text/javascript">
$ = jQuery;
</script>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/'>The jQuery Feed Menu</a> | 設置サンプル</h1>
<span id="jquery_feed_menu_example_1"></span>
<script type="text/javascript">
//<![CDATA[
var fm = new FeedMenu();fm.write('#jquery_feed_menu_example_1');
//]]>
</script>
<h2>RSS Feeds</h2>
RSS Feeds: <span id="jquery_feed_menu_example_3"></span>
<script type="text/javascript">
//<![CDATA[
var fm3 = new FeedMenu('link'+String.fromCharCode(91) +'type*=rss'+String.fromCharCode(93));
fm3.write('#jquery_feed_menu_example_3');
//]]>
</script>
<h2>テーマクラス</h2>
<span id="jquery_feed_menu_example_8"></span>
<script type="text/javascript">
//<![CDATA[
var fm8= new FeedMenu();
fm8.write('#jquery_feed_menu_example_8');
//]]>
</script>
<span id="jquery_feed_menu_example_4"></span>
<script type="text/javascript">
//<![CDATA[
var fm4 = new FeedMenu(null,'wood');
fm4.write('#jquery_feed_menu_example_4');
//]]>
</script>
<span id="jquery_feed_menu_example_5"></span>
<script type="text/javascript">
//<![CDATA[
var fm5 = new FeedMenu(null,'azure');
fm5.write('#jquery_feed_menu_example_5');
//]]>
</script>
<br><br>
<span style="background:#111;padding:1em 0.5em;margin-right:0.5em;" class="jquery_feed_menu_example_6"></span>
<span style="background:#666600;padding:1em 0.5em;margin-right:0.5em;" class="jquery_feed_menu_example_6"></span>
<span style="background:#663300;padding:1em 0.5em;margin-right:0.5em;" class="jquery_feed_menu_example_6"></span>
Transparent on Dark (for dark backgrounds)
<script type="text/javascript">
//<![CDATA[
var fm6 = new FeedMenu(null,'trans_on_dark');
fm6.write('.jquery_feed_menu_example_6');
//]]>
</script>
<br><br><br>
<span style="background:#DDD;padding:1em 0.5em;margin-right:0.5em;" class="jquery_feed_menu_example_7"></span>
<span style="background:#33FFFF;padding:1em 0.5em;margin-right:0.5em;" class="jquery_feed_menu_example_7"></span>
<span style="background:#FFCCFF;padding:1em 0.5em;margin-right:0.5em;" class="jquery_feed_menu_example_7"></span>
Transparent on Light (for light backgrounds)
<script type="text/javascript">
//<![CDATA[
var fm7= new FeedMenu(null,'trans_on_light');
fm7.write('.jquery_feed_menu_example_7');
//]]>
</script>
<br><br>
<h2>外部サイトなど、任意のRSSをフィードメニューに表示</h2>
<span id="jquery_feed_menu_example_9"></span>
<script type="text/javascript">//<![CDATA[
var oCustomLinks = [
{
title:'RSS Feed',
href:"http://phpjavascriptroom.com/index.xml"
},
{
title:'Subscribe with Bloglines',
href:"http://www.bloglines.com/sub/http://feeds.feedburner.com/komodomedia"
},
{
title:'Subscribe with Google Reader',
href:"http://www.google.com/reader/view/feed/http://feeds.feedburner.com/komodomedia"
}
];
var fm9 = new FeedMenu(oCustomLinks);
fm9.write('#jquery_feed_menu_example_9');
//]]>
</script>
</div>
</body>
</html>
Unobtrusive IFrame with jQuery
リンクをインラインフレームに変換
unknown
Unobtrusive IFrame with jQuery（配布終了）
jquery.js、jquery_iframe.js v1.0
指定した条件にマッチしたa要素をiframeに変換するjQueryプラグイン。
a要素のhref属性に指定したリンク先をインラインフレーム内に表示します。 フレームの幅、高さ、スクロールの有無、フレームボーダー、フレームの上下左右をオプションで指定することができます。 省略した場合はあらかじめ定義されているデフォルト値が適用されます。
オプションは、a要素のclass属性にオプション名:数値または文字列の形式で指定します。
複数指定する場合は、半角スペース区切りで指定します。
例えば、フレームの幅：450px、フレームの幅：300px、スクロールなしにしたい場合は、<a class='iframe w:450 h300 sc:no'></a>のように指定します。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Unobtrusive IFrame with jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery_iframe.js"></script>
<script type="text/javascript">
$(function(){
$('a.iframe').iframe();
});
</script>
<!-- CSS -->
<style type="text/css">
body { background:#ddd; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://33rockers.com/2006/12/05/unobtrusive-iframe-with-jquery/'>Unobtrusive IFrame with jQuery</a> | 設置サンプル</h1>
<p>▼Googleをインラインフレーム表示します。</p>
<!-- CODE -->
<a href="http://www.google.co.jp/" class="iframe w:800 h:450 sc:no">Google</a>
<!-- / CODE -->
</div>
</body>
</html>
ロールオーバー
ロールオーバー
unknown
- Easy Image Rollover Script With jQuery
簡単な画像のロールオーバー - jQueryRollover v1.0
画像（img要素）と画像ボタン（input type=”image”）のロールオーバー
Internal Links with Favicon using jQuery
jquery.js
jQueryを使用して、簡単に画像のロールオーバーを行う方法が掲載されています。
ロールオーバーする画像（img要素）または画像ボタン（input type="image"）に「ro」クラスを指定します。 マウスオーバー時に、その要素のsrc属性を取得し、正規表現を使用して画像のファイル名＋「_o」の画像をロールオーバー画像として表示する仕組みになっています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Easy Image Rollover Script With jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
PEPS.rollover.init();
});
PEPS = {};
PEPS.rollover={
init:function(){
this.preload();
$(".ro").hover(
function(){ $(this).attr( 'src', PEPS.rollover.newimage($(this).attr('src')) ); },
function(){ $(this).attr( 'src', PEPS.rollover.oldimage($(this).attr('src')) ); }
);
},
preload:function(){
$(window).bind('load', function(){
$('.ro').each( function( key, elm ) { $('<img>').attr( 'src', PEPS.rollover.newimage( $(this).attr('src') ) ); });
});
},
newimage:function(src){
return src.substring( 0, src.search(/(\.[a-z]+)$/) ) + '_o' + src.match(/(\.[a-z]+)$/)[0];
},
oldimage:function(src){
return src.replace(/_o\./, '.');
}
};
</script>
</head>
<body>
<div id="wrap">
<h1><a href='http://peps.ca/blog/easy-image-rollover-script-with-jquery/'>Easy Image Rollover Script With jQuery</a> | 設置イサンプル</h1>
<!-- CODE -->
<h2>img要素のロールオーバー</h2>
<p><img src="/content/img/ajax/btn.gif" class="ro" /></p>
<h2>画像ボタン（<nput type="image" />）のロールオーバー</h2>
<p><input type="image" src="/content/img/ajax/btn.gif" class="ro" /></p>
<!-- / CODE -->
</div>
</body>
</html>
jQueryRollover
jquery.js、jquery.rollover.js v1.0
画像（img要素）と画像ボタン（input type='image'）のロールオーバーを簡単に実装できるjQueryプラグイン。
ロールオーバー時の画像のファイル名の末尾に特定の文字(デフォルトは「_on」）を付けるルールがあります。
それ以外に変更したい場合は、$('div#nav a img').rollover('_over');のように第1引数に指定します。
また、通常時の画像とロールオーバー時の画像は同一フォルダ内に置いておく必要があります。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQueryRollover v1.0 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.rollover.js"></script>
<script type="text/javascript">
$(function(){
/* 画像（img要素）のロールオーバー */
$('div#nav a img').rollover('_o');
/* 画像ボタン（input type="image"）のロールオーバー */
$('form input:image').rollover('_o')
});
</script>
<!-- CSS -->
<style type="text/css">
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://rewish.org/javascript/jquery_rollover_plugin'>jQueryRollover v1.0</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>画像（img要素）のロールオーバー</h2>
<div id="nav">
<a href="#"><img src="/content/img/ajax/btn.gif" alt="Button" /></a>
</div>
<h2>画像ボタン（input type="image"）のロールオーバー</h2>
<form>
<input type="image" src="/content/img/ajax/btn.gif" alt="Button" /></a>
</form>
<!-- / CODE -->
</div>
</body>
</html>
指定した要素だけを印刷
2009/4/12
指定した要素だけを印刷するjQueryプラグイン。
設置イメージjPrint
jquery.js、jprint.js v1.0
設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jPrint | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jprint-1.0.js"></script>
<script type="text/javascript">
$(function(){
$('#btn_print').click(function(){
$("#printarea").jPrint();
});
});
</script>
<!-- CSS -->
<style type="text/css">
#printarea { margin:20px 0; padding:20px; border:2px solid #000; background-color:#fff; font-weight:bold; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://reinaldojunior.net/lab/jquery/jprint/'>jPrint</a> | 設置サンプル</h1>
<!-- CODE -->
<input type="button" id="btn_print" value="指定範囲を印刷" />
<div id="printarea">
<p>この部分だけ印刷されます。</p>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jPrintArea
jquery.js、jquery.jPrintArea.js
設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jPrintArea | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jPrintArea.js"></script>
<script type="text/javascript">
$(function(){
$('#btn_print').click(function(){
$.jPrintArea("#printarea");
});
});
</script>
<!-- CSS -->
<style type="text/css">
#printarea { margin:20px 0; padding:20px; border:2px solid #000; background-color:#fff; font-weight:bold; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://plugins.jquery.com/project/jPrintArea'>jPrintArea</a> | 設置サンプル</h1>
<!-- CODE -->
<input type="button" id="btn_print" value="指定範囲を印刷" />
<div id="printarea">
<p>この部分だけ印刷されます。</p>
</div>
<!-- / CODE -->
</div>
</body>
</html>
PrintArea
jquery.js、jquery.PrintArea.js v1.1
設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>PrintArea | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.PrintArea.js"></script>
<script type="text/javascript">
$(function(){
$('#btn_print').click(function(){
$("#printarea").printArea();
});
});
</script>
<!-- CSS -->
<style type="text/css">
#printarea { margin:20px 0; padding:20px; border:2px solid #000; background-color:#fff; font-weight:bold; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://plugins.jquery.com/project/PrintArea'>PrintArea</a> | 設置サンプル</h1>
<!-- CODE -->
<input type="button" id="btn_print" value="指定範囲を印刷" />
<div id="printarea">
<p>この部分だけ印刷されます。</p>
</div>
<!-- / CODE -->
</div>
</body>
</html>