dfFlexGrid.jsを使うと、制作したサイトのグリッドやフォントサイズの変更ができ、変更したスタイルをクッキーに保存することができます。
今回はこのdfFlexGrid.jsのデモページを見ながら簡単に解説していきます。
デモページ　(別ウィンドウで開きます)

dfFlexiGrid.jsのデモページ

まずはdfFlexiGrid.jsに触れてみましょう

デモページのヘッダー部分のメニューをクリックすると、ページ全体が動的に変化します。特にグリッドの変更時は気持ちのいいスムースです。まずは色々と触って動きを確かめてみましょう。
各メニューの昨日は以下の通りです。

  • Toggle Left
    左側のカラムの表示・非表示
  • Left Accordion
    左側のカラムをアコーディオン化
  • Toggle Right
    右側のカラムの表示・非表示
  • 800px
    ページ全体の幅を800pxに変更
  • 1000px
    ページ全体の幅を1000pxに変更
  • 100%
    ページ全体の幅を100%に変更
  • +Font、-Font
    フォントサイズの変更

導入のやり方

まずはdfFlexGrid一式をダウンロードしましょう　＞　Deziner Folio

ファイルの中身は「dfFlexiGrid.html」「dfFlexiGrid.css」「dfFlexiGrid.js」となっていて、デモページの構成ファイルです。
まずはサーバーに「dfFlexiGrid.css」「dfFlexiGrid.js」をアップロードして、サイトの<head>～</head>内に下記の記述をしてください。

<script type="text/javascript" src="dfFlexiGrid.jsへの相対パス"></script>
<link rel="stylesheet" media="screen, projection" href="dfFlexiGrid.cssへの相対パス">

ブログなんかで使う場合には絶対パスで指定してあげましょう
※下記はMTの場合

<script type="text/javascript" src="<$MTBlogURL$>dfFlexiGrid.js"></script>
<link rel="stylesheet" media="screen, projection" href="<$MTBlogURL$>dfFlexiGrid.css">

ソースを見てもらうと上記CSSとjsファイルを読み込んでいる以外はいたってシンプルです。下記の部分に注目してみましょう。

<a href="#" onclick="mygrid.toggleLeft();">Toggle Left</a>
<a href="#" onclick="mygrid.toggleBlock('block1');">Left Accordion</a>
<a href="#" onclick="mygrid.toggleRight();">Toggle Right</a>
<a href="#" onclick="mygrid.resize(700,'px');">800 PX</a>
<a href="#" onclick="mygrid.resize(1000,'px');">1000 PX</a>
<a href="#" onclick="mygrid.resize(100,'%');">100%</a>
<a href="#" onclick="mygrid.resizeFont(0.05);">+ Font</a>
<a href="#" onclick="mygrid.resizeFont(-0.05);">- Font</a>

	:
	:
	:

<a class="accord_toggle" href="#" onclick="mygrid.toggleBlock('block1');">TOGGLE(+/-)</a>

上記ソースの上の6列のaタグは各機能を実行するメニューの部分になります。
下のaタグはレフトカラムのアコーディオンを実行する為のタグです。

dfFlexGridはIE6, 7, Fx1.5, Op9.1, Safari3のブラウザに対応しています。

自由にデザインしていい場合なんかは試してみてもいいかもしれませんね。




tags:

    • トラックバックURL

    このエントリーのトラックバックURL:
    http://www.cssmake.com/mt/mt-tb.cgi/13

    コメント

    コメントする

    (初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)


    画像の中に見える文字を入力してください。

    Main | Next »
    pagetop