2009 年 11 月 14 日 投稿者: naga3
※今回はほとんど一発ネタです。
仕事で「リアルタイムで結果を確認できるHTMLエディタを作ってくれ」という要件があり、途方に暮れました。TinyMCEかCKeditorを導入しようかとも考えたのですが、よく考えたらリアルタイムプレビューだけならJavaScript数行で実装できるじゃん、と思い自分で作ることにしました。
HTMLエディタのデモ
セキュリティ的にまずい気がするのでzipです。ローカルで実行してください。
htmleditor.zip
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(0)
2009 年 10 月 25 日 投稿者: naga3
iPhoneのようにシリーズ、しつこすぎですね。前回のように背景画像を移動する手法ではiPhoneのような拡大縮小ができないのですが、imgタグで画像を表示する方法ならば実現可能ではないかと考えてみました。具体的には、positionプロパティにabsoluteを指定してleftとtopで表示位置を変え、拡大縮小はwidth, heightプロパティをanimateすることで対応します。そのままでは拡大したときに画像があふれてしまうので、imgをdivタグで覆い、overflowプロパティをhiddenにすることによってあふれる部分を隠すわけです。
拡大縮小のデモ
画像の上でダブルクリックするとマウスの座標を中心に拡大縮小します。写真画像は
フリー写真素材 Futta.NET様の素材をお借りしています。
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(0)
2009 年 10 月 24 日 投稿者: naga3
第18回の「iPhoneのようなフリックスクロールを実装してみる」がいろんな人に好評だったので、調子に乗って第２弾をお届けします。iPhoneは画面に入りきらない大きい画像をタッチしてスライドで動かすことができるのですが、そんなやつです。
画像移動のデモ
画像の上でマウスボタンを押してドラッグすると表示領域を移動することができます。写真画像は
フリー写真素材 Futta.NET様の素材をお借りしています。
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(0)
2009 年 10 月 23 日 投稿者: naga3
数値しか入らないテキストフィールドにJavaScriptで入力支援する場合はどうすれば良いのでしょうか。プルダウンで選ばせるのが一般的だと思いますが、数値の範囲が広くなると大変です。他にも自由入力にして数値以外を禁止する、スピンボタンを実装する、などあると思いますが、今回はマウスの上下移動で増減する仕組みを作ってみました。
デモ
テキストフィールド上でマウスのボタンを押して上下に移動すると数値が増減します。移動距離が大きいほど増減量が多くなります。
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(0)
2009 年 10 月 21 日 投稿者: naga3
念願のiPhoneを買ったんです。触ってみると、文字入力やスクロールでのフリック（はじく）操作が心地よいのです。そこでjQueryならフリックによるスクロールも簡単に実装できるんじゃないかな？と思ってやってみました。そういえば昔持っていたFM-TOWNSというパソコンに「猫の手スクロール」というものが流行ってまして、これがまさにフリックスクロールそのものでした。
フリックスクロールのデモ
ウインドウの真ん中あたりでマウスボタンを押したまま上下に動かして離してみてください。ソースが必要ならば右クリックから保存してください。
flick.html（別ウインドウで開きます）
通常のページもフリックスクロール対応にしてみたかったので、ブックマークレットも作りました。このリンク（
フリックスクロール）をアドレスバーにドラッグすればjQueryを読み込んでいるページならフリックスクロールします。jQueryが入ってないページは
jQuerifyページのブックマークレットを先に実行すればたぶん大丈夫だと思います。
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(5)
2009 年 10 月 17 日 投稿者: naga3
エクセルを方眼紙のようにして書類を書く人いますよね・・・自分はエクセルを方眼紙のようにしてドット絵を描いていたタイプです。そんなわけで今回はテーブルを使ったドット絵エディタを作ってみましょう。
ドット絵エディタのデモ
16×16ドット限定です。下に一列に並んだパレットから色をクリックして塗ります。
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(1)
2009 年 10 月 15 日 投稿者: naga3
やってきました車輪の再発明シリーズ。今回はテーブルのソートです。自作なんて面倒だ、という方はcsv2tableが高機能で日本語でオススメです。
テーブルソートのデモ
列名をクリックすると、昇順・降順にソートできます。
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(0)
2009 年 10 月 11 日 投稿者: naga3
デスクトップに仮想的に貼り付けられる付箋アプリを使っている人は多いと思います。今回はブラウザ上の自由な位置に貼り付けてドラッグできる付箋を作ってみましょう。jQuery UIのモジュールであるDraggableを使うと、簡単に要素をドラッグすることが可能となります。
付箋のデモ
sticky.html
newボタンを押すと新しい付箋作成、ダブルクリックで文章編集、ドラッグで移動ができます。ソースが欲しければ右クリックからどうぞ。
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(1)
2009 年 10 月 2 日 投稿者: naga3
大量の行が並んだテーブルは見づらいものです。そんなときもjQueryを使うと、とても簡単にページ送りを実装することができます。そんなわけでよくあるページ送りを作ってみたわけですが、今回も車輪の再発明です。ちゃんとしたものが欲しければこことかここでどうぞ。
ページ送りのデモ
左右の矢印をクリックするとページ送りできます。テーブルの内容は現在ドラクエ９にハマっているのでこんなのですが、お気になさらず。
続きを読む »
カテゴリー: JavaScript, jQuery, 入門・講座 |
コメント(0)
2009 年 9 月 30 日 投稿者: naga3
jQueryの真価を発揮するためにはAjaxは避けて通れません。Ajaxというとサーバーサイドのプログラミングが必要で難しそうというイメージがあるのですが、仕組みはとても単純なものです。今回は、並んだサムネイルをクリックすると拡大画面が表示されるという、よくあるイメージギャラリーを作ってみます。
Ajaxとは何か？
言葉の意味は置いといて大雑把に言うと、Ajaxとはウェブコンテンツの遷移を「ページ」よりも更に細かいDOM要素単位で指定できる仕組みです。かなりいい加減な解説なので詳しくは検索してみてください。
続きを読む »
カテゴリー: Ajax, JavaScript, jQuery, 入門・講座 |
コメント(3)
