以前にポストしたブログ記事「jQueryを使ったPDFアイコン付加プラグイン」ですが、今回はPDFファイルだけでなく、Word,EXCEL,ZIPに対応させたものを作ってみました。
今回も折り返した時にIE6/IE7でアイコンの表示がずれるバグに対応させるためspanタグを挿入し、after, beforeのパラメーターを変更することによって前後にアイコンを付加させます。
簡単にコード解説をします。
Category JavaScript Archive
ThickBoxはLightBox系のjQueryプラグインとしては最も良く使われる部類に入るのではないでしょうか？
ThickBoxは画像だけでなくHTMLも読み込めてとても便利なのです。ただ、デフォルトでは右上のcloseと書かれたテキストをクリックするか、暗転している部分をクリックしないと元の画面に戻りません。リテラシーの低い人は一瞬どこをクリックして閉じるのか分からない事もあるかもしれません。そこでHTML側にウィンドウを閉じるボタンを付けてみることにします。
通常ThickBoxはtb_remove()と言うメソッドを呼び出してウィンドウを閉じます。ただ読み込まれたHTMLファイルの閉じるボタンのclickイベントにtb_remove()を設定したとしてもイベントは実行されません。これは読み込む側と読み込まれる側に親子の関係があるからです。
これもいつも忘れるのでメモ
$('#hoge').css({'display' : 'block', 'margin-bottom' : '0.5em'});
プロパティと値は:(コロン)で区切り、プロパティとプロパティは,(カンマ)で区切る。プロパティ同士は{}(ブレス)で囲む。
いつも忘れるので自分用にメモ
- 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の基礎みたいなお話をしたのですが、その時にこのような質問が出ました。
複数のセレクトボックスを配置した時、選ばれた要素のテキストをまとめて表示する事って出来ないんですか？
そんな訳でちょっと書いてみたのですが、こんな動作で宜しいのでしょうか？
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を使ってブラウザ分岐をすると言うのも一つの手かもしれません。
これまでにいくつか透過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");
}
}
