CoffeeScriptとjQueryの連携 – Yuyak
jQueryは長ったらしいJavaScriptの構文をシンプルに書く方向へと導いてくれた物ですが、 ジャワをコーヒーに置き換えることで、よりシンプルに書くことができます。 例えば、コールバック関数 コールバック関数内でthisの中身を変更したい時、こんな書き方になると思います。 $('#foo').click($.proxy(function() { this.bar(); }, this)); あるいはこう。 var self = this; $('#foo').click(function() { self.bar(); }); ですが、CoffeeScriptだとこう書けます。 $('#foo').click => @bar() 超絶すっきりですね。 ちなみにこのCoffeeScriptは以下のようなJavaScriptにコンパイルされます。 var __bind = functi
会社ロゴマーク デザインアーカイブ
Captcha security check laquu.com is for sale Please prove you're not a robot View Price Processing
もっとシンプルかつ簡単にフォントサイズを変える「大・中・小」ボタンを実装する方法
フォントサイズを変える「大・中・小」ボタンを画像も使って実装する方法 先にエントリーした内容の別版。前のはボタン部分をimgの画像として読みこんで、そのsrcを変えることで実現をしていたのですが、なんだか有用性が低かったきがしてならなかったので、もう少しシンプルに且つ画像でもCSSのボタンでもどちらでもOKなようなスクリプトに変えてみた。 今回の仕様 先に紹介しているものは、画像リンクを変えて実装していたのに対し、今回はボタンを背景画像を利用して実装。同時に:hove時とクリックした部分につけるactiveに対して、CSSを予め用意しておく。 ちなみに、今回はCSS Spriteにて実装。 利用したソース・CSS・画像 JavaScriptのソースは最初に作ったものに、activeのclassをつけたり削除する機能をつけただけ。 ■JavaScript jQuery(function($)
jqModal | 設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-eq
使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」:phpspot開発日誌
JK - jQuery SimpleFAQ 使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」。 FAQというと内容が多くなればページが長くなって見難くどんどん使いづらくなっていきますね。 そんな場合に、項目は並べつつも、クリックした際にアニメーションで質問のすぐ下に現れるようなFAQが簡単に作れます。 質問のリスト。 とりあえず質問が並んでいるので分からないことを探してもらいます。 そんなに大規模なFAQじゃなければ質問項目を羅列しておくだけでもそれなりに使いやすいです。 クリックすればページ移動とかもなく、その場にアニメーションしながら答えが表示されます。 別ページに移動したりといったことがなく、ストレスフリーで内容が見れます。仮に答えが的外れでも戻ったりせずにすぐに他の質問に行けます で、何がいいかという個人的におすすめする点は、作り方。 作り手は、
[JS]jQueryのプラグイン33+1選 -2010年5・6月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して
[JS]わずか2行のスクリプトで実装するアニメーション機能付きスライドショー
A slide-show in 2 lines of JavaScript デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: コンテンツ（HTML） Step 2: ページめくり（JavaScript） Step 3: スタイリング（CSS） Step 1: コンテンツ（HTML） はじめに、スライドショーのコンテンツを用意します。 ここでは一つのスライドに一行のテキストを表示します。 HTML5 <!DOCTYPE HTML> <html> <head> <title>My slides</title> </head> <body> <section>This is the <em>first</em> slide</section> <section>This is the <em>second</em> slide</section> <secti
コンテンツスライダーとツールチップナビゲーションを実装するチュートリアル
ウェブサイトのトップページなどにぴったりなコンテンツスライダーやツールチップナビゲーションなどを実装したページを作成するチュートリアルをAcrisDesignから紹介します。 Create Portfolio Website With CSS/jQuery デモページ チュートリアルのポイントはダイナミックなアニメーションでスライドするコンテンツスライダーと補足情報がツールチップ表示されるナビゲーションです。 ツールチップナビゲーション マウスオーバーで補足情報を表示。 スクリプトのベースにはjQueryが使用されており、プラグインはそれぞれ下記のものが使用されています。 コンテンツスライダー Automatic Image Slider ツールチップナビゲーション Create A Floating Navigation チュートリアルではそれらのHTML/CSS/JavaScriptだ
jQuery Scrollable @ jQuery Tools - Scroll your HTML with eye candy
Õ]ysÛFÿü hʦDPã :q|$I2ÞHÔÖÔ«I4IX @ ÑLÊß}ßÑ @H¦,ek×e èãõëwüÞëCý>þ ô³×ïøsúÅ >¿üï×/Å\/² øp0 ýÞ«¬X-3¹V¥ø»¼ 2]ê}±Rã*Õj_L²^Tâx÷_µ*×â²(²Já* ñ:MKæ*ú½×¥B;PWTZæ,J ×ðèU&«y,þ&ª i%ô\"ÏÖB}¨¥N\ìBO"/V{q 0 }H«Èd>;T Ñ % ÿôù¿>~rßz½SêL 0"Ëä8SâoMú æX u)~¼üù'±Jõ\¨µ |}:ä°Í ÒRär¡Î¢ ª" Á ¹V¹>LÓˬ¥9rL,äUÏÖU¦ P¶ ÷;/Êôw¨/3` T &étß"1 õZÝþCW 03ìó=õÉÍí7¾AÏÍ Èýw0»L¼«Ô~B ; môÒùØm^
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://indigonote.com/2011/09/14/original-like-button/
http://www.designwalker.com/2009/03/form-design-2.html