[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
[JS]これは楽しい！スマフォUIのように下に引っ張るとリフレッシュするスクリプト -Hook.js
スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。 Hook.js 最上部に戻ってからの上方向スクロールでもリフレッシュするようです。 普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、 Hook.jsの使い方 実装は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js"
jQueryでHTML5の独自データ属性（data Attributes）を扱う
jQueryでHTML5の独自データ属性（data Attributes）を扱う HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。 この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。 投稿日2011年07月01日 更新日2011年07月01日 data属性のマークアップ data属性は「data-」以降に文字列を指定することで設定できます。 たとえば「data-role」に「hoge」という値を設定する場合はマークアップは次のようになります。 html <div data-role="hoge">太郎</div> jQueryでこの「hoge」という値を取り出すには、dataメソッドの
フリック動作でページ遷移させる | nagachan.net
スマートフォン等で、左右フリックでページ移動させてみました。 フリックのイベントが取得できれば、簡単です。 [デモページ] ※スマートフォンでご覧ください。下のQRコードからも移動できます。 フリックと言っても「フリックした」というイベントはなく、 画面をタッチした タッチしたまま指を動かした 画面から指を離した という3つのイベントにわかれていて、それぞれのイベント発生時に処理を行うようにします。 動作の概要 画面を左右にフリックして、次のページが存在していたら移動します。 フリック時にコンテンツも指に追随してスライドし、一定の移動距離以下であれば元の位置に戻ります。 JavaScriptファイルは共通化したいので、HTMLファイルに移動先のURLが入った変数を用意しました。変数が存在していれば、フリックの反応とページ遷移を行います。 JavaScript ※jQueryを
親要素のみ削除する方法[jQuery1.4系版]
結構前のエントリーで『jQueryメモ：親要素だけ消すってどうやるんだろう？』という内容を書いたのですが、最新版のjQueryではもっとシンプルな方法で親要素のみ削除できるようになったので、再度試しつつご紹介します。 今回の各でもについて 今回のデモは下記のHTMLをそれぞれ利用します。 利用するHTML <a href="#damy"><span>サンプルデモ</span></a> デモ５だけは子要素にSPANがないものを利用しています。 このうちAタグのみ削除することを目的とします。リンクが外れていたら成功。 プラス、中のSPAN要素には、中のテキストをアラートするクリックイベントを付けておいて、今回の親要素削除後も動作するかをチェックできるようにしてみます（spanを子要素に持たないデモはこのイベントは付けていません。） 子要素(SPAN要素へのイベント) $('span','.pr
![親要素のみ削除する方法[jQuery1.4系版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/32ea6dcbe5d9f2a3bc69fb3f023dc0dc91890670/height=288;version=1;width=512/https%3A%2F%2Fh2ham.up.seesaa.net%2Fimage%2F201003171.png)
サンプルで学ぶjQuery：(X)HTML/CSSを操作する (2/7)
2．(X)HTMLの変更と取得 text() ではテキストを操作できましたが、(X)HTMLのタグを含むテキストを操作したい場合は、html() という命令を利用します。 ■(X)HTMLの変更 html()を利用して(X)HTMLを変更するには、html(...)の内側に変更後の(X)HTMLを記述します。 ▼サンプルコード（スクリプト部分） $("p#first").html("<strong>変更後</strong>"); 上記のサンプルコードを実行すると、id属性にfirstが設定されているp要素の内容が、「<strong>変更後</strong>」に変更されます。 ▼サンプルコード（元の(X)HTML部分） <p id="first">変更前</p> ▼実行結果（実際のWebページ） <p id="first"><strong>変更後</strong></p> ■(X)HTMLの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
