BPS株式会社開発ブログ Beyond Perspective Solutions LTD. » HTML

JQuery UI Tabsでタブ表示

shibachan — Fri, 27 Aug 2010 09:34:48 +0000

こんにちわ芝原です。

始めてのJavascript関連の投稿です。
お手柔らかにどうぞ。

たくさんのコンテンツをすっきり表示させるための方法として、タブという手法がよくつかわれると思います。
今回は、この便利なタブ表示をJQueryを使って実現する方法を解説します。
動作はこんな感じになります。
http://jqueryui.com/demos/tabs/default.html

必要なファイルのダウンロード

jquery本体とui.core.js、ui.tabs.jsが必要です。

こちらから簡単にダウンロードできますが余計なファイルも多分に入っているので、こちらからファイルを選択してダウンロードしてもいいと思います。

スクリプトの読み込み

必要なファイルを読み込みます。
head内に記述するのが一般的です。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/ui.core.js"></script>
<script type="text/javascript" src="/path/to/ui.tabs.js"></script>

HTMLの構造

<div id="tabs">
    <ul>
        <li><a href="#tab1">タブに表示する文字</a></li>
        <li><a href="#tab1">タブに表示する文字</a></li>
        <li><a href="#tab3">タブに表示する文字</a></li>
    </ul>
    <div id="tab1">
        タブの中身
    </div>
    <div id="tab2">
        タブの中身
    </div>
    <div id="tab3">
        タブの中身
    </div>
</div>

タブの設定

<script type="text/javascript">
    var $tabs = $('#tabs').tabs();
    $tabs.tabs('select' 1); // 2番目のタブを選択状態にする
                            // デフォルトでは1番目のタブ
</script>

たったこれだけでタブが実装できました。

さらに詳しい情報を知りたい方は、公式ドキュメントをご覧ください。

Firebugをクリーンに改造する

baba — Thu, 08 Jul 2010 02:36:33 +0000

ググれば出てくるようなネタではありますが。

Firebugの最大の欠陥は、見た目があれなことです。

開発者の中には、あれが大の苦手の人もたくさんいると思います。

# 私は先週薬局に駆け込んでバルサンしてきました。
# というか良く思うんですが、なんでバルサンとかの製品にイラストを描くんでしょうね？買う人の気持ちを何も分かっていない。

ということで、しっかりと消しておきましょう。

このZIPファイルでプラグインを上書きすれば、すべてOKになります。1.5.4で確認。
clean_fire

インストール済みの場合は、以下

C:\Users\***\AppData\Roaming\Mozilla\Firefox\Profiles\
***.default\extensions\firebug@software.joehewitt.com

未インストールの場合は、XPIファイルをダウンロード→拡張子をZIPにして解凍して、上書きして下さい。

これで再起動すれば、快適な開発ライフを堪能できますね！作業効率倍増です。

快適なHTML/CSSライフを！

Windowsのアイコンキャッシュがたまに殺人的な効力を発揮することがあるので、
C:\Users\***\AppData\Local\IconCache.db
を消したりしておいた方が気休めになります。

jQuery.formとJSONView

baba — Thu, 17 Jun 2010 00:43:14 +0000

JSONViewは、Firefoxで application/json なコンテンツを綺麗に表示するプラグインです。
とても便利ですね。

ところが、jQuery.formプラグインなどと組み合わせると、不具合を起こすことがあるので注意が必要です。

一般的なajaxでは、

$.ajax({
  url: 'hogehgoe',
  success: function(data, dataType) {
  }
});

といったやりかたをしますが、このときは特に問題ありません。

しかし、jQuery.formで $(’form’).ajaxSubmit() を使う場合、内部的には$.ajaxは使用されていません。
XMLHttpRequestでは画像データ等のmultipart/form-dataを送信できないため、ダミーのiframeを作って、そこをターゲットにformの送信を実行しています。

//jquery.form.jsの内部コードのイメージ
var iframe = '<iframe id="hoge" onload="irame-onload"></iframe>';
$('form').attr('target', 'hoge');
$('form').submit();

これで、ajaxSubmitをすると、結果がiframeに入ります。
iframeのonloadイベントで、内部のinnerHTMLを見て、結果を呼び出し元に返す処理を行っています。

ここで、iframeの中身がどんな値になるかは、ブラウザの実装依存です。
一般に、プレインテキストやJSON形式が渡ってきたとしても、DOMツリーを構築するためにbodyタグまでは作ってしまうようです。

良くあるパターン

<html>
<head></head>
<body>{"result":"これが結果です"}</body>
</html>

jquery.formプラグインは、ブラウザがbodyタグの中に直接値を入れるか、またはpreやtextareaに値を入れることを期待しています。

しかし、JSONViewを使うと、以下のような綺麗なHTMLを勝手に作ってくれてしまいます。

<html>
<head></head>
<body>
<doctype html="">
  <div id="json">
    {
    <ul class="obj collapsible">
      <li><span class="prop">result</span>: <span class="num">0</span></li>
    </ul>
    }
  </div>
</doctype>
</body>

人間様が見るには良いですが、これではjquery.formプラグインが認識できません。
そんなわけで、doctype html… といった値を丸ごとJSONパースしようとして、エラーになってしまいます。

解決策は、Content-Typeを変えるか、jquery.formを改造するくらいしかありません。

Content-Typeの変更が、一番みんなハッピーになれるはずです。

これに気づかず、JSONViewを入れると動かなくなるWebサイトがあるかもしれませんね。

Google Mapsをサイトに埋め込む、iframeでの引数

junya — Wed, 16 Jun 2010 14:12:52 +0000

Google MapsをWebサイトにiframe埋め込む際に
Google Mapsのサイトでカスタマイズさせてくれるのはサイズと尺度、初期位置くらいです。
せっかく埋め込むのなら色々とカスタマイズしようと思ったのですが
日本語のリファレンスがなかなか見当たりませんでした。
なら自分でまとめてしまえ、という事で動作確認の取れた引数のみ、まとめました。

まず、Google Mapsをサイトに埋め込む方法から。

１、http://maps.google.co.jp/ にアクセスし、住所を検索
２、画面右端の「リンク」をクリック
３、出てきた窓の「埋め込み地図のカスタマイズとレビュー」をクリック

４、枠のサイズを選択、カスタムを選ぶと好きなサイズに出来ます
５、プレビュー画面でズームや位置、地図のタイプ(地図や衛星写真等)を感覚的に決めます。
６、HTMLをコピーし、サイトの埋め込みたい箇所に貼りつける。

これでとりあえず、表示されます。次はカスタマイズの時間です。

※今回は引数を分かりやすくするため、改行してありますが
改行するとエラーが出る可能性があるので、使用時は１行にしてください。

<iframe
    width="600"
    height="350"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="http://maps.google.co.jp/maps?
        <!-- ここから引数 -->
    <!-- 目的別 q → デフォルト  d → 乗換案内(output=embedがない時のみ有効)-->
    f=q&
    <!-- マップ内仕様言語 ja → 日本語  en → 英語-->
    hl=ja&
    <!-- 緑の矢印マーカー座標(URLエンコードで入力すれば日本語も可) -->
    q=35.508591,139.4427722&
    <!-- マップタイプ  m → マップ  k → 衛星写真 p → 地形  e → Google Earth-->
    t=m&
    <!-- オーバービュー表示非表示 0 → 非表示  1 → 表示(output=embedがない時のみ有効) -->
    om=0&
    <!-- URL内に日本語を入れる際の文字コード -->
    ie=UTF8&
    <!-- 出力文字コード -->
    oe=UTF8&
    <!-- 地図中心座標 -->
    ll=35.508191,139.4440022&
    <!-- 尺度（0～23、値が小さいほど縮小する） -->
    z=17&
    <!-- この引数があるとmapのみを枠に埋め込みます -->
    output=embed
"></iframe>

これを実行するとこうなります。

上記以外の引数を発見した方はコメントを残していただけると嬉しいです。

HTML/CSS floatを無駄なく解除する方法

junya — Mon, 14 Jun 2010 12:21:37 +0000

現在はHTML、CSSコーディングの知識を深めようと思い勉強中なのですが
最近知った、感心したものをひとつ、ご紹介したいと思います。

私は普段、floatを解除する際はCSSにて

    .clear {
        clear:both;
    }

を用意して置き、

    <div class="float_a"> ～～～ </div>　/*float要素a*/
    <div class="float_b"> ～～～ </div>　/*float要素b*/
    <div class="clear"></div>　/*float解除*/

という手法を取っていましたが、空のdiv要素をコードの中にいくつも配置するのは美しくありません。
もっと良い方法はないかと思い他の社員の方に聞いてみた所、こんな方法もあるよと教えてくださいました。

CSSにて

    /*IE7以外のモダンブラウザ向け*/
    .clearfix:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }

     /*IE7およびMacIE5向け*/
    .clearfix{ display:inline-block; }

    /*IE6以前向け*/
    /*Hides from IE-mac\*/
    * html .clearfix{height:1%;}
    .clearfix{display:block;}
    /*End hide from IE-mac*/

そして

    <div class="float_box clearfix"> /*floatの親要素＋clearfix*/
        <div class="float_a"> ～～～ </div>　/*float要素a*/
        <div class="float_b"> ～～～ </div>　/*float要素b*/
    </div>

と記述することにより、親要素が閉じた瞬間にfloatが解除されます。

一度覚えてしまえば何てことはないですし、状況によっては前者の方が良い場合もありますが
選択肢が増えるという事は、それだけきれいにコードが書けるようになるという事です。
たくさんの知識を増やして、常にきれいなコードが書けるよう心がけたいですね。

dojoの細かいTIPS

baba — Sat, 22 Aug 2009 03:10:09 +0000

dojo使いには当たり前かもしれない、ちょっとしたTIPSです。

(1)dojo.byId
dojo.byIdは、HTMLのエレメントを渡すと、そのまま帰ってきます。
つまり、dojo.byId(dojo.byId(’hoge’)); とやっても正常に動作します。

なので、dijit等で「ノードのIDを渡す」と書かれているところに、直接エレメントを渡しても、たいてい上手く動きます。
動的に要素が増えてIDを付けにくい場合などに、ちょっと役立ちます。

(2)dojo.query
dojo.queryは、CSSのセレクタで要素を選択できる便利なものです。
この第2引数にHTMLのエレメントを渡すと、その子要素のみ検索対象になります。

var img = dojo.query('img', hogeNode)[0];

基本かつ必須な機能のはずなのに、なぜか解説サイトにあまり書いていないという。。

(3)dojox.layout.ResizeHandle
ドラッグ＆ドロップはサンプルがたくさんあるのに、リサイズはなぜか少ないですね。
dojoはリサイズも簡単なので、以下にサンプルを載せておきます。

<html>
<head>
	<script type=”text/javascript” src=”dojo/dojo.js”></script>
	<script type=”text/javascript”>
		dojo.require(’dojox.layout.ResizeHandle’);
		dojo.addOnLoad(function() {
		var handle = new dojox.layout.ResizeHandle({
		activeResize:true,
		minWidth:30,
		minHeight:30,
		targetId: ‘box’
		}, dojo.byId(’handle’));
		});
	</script>
	<link rel=”stylesheet” href=”dojox/layout/resources/ResizeHandle.css” />
</head>
<body>
	<div id=”box” style=”position:relative; background:yellow;”>
		<p>リサイズできます</p>
		<div id=”handle”></div>
	</div>
</body>
</html>

↓動作サンプル

リサイズ可能

IE7でmarginが消える

baba — Thu, 25 Jun 2009 14:08:07 +0000

たぶん既出ネタですが、ふと見つけたので一応。
IE7で、marginが消える場合があります。

再現条件は、
・paddingが0以外のブロック要素Aに囲まれている
・Aの最初の子要素(空白・TAB・改行以外)がブロック要素Bである
・Bにheightとmarginが指定してある(たぶんhasLayoutがtrueになるならheight以外でも該当)
こんな感じみたいです。

これらを満たすと、Bのmarginが無視されます。
シンプルな再現HTMLは以下の通りです。

test

こんにちは

ハロー

これを開くと、IE7以外では「こんにちは」と「ハロー」の左端はそろいますが、IE7では「こんにちは」が左に寄ってしまいます。

解決するには、Bを先頭子要素でなくせばいいので、適当なコメントを入れます。

こんにちは

ハロー

やっぱりIE7は地雷ですね。
自動更新でIE8が入るようになったのがせめてもの救いです。

IE7でposition:relativeの要素が重なるバグ

baba — Tue, 03 Mar 2009 08:22:52 +0000

IE7で、JavaScriptを使って動的に要素を表示・非表示した場合、要素が重なってしまうことがあります。

実験ページ

IE7だと問題が再現し、IE8やFirefoxは再現しません。また、冒頭のDOCTYPE宣言を外してQuarksモードにしても再現しません。
IE7でのみ、Showボタンを押すと、文字が重なってしまうはずです。

不思議なことに、21行目のbackground指定を外すと、再現しません。
また、21行目の

開きと22行目の

開きの間に「スペース・TAB・改行以外の何か(コメントでも可)」を入れると、再現しません。
22行目の[height:2em] は、hasLayoutがtrueになれば何でもOKです。

まとめると、
・ブロック要素Aがある。
・Aの最初の子要素はブロック要素Bである。
・AはCSSで背景がnone以外に指定されていて、[hasLayout=false]である。
・Bは[position:relative] であり、なおかつ[hasLayout=true]である。

これらの条件を満たす場合、「Aの前にある要素の高さが変わり、AのY座標が変更になっても、BのY座標は再計算されない」というIE7独自のバグと言えそうです。

DebugToolbar等で位置の再計算を行うと、正しい位置に移動します。

おそらく計算順序にバグがあるのだと思います。position:relativeを使うときは気をつけましょう。

BPS株式会社 開発ブログ Beyond Perspective Solutions LTD. » HTML