※スマホ対応はしてません。

タグ: コード付き

JavaScriptで簡易テンプレートエンジンをつくる(JavaScript おれおれ Advent Calendar 2011 – 23日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 23日目

昨日のデータ埋め込みと一昨日の .replace()に関数を与えるやつを組み合わせて、テンプレートエンジンみたいなのを作成する事ができます。

Ajax/XHRでデータを取得して、その結果を画面に出力するような場面を想定しています。

  • テンプレートはscript[type="text/x-mytemplate"]とかでHTML中に書く
    • キーワードは{#xxx}の形式
  • キーワードと値の組み合わせをひとつのオブジェクトにまとめて、関数に渡す

HTML

まずはテンプレートと、出力先。

<ul id="mylist"></ul>
<script id="mytemplate" type="text/x-mytemplate">
<li><a href="{#url}">{#title}</a> ... {#description}</li>
</script>

これをHTML中に埋め込んでおきます。ここまではHTMLのコーダーさんにお願いしても大丈夫。

(さらに…)

FAQページで使えそうな、dtクリックでdd展開するスクリプトを書いてみた。

カテゴリー: JavaScript, Web

そういうのが欲しいという人がいたので。

@Stocker_jp @weboxes ありがとうございます。dtクリックでdd展開するアニメーション付きのjQueryのコード欲しいですwFri Aug 05 14:53:54 via YoruFukurou

さっくり書いてみました。

デモ

例によってjsdo.itです。

dtクリックでdd展開するアニメーション付きのjQueryのコード – jsdo.it – share JavaScript, HTML5 and CSS

解説

(さらに…)

CSSだけでMacのDockみたいなのを作ってみた。

カテゴリー: CSS, Web

OS X Lionが登場しましたが、いかがお過ごしでしょうか。僕はまだ入手していませんが、人に見せてもらってちょっと欲しくなりました。

まあそれは置いておいて、MacのDockって便利ですよね。そのDock風のユーザー体験を、JavaScriptなしで作ってみました。

  • Chrome, Safari … 一番綺麗に動きます。
  • Firefox … 鏡面反射がない以外は十分に動きます。
  • Opera … Firefoxと同程度なのですが、素早く動かしたときに何故か描画が崩れるようです。
  • IE … お察しください。

追記 : Firefox対応版を作って下さった方がいます! (20:34)

デモ

jsdo.itをご覧ください:

もっとそれっぽく forked: CSSだけでMacのDockみたいなの – jsdo.it – share JavaScript, HTML5 and CSS

コードと解説

jsdo.itの方をご覧ください。

装飾的な部分を除いた、動き自体はこちらのサンプルをどうぞ:

要点をまとめると、

  • マウスを乗せたら大きくする
  • 大きくするときはアニメーションする

これだけです。

ただし文字サイズが変わるとベースラインが変化してしまい、ガタガタしてしまうので、各項目はdisplay:table-cellとして独立させる事にしました。これは項目の内容としてちゃんと画像を用意しておけば防げたかもしれません。

よければ画像を用意して、上記コードをforkしてみてくださいな。