jQuery UI Touch Punch - Touch Event Support for jQuery UI
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
画像を使ったジグソーパズルを作ってみよう - jQuery入門 - ポンクソフト
変数selには現在選択されているピース番号が入ります（どれも選択されていないときは-1）。配列posは、少し分かりにくいですが、添え字のピース番号の現在位置が入ります。例えばpos[0]→12だった場合、完成したときに左上にあるべきピースが、現在は左下にある、ということになります。 ピースのシャッフル for (var i = 0; i < 16; i++) pos[i] = i; まず初期値として、完成形で配列posを作ります（添え字が中の値と等しい）。 for (var i = 16; i > 0; i--) { var j = Math.floor(Math.random() * i); swap(i - 1, j); } その後、配列posの中身がバラバラになるようにシャッフルしています。「Fisher-Yates」というアルゴリズムを使っていますので、詳しくはググってみてください
CSS 画像マスク | Shinta's Site
CSSで 透過のPNG画像をマスクとして写真に張りつけてみます。 HTMLでマスクとなるタグと画像タグを作成 <div id="photo"> <span class="photo-mask"></span> <img src="image/mask-image.jpg"/> </div> 画像とマスクを含むタグに対してスタイルを設定（ポジション：relative） #photo { position: relative; display: block; width: 350px; height: 350px; } マスクとなる spanタグに対してスタイルを設定（ポジション：absolute） #photo .photo-mask{ display: block; position: absolute; top: 0; left: 0; width: 350px; height: 350
タッチデバイスを指で快適に操作させるために
タッチデバイスのUIの特徴とその癖から、HTML5のWebアプリでUXを実現するポイント、Webでのタッチイベント仕様を見てみよう。 前編のタッチUXを実現する7つのポイントでは、タッチデバイスの特徴と、その上でタッチUXを実現する7つのポイントについて説明しました。後編では、そのようなUXを実現するためにWebアプリでのタッチ仕様や、実装のポイント、今後の動向など、より技術的な面から解説します。 W3Cによるタッチイベントの標準化 Webアプリケーション向けのタッチイベント仕様はW3Cによって標準化が進められていて、執筆時（2012/10/20 現在）の段階で、勧告候補となっています（最新のものはW3Cの明示する「Touch Events version 1」を確認してください）。まだ仕様は確定していませんが、最新のiOS、Androidのブラウザでほぼ仕様通りのものが使用できます。タッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
