selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」:phpspot開発日誌
mtkopone/zelect GitHub selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」 既存のselectは初期のブラウザで実装されたもので、大概古いインタフェースなわけですが、標準ではあのままです。 これを簡単にjQueryプラグインで、インクリメンタル検索対応にして入力を楽にできます。 選択肢が多すぎる場合なんかに便利 関連エントリ selectボックスをiPhoneのOn/OffスイッチっぽくできるjQueryプラグイン「switchy」 selectボックスをリッチかつクールにできるjQueryプラグイン「jAutochecklist」 selectボックスを超カッコよくするjQueryプラグイン「Chosen」
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
HTML5 × CSS3 × jQueryを真面目に勉強 – #7 jQueryのセレクタAPIについて詳しく | DevelopersIO
そんな訳で、普段何気なく使っているjQueryですが、そのセレクタAPIについて多少は知っておいたほうが良いよなということで、いくらか調べてみました。けっこう地味な内容なので、「へー、そんな風になってるんだぁ…」と軽く読み流していただければと思います嘘です。割と大事な内容なので、しっかりと把握しておくのがよろしいかと思います。 はじめに - jQueryのセレクタAPI jQueryでは、$('#hoge .fuga');というようにCSSのセレクタを用いてHTML要素を取得します。あまりにも便利な機能で普段意識することはありませんが、内部ではgetElementById();といったブラウザのネイティブAPIを駆使したり、JavaScriptゴリゴリのメソッドを呼びまくって指定どおりの要素を取得してきているわけです。こういった機能のことをセレクタAPIと呼びます。 セレクタAPIの内訳
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも（ｏ´ω｀ｏ）ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素（DOM）を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング（「伝達」とでも言うのかな）です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;
jQueryについての所感
昨今jQueryについての所感とつきあい方を考える はじめはPHPとa-blog cmsがメインだったこのブログも、いつの間にかJavaScript（jQuery）とご飯レシピブログという謎な方向への珍走を遂げています。 そんな中、個人的にjQueryとのつきあい方について色々聞いたり思ったりで、だらだらとアウトプットしてみます。オチはつきませんでした。ﾀﾞﾗｧ...('A`) ってこれ、今年の3月に大半書いていて、なぜか8月も末の今頃に加筆修正かけたので色々アレなところあったらごめんなさい！！！もったいないから公開させてください、、てへぺろ(・ω<) なぜjQueryなのか jQuery周辺のノリ（何でもjQuery・コスト感なくjQuery・jQueryスニペット信仰）などに、正直ネガティブな感情抱くこともありますが、素直な気持ちで見ればjQueryはとても効率的だと思います。Web上
Four ways to do Pub/Sub with jQuery 1.7 and jQuery UI (in the future)
#Four Ways To Do Pub/Sub With jQuery and jQuery UI (in the future) Between jQuery 1.7 and some of work going into future versions of jQuery UI, there are a ton of hot new ways for you to get your publish/subscribe on. Here are just four of them, three of which are new. (PS: If you're unfamiliar with pub/sub, read the guide to it that Julian Aubourg and I wrote here http://msdn.microsoft.com/en-us/
WebデザイナーのためのJavaScript、jQueryの勉強法 - DESIGNMAP
まったくのプログラミング初心者の方を対象にJavaScriptの独学方法をのべていきたい。今回とりあげるJavaScriptの勉強法はあくまでWebデザイナー向け（もしくはフロントエンドエンジニア向け）なので、Node.jsのようなサーバーサイドJavaScriptはとりあげていない。 JavaScriptとjQueryをどちらから勉強するべきか。今回はあえて邪道とわかっていながらもjQueryにふれるという順番をとった。本来は、JavaScriptの基礎をしっかりおさえてからjQueryにすすむのが正統である。今回はトップダウン方式で実践にふれてから、基礎に戻る学習法を提案したい。 jQueryはJavaScriptを楽に開発するためのライブラリで、jQuery自体はJavaScriptのコードでできている。最初にいきなりjQueryにふれて、HTMLを動的に操作する（これをDOM操作と
jQuery Knob
Demo jQuery Knob canvas based ; no png or jpg sprites. touch, mouse and mousewheel, keyboard events implemented. downward compatible ; overloads an input element. Example <input type="text" value="75" class="dial"> <script> $(function() { $(".dial").knob(); }); </script> Options Options are provided as attributes ‘data-option’: <input type="text" class="dial" data-min="-50" data-max="50"> … or in
Raty | A Star Rating Plugin - Washington Botelho
Wow Great, thank you that's what i was looking. glad to know that it works perfectly for dynamic data.
Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました
いつぞやの飲み会で、 これだけウェブの技術が進化しているのだから、もっとオシャレなエロサイトがあってもいいんでないかい？ << という話になりまして。 だけどどうせ作るんならということで、Rails3 と jQuery を使って結構マジメにつくってみました。 （※大人の事情により、リンクはやむなく削除しました） 当初はエロにオシャレは必要ないのかなーと思ったときもありましたが、いざつくってみると、やっぱり選べるならオシャレなやつの方ががいいよね、という結論に落ち着きました。 今回つくったのは試験的なものなので 90日間限定でしか公開しないつもりですが、日本のエロサイトが今後もっとオシャレに発展していくきっかけになってくれたら嬉しいです。 以下、サイトのコンセプトや使っている技術についてまとめてみます。 **Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました 1
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
イモムシでjQuery入門 | 第1回デザイナーがイモムシで覚えるjQuery
こんにちは。kamecoです。 androidアプリをhtmlベースで作ったりしています。 それができるのも、jQueryの力でjavascriptをちょっと書けるようになったから。 ということで、jQueryを覚えよう！ 電卓で入門とか色々考えたのですが、 私が覚えた方法で。。 myベストイモムシを作ろう！！！！ とりあえずあなたのイモムシも用意しよう。 ダウンロード とりあえず名前を付けると愛着がわきます。 うちの子は「クロスケ」です。 ↑クロスケ。かわゆす。 練習で書いてた時から書き換えてないので、挙動がおかしいのは見逃してください。。 つまめます。動きます。顔変わります。などなど。 クロスケのjsもブログを書きながら新調してあげようと思います。 イモムシのhtml解説 これから使うhtmlですので構成や呼び出しているものを一応確認しておきます。 cssやh
Essential JavaScript And jQuery Design Patterns - A Free New Book
Essential JavaScript And jQuery Design Patterns - A Free New Book November 14, 2010 Hey guys. Today I'm happy to announce the release of a free book I've written called 'Essential JavaScript & jQuery Design Patterns For Beginners'. Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal. I wanted to write thi
無料で読めるJavaScriptの電子ブック7選 - memo.yomukaku.net
無料で公開されているJavaScriptに関する電子書籍を4冊紹介します。 JavaScriptに触れることが初めてで、JavaScriptを学びながらjQueryも使いたい方にはjQuery Fundamentalsがお薦めの1冊。mastering node.js http://visionmedia.github.com/masteringnode/ expressやjadeの開発者としてnode界で著名なTJ Holowaychukさんが書かれたnode.js本。 nodeのインストール方法から始まり、各APIの解説が書かれています。 StreamのAPIの解説のところ以降は、目下のところ書きかけになっています。 pdf、epub、mobi、htmlの4つのフォーマットで公開されています。 githubにソースも置かれています。 jQuery Fundamentals http:/
nodejsでjQueryスクレイピング - エウレカ技術部
node社内ネットウォッチャーの @mizchi です。今日はnode.jsでスクレイピングします。 一般的に言うスクレイピングとは、HTMLから自分がほしい箇所だけ抜き出すことです。それを自動更新でブン回して差分を確認したり、グラフにしたりするわけです。 node.jsでスクレイピングすると何が嬉しいんでしょうか？ それはベースがjavascriptだから、みんなが大好きなjQueryが使える！ってこと ライブラリのインストール今回使うのは、request、jsdom。 URLをリクエストするrequest、htmlをブラウザと同じDOMエレメントのように扱えるjsdomという役回りです。 npm install request npm install jsdom jsdomでjQueryを読み込んで、そのjQuery化されたオブジェクトを返します。 実行指定したURLのjQueryオ
jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com
jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released （リリース記事） Version 1.7 – jQuery API （公式ドキュメント、1.7で変更があったもののみ） 1.7 all tickets – jQuery Core – Bug Tracker （1.7の全チケット） リリース記事の翻訳じゃないです。 主な変更点 個人的に気になったものをピックアップしてみますよ。 既存の .bind()や .live()等に置き換わる .on(), .off()を追加 .bind(), .delegate(), .live()が統合されました。（これらも引き続き使用できます。） →詳細後述します。 toggleと.stop()の連携を改善 toggle系と組み合わせた際におかしくなってしまうのが改
jquery-mockjax 使えよ色々と捗るぞ - present
jQuery や Backbone.js で UI を開発していて面倒なのが、サーバー側の API を呼び出す部分の実装です。呼び出したい API が既に実装されていないと、細かいところまで作り込めません。 あと、上手く動かなかったときも面倒です。原因がクライアント側ならすぐ直せますが、サーバー側だった場合、サーバー側のコードを修正して、テストまでしないといけません。効率悪いですよね。 できれば、クライアント側の開発はクライアント側だけで完結したい。さらに欲を言えば、最終的にサーバー側の API を呼び出すように修正するとき、出来るだけ少ない修正で済むようにしたい。 API 呼び出しを抽象化してダミーの処理と差し替えたり、jQuery.ajax を上書きしたり、色々工夫して最後に行き着いたのが『jquery-mockjax』。 appendto/jquery-mockjax · GitHu
jQuery.Deferredって何
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ このブログの内容は弊社が運営する有料サービス、CodeGridにてより詳しい内容をご参照いただけます（宣伝） jQuery deferredの使い方 - deferredの基本 | CodeGrid === jQuery1.5から追加された機能。でも全然使ってないので調べた。 jQuery1.5からはdeferredオブジェクトっていうものが登場。 これは、「イケてるキュー（待ち行列）の仕組み～遅延もあるよ～」みたいなものです・・・ 説明がムズイけれどもなんかそんな感じなのです。今までは function fetch(callback){ doAjaxThings('somefile.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting