JQuery | WEBシステム開発

2010年02月24日

簡単にポップアップを実現するjQueryプラグイン「prettyPopin」

URL:jQuery popin solution – prettyPopin – by Stephane Caron

jQueryプラグイン「prettyPopin」を使うと簡単にポップアップが実装できます。

サンプルはこちら(別ウィンドウで開きます)。

使い方を紹介します。

1. 「jquery.js」と「prettyPoint.js」の読み込み

<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.prettyPopin.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPopin.css" type="text/css" media="screen" charset="utf-8" />

※例では、「prettyPoint」に添付されているCSSファイルも読み込んでいます。

prettyPoint.jsのダウンロードはこちら
・prettyPoint.js

jquery.jsのダウンロードはこちら
・jquery.js

2. ポップアップする識別名を設定

例では、aタグのrel属性の値に「prettyPopin」と設定しました。

<a href="ajax/regular.html" rel="prettyPopin">ポップアップ！</a>

3. prettyPopin()の呼び出し

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  $("a[rel^='prettyPopin']").prettyPopin({width: 550,followScroll:false});
});
</script>

完了です。

設定等の詳細は「jQuery popin solution – prettyPopin – by Stephane Caron」を
ご覧下さい。

雑誌のような段組みのレイアウトを簡単に作成できるjQuery プラグイン「jQuery Masonry」

URL:David DeSandro: jQuery Masonry

「jQuery Masonry」を使うと雑誌のような段組みのレイアウトを簡単に作成できます。

実際に「jQuery Masonry」を使ったHAPPY*TRAPのブログ記事一覧は、
このような感じになります。

使い方は、「jQuery Masonry」のサイトをご覧いただければすぐにわかりますが、
簡単にご紹介します。

1. 「jquery.js」と「jquery.masonry.js」の読み込み、masonryメソッドのコール

<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="/javascripts/jquery.masonry.js"></script>
<script type="text/javascript">
    $(function(){  
        $('#wrapper').masonry();
    })  
</script>

・jquery.masonry.jsのダウンロードはこちらから。
David DeSandro: jQuery Masonry

・jquery.jsのダウンロードはこちらから。
jQuery: The Write Less, Do More, JavaScript Library

2. HTMLを作成

<div id="wrapper">
    <div class="box">
        hoge
    </div>
</div>

クラス名「box」のdivブロックを必要な数だけ記述します。

3. CSSで装飾

ここはお好みで。

#wrapper{
	padding:10px;
	background-color:#000000;
}
.box{
	float:left;
	margin:10px;
	background-color:#ffffff;
}

以上です。

「jQuery Masonry」で利用できるプロパティなどは、
サイトをご確認ください。

JQuery + xml

JQueryでxmlを扱ってみる。

１．まずはxmlファイルを作成。
wine.xml

<?xml version="1.0" encoding="UTF-8" ?>
<wine>
	<item>
		<rank>1</rank>
		<country>フランス</country>
		<amount>5,329,449</amount>
	</item>
	<item>
		<rank>2</rank>
		<country>イタリア</country>
		<amount>5,056,648</amount>
	</item>
	<item>
		<rank>3</rank>
		<country>スペイン</country>
		<amount>3,934,140</amount>
	</item>
</wine>

２．wine.xmlを読み込んで表示してみる。
hoge.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery + xml</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// xmlファイル読み込み
function get_wine_xml(){
    $.ajax({
        url:'wine.xml',
        type:'get',
        dataType:'xml',
        timeout:1000,
        success:parse_xml
    });
}

// xmlデータ解析
function parse_xml(xml,status){
    if(status!='success')return;
    $(xml).find('item').each(write_row);
}

// 1件分のデータをtable要素に追加
function write_row(){
    var rank=$(this).find('rank').text();
    var country=$(this).find('country').text();
    var amount=$(this).find('amount').text();
    $('<tr>'+
    '<td>'+rank+'</td>'+
    '<td>'+country+'</td>'+
    '<td>'+amount+'</td>'+
    '</tr>').appendTo('table#wine_tbl');
}
</script>
</head>
<body onload="get_wine_xml()">
    <h1>国別のワイン生産量 2005年</h1>
    <table border="1" cellspacing="0" cellpadding="0" id="wine_tbl">
        <tr>
            <td>順位</td>
            <td>国</td>
            <td>生産量(トン)</td>
        </tr>
    </table>
</body>
</html>

出力結果：

順位   国         生産量(トン)
1      フランス   5,329,449
2      イタリア   5,056,648
3      スペイン  3,934,140

簡単でしょ。

jqueryといいprototype.jsといいjavascriptはライブラリ群が充実してきてますね。

簡単にポップアップを実現するjQueryプラグイン「prettyPopin」

1. 「jquery.js」と「prettyPoint.js」の読み込み

2. ポップアップする識別名を設定

3. prettyPopin()の呼び出し

関連記事

雑誌のような段組みのレイアウトを簡単に作成できるjQuery プラグイン「jQuery Masonry」

1. 「jquery.js」と「jquery.masonry.js」の読み込み、masonryメソッドのコール

2. HTMLを作成

3. CSSで装飾

関連記事

JQuery + xml

関連記事

簡単にポップアップを実現するjQueryプラグイン「prettyPopin」

1. 「jquery.js」と「prettyPoint.js」の読み込み

2. ポップアップする識別名を設定

3. prettyPopin()の呼び出し

関連記事

雑誌のような段組みのレイアウトを簡単に作成できるjQuery プラグイン 「jQuery Masonry」

1. 「jquery.js」と「jquery.masonry.js」の読み込み、masonryメソッドのコール

2. HTMLを作成

3. CSSで装飾

関連記事

JQuery + xml

関連記事

雑誌のような段組みのレイアウトを簡単に作成できるjQuery プラグイン「jQuery Masonry」