Category JavaScript Archive

jQueryを使ったアイコン付加プラグイン(pdf,doc,xls,zip対応版)

以前にポストしたブログ記事「jQueryを使ったPDFアイコン付加プラグイン」ですが、今回はPDFファイルだけでなく、Word,EXCEL,ZIPに対応させたものを作ってみました。

今回も折り返した時にIE6/IE7でアイコンの表示がずれるバグに対応させるためspanタグを挿入し、after, beforeのパラメーターを変更することによって前後にアイコンを付加させます。

簡単にコード解説をします。

Read more

Google Maps API jQuery Pluginを書いてみた

Posted by poundhound on February 7, 2010

Google Maps API jQuery Pluginを書いてみた

Google Maps APIのバージョン2は利用していましたが、今さらながらバージョン3がリリースされていたことに気づきました。バージョン3からはAPIキーを取得せずに使えるようになっているので、さらに敷居が低くなりました。

バージョン3からはGPSセンサーを利用出来るようになっていて、最初のコードを呼び出す時の引数にtrueを指定することで機能します。iPhoneやAndroidでの利用では利用価値大になりましたね。

今回は勉強がてらjQueryのプラグインとして書いてみました。

Demo Page

Read more

Thickboxで読み込んだHTMLからウィンドウを閉じる

Posted by poundhound on January 9, 2010

ThickBoxはLightBox系のjQueryプラグインとしては最も良く使われる部類に入るのではないでしょうか?

ThickBoxは画像だけでなくHTMLも読み込めてとても便利なのです。ただ、デフォルトでは右上のcloseと書かれたテキストをクリックするか、暗転している部分をクリックしないと元の画面に戻りません。リテラシーの低い人は一瞬どこをクリックして閉じるのか分からない事もあるかもしれません。そこでHTML側にウィンドウを閉じるボタンを付けてみることにします。

通常ThickBoxはtb_remove()と言うメソッドを呼び出してウィンドウを閉じます。ただ読み込まれたHTMLファイルの閉じるボタンのclickイベントにtb_remove()を設定したとしてもイベントは実行されません。これは読み込む側と読み込まれる側に親子の関係があるからです。

Read more

jQueryで複数のCSSプロパティを記述する書式

Posted by poundhound on October 1, 2009

これもいつも忘れるのでメモ

$('#hoge').css({'display' : 'block', 'margin-bottom' : '0.5em'});

プロパティと値は:(コロン)で区切り、プロパティとプロパティは,(カンマ)で区切る。プロパティ同士は{}(ブレス)で囲む。

jQuery (X)HTML操作のメモ1

Posted by poundhound on September 15, 2009

いつも忘れるので自分用にメモ

prepend()
指定した要素内部の先頭にHTMLを挿入
$('p').prepend('<strong>追加テキスト</strong>');
append()
指定した要素内部の最後にHTMLを挿入
$('p').append('<strong>追加テキスト</strong>');
before()
指定した要素の前にHTMLを挿入
$('p').before('<h1>追加テキスト</h1>');
after()
指定した要素の後にHTMLを挿入
$('h1').prepend('<p>追加テキスト</p>');
prependTo()
指定した要素を他の要素の内部の先頭に移動
$('div#article').prependTo('div.section');
appendTo()
指定した要素を他の要素の内部の最後に移動
$('div#article').prependTo('div.section');
insertBefore()
指定した要素を他の要素の前に移動
$('h1').insertBefore('p');
insertAfter()
指定した要素を他の要素の後に移動
$('p#intro').insertAfter('h1');
wrap()
指定した要素に対して別に指定した要素で包む
$('span').wrap('<p></p>');
wrapAll()
指定した複数の要素に対して別に指定した要素で包む
$('p').wrapAll('div.section');
wrapInner()
指定した要素の子要素やテキストを別に指定した要素で包む
$('p').wrapInner('<span></span>');

先日、Webデザイナーの集会で嘘くさい?jQueryの基礎みたいなお話をしたのですが、その時にこのような質問が出ました。

複数のセレクトボックスを配置した時、選ばれた要素のテキストをまとめて表示する事って出来ないんですか?

そんな訳でちょっと書いてみたのですが、こんな動作で宜しいのでしょうか?

セレクトボックスで選択したoption要素のテキストを全て表示するのデモ

Read more

jQueryを使ったブラウザ分岐

Posted by poundhound on April 18, 2009

jQueryを使ったブラウザ分岐

Windows IE6/7はフォントをpx(ピクセル)指定すると文字のサイズが拡大出来ません。そのため今まではIEでフォントサイズを拡大出来るようにするため次のようにハックを使っていました。

body { font-size: 100%; }
* html body { font-size: 82%; } /* for win ie6 */
*:first-child+html { font-size: 82%; } /* for win ie 7 */
html>/**/body { font-size: 13px; } /* for modern browser */

ところがWIndows IE8がリリースされ、このブラウザも当然のごとくピクセル指定のフォントで文字サイズが変更出来ません。IE7からはページズーム機能が備わっているし、Firefoxも3からはデフォルトではレイアウトごとズームするのでもうフォントの固定をしても良いのでは?と思ったりもします。

JavaScriptが無効の環境ではフォントが固定されてしまいますが、jQueryを使ってブラウザ分岐をすると言うのも一つの手かもしれません。

Read more

DD_belatedPNGを利用してIE6で透過pngを使う

Posted by poundhound on April 11, 2009

これまでにいくつか透過pngに関するエントリーを書いてきましたが、これは!と思ったのがDD_belatedPNG。background-positionやbackground-repeatにも対応で読み込むJSファイルが1つなのでとっても使いやすい。

IE PNG FixのAlpha版もbackground-repeatに対応しているけれど、リピート用のJSの他にblank.gifや.htcファイルを読み込んだりする必要があるので少々面倒。

DD_belatedPNGの使い方は非常にシンプルで、headタグでJSファイルを読み込んで透過pngを使用したCSSセレクタを指定するだけでオーケーです。

<!--[if lte IE 6]>
<script type="text/javascript" src="<$mt:BlogURL$>theme/js/DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.iepngfix, div#pngFix');
</script>
<![endif]-->

セレクタはカンマ区切りで複数指定出来ます。

今回のブログデザインを変更するにあたりこのJSファイルを使わせていただきました。このブログではjQueryを使ってるので、次のようなコードを書いて透過pngを使った画像にIE6以下のブラウザの場合.iepngfixが自動的に適用されるようにしています。

$(function()
{
	if ($.browser.msie && $.browser.version < 7.0)
	{
		$("img[@src$=png]").addClass("iepngfix");
	}
}

My Tweet

    @poundhound
    226followers

    Google Adsence

    • Movable Type 5 Webサイト作成ガイドVolume 1