THE HAM MEDIA BLOG

jQuery自作:”jQuery SameHeight Plugin”を使いたいセレクタを指定して使えるようにした

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
javascript
jquery
Height

jQuery SameHeight Plugin

先日作った「jQuery SameHeight Plugin
今まではclassにsameHeightをつけなければ使用できませんでしたが、
ブクマコメントに、「$('hoge')sameHeight();みたいに使いたい」
というのが書いてあったので、対応してみました。

今までどおり、class="sameHeight"に対応はもちろん、
ユーザー指定のセレクタにも対応するようにしました。



SameHeight

ダウンロードして使用してください。
リンク先を保存で保存できます。

ダウンロード:jquery.sameHeight-1.1.js

動作を確認したブラウザは
Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。
今回も、SafariとChromeはemなどの指定には対応できていません。
(高さがうまく確保できないですが、一応揃います。)

使い方

jQueryが無いと動かないので、ダウンロードしてきてください。
そして今回のプラグインもダウンロードしておく。

二つのjsを利用するために、head内に記述。

<script src="js/jquery.js" type="text/javascript"></script>  
<script src="js/jquery.sameHeight-1.1.js" type="text/javascript">
</script>  

サンプル

■デフォルトでの使用

<div class="sameHeight">
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
</div>
padding:20px 10px;
ダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキスト

■セレクタを指定しての使用

<div class="hoge">
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
</div>

今回はclass="hoge"に適応してみる

$(function(){
	$('.hoge').sameHeight();
});

.hogeの部分を変更することで、
その指定部分に適応されます。

padding:20px 10px;
ダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:20px 10px;
ダミーテキストダミーテキスト

なにかバグなどあればご報告ください。

ユーザー指定のセレクタ対応したけど

プログラム考えるのに、時間がかかってしまった。
どうやれば、デフォルトのセレクタで動いて、
さらにユーザー指定のセレクタでも動くか・・・
最初は簡単だろうなんて思っていたけど、
方法を知っていないと作れないなーなんてことを思った。

いろいろ試した挙句、最終的には今回のものになった。

なんとなく、もう少し記述少なくできるのかなとも思ったり。
とりあえず動いてくれてよかったです。

ちょっとまだ動作が不安定かもしれないですが、
何か不具合があれば教えて貰えたらうれしいです。

今のところpxでの指定であれば問題なく動作します。



この記事へのコメント
selector: '.sameHeight' //class='.sameHeight'



selector: '.sameHeight' //class='sameHeight'

かな。。。
Posted by とおりすがり at 2008年12月08日
>とおりすがりさん
ご指摘ありがとうございます!
そうなんですね、その説明のためのコメントアウト部分、
最初のドットがいらないのに入ってしまっていました。
エントリー内の説明で十分かなと思って直していなかったのですが、
時間のできたときにでも修正しておきます。
Posted by ハム at 2008年12月08日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

jQuery SameHeight Plugin:これまた素晴らしい。使わさせていただきます、ハムさん ・・・ 【JavaScript】
Excerpt: 次から次から、(無償の)素晴らしい ツールやサービス、そしてアドオン、プラグイン・・・ また ありがたい「jQuery」のプラグイン 発見!...
Weblog: 創るmetaboy
Tracked: 2008-11-19 16:16

背景とデザイン:素っ気ない白ベースのデザインから脱却だ ・・・ 【デザインカスタマイズ】
Excerpt:  ずっと、「白ベース」のままだったので、デザインを考える。  ただし、今回は  ...
Weblog: 創るブログ
Tracked: 2008-11-27 01:04

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。