そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
WebページをRetina対応させるテクニック～実践編
WebページをRetina対応させるテクニック～実践編：jQuery×HTML5×CSS3を真面目に勉強（5）（1/3 ページ） 前回のWebにおけるピクセルの基本的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。 前回（WebページをRetina対応させるテクニック～基礎知識編）はWebにおけるピクセルの基本的な話をしました。今回はそれを踏まえた上で、Retinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介します。 CSS Spriteで複数の解像度に対応 最も原始的な対応方法です。一般的なPCディスプレイと同じ要領で作成した画像をRetinaディスプレイに使用すると、にじんだように表示されてしまいます。デバイス上では同じサイズでも、使われているピクセル数のタテ・ヨコが2
[jQuery]要素の高さ・幅を取得する | バシャログ。
iPhone5sはどうせすぐには手に入らなくてもよいとおもいゴールドを予約したtanakaです。 今日はjQueryでブラウザに表示されている要素の高さや幅を取得する方法についてまとめます。 …といってもjQueryユーザーであれば$(...).height(), $(...).width() でOKってことはご存じかと思います。 それも紹介しますが、それ以外の方法についてもまとめます。 $(...).height(), $(...).width()について DOM要素の高さ、幅を取得するメソッドです。弊社ウェブサイトのホームにある以下の要素で値を取得してみます。 $('div.info:first').height() // => 120 $('div.info:first').width() // => 200 上記のような感じで取得できます。ChromeのDeveloper Tool
![[jQuery]要素の高さ・幅を取得する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
tableの列ごとに任意のキーワードでフィルタリングできる軽量jQueryプラグイン・Multifilter
tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。 tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。 こういうの。デモを用意しました。 尚、データはなんちゃって個人情報を利用させて頂いています。 $('.foo').multifilter()使い方もシンプル。上記のようにtableを指定。 <div class='filters'> <div class='filter-container'> <input autocomplete='off' class='filter' name='名前' placeholder='名前' /> </div> <div c
Bootstrapに便利な機能を追加できるjQueryプラグインまとめ
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
デザイナーさんの為のjQuery講座 Lv.2 [動かす編] | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お盆休み中はリア充でした。 鳥よしです。 前回、記事を書いた際にテキストの編集じゃモチベーションが上がらん！との意見を頂いたので、今日は前回のおさらい(デザイナーさんの為のjQuery講座Lv.1)も兼ねて、色々動かしてみようと思います。 手を抜いているわけではないのです。 勉強会の内容を見直してもらえればいいのです。 1.前回の内容を駆使して、トグルしてみよう！ トグルとは、ある同じ操作を繰り返すことで、機能や状態のON/OFFを切り替える仕組みのことである。 まずは何でもいいので、HTMLを用意してみましょう。 <body> <input type="button" id="toggle_btn" value="トグルさせる"><br /> <div id="text_1"> この夏の<br /> リア充な日々は<br /> もう<br /> 終わって<br /> しまったのです。 <
![デザイナーさんの為のjQuery講座 Lv.2 [動かす編] | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/566dfcc1e5ebd67b6c40c11560a69a71cebd1971/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2013%2F09%2FDSC_4117.jpg)
How to create JQuery DataTable using JSON and servlet
In this article I’ll introduce the basic coding that require to create JQuery DataTable using JSON passed by simple servlet. DataTable is very powerful JQuery based grid with advance features which can be build in short span of time with customize features. Installation 1. Download Latest JQuery DataTable download 2. Above download will provide two JQuery plugin jquery.js and queryTables.js <scrip
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
スクロールしたときにおすすめ記事を右下からにゅるっと表示させるjQuery「RecommendFooterプラグイン」
スクロールしたときにおすすめ記事を右下からにゅるっと表示させるjQuery「RecommendFooterプラグイン」を公開します。 １．サンプル サンプルを用意しました。 サンプル スクロールして「タイトル4」が表示されると、ページ右下からおすすめ記事のボックスが表示されます。 また、逆スクロールして「タイトル4」が表示されなくなるとボックスが隠れます。 さらに、ボックスが表示されているスクロール位置でリロードを行うとボックスが再表示されます。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.recommendfooter.js」にリネームしてください。 jquery.recommendfooter_0.0.1.js 以下、設定方法です。 ３．HTML 下からにゅるっと表示させたいHTMLを、body終了タグの前に次のように記述しま
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
今度こそ始めるjQuery超入門
59. ベースのHTMLを作成 <body> ! <dl> ! ! <dt>Step.1</dt> ! ! <dd><p>Lorem ipsum ! ! (中略) ! ! venenatis.</p></dd> ! ! <dt>Step.2</dt> ! ! <dd><p>Integer rhoncus ! ! (中略) ! ! ultricies accumsan. </p></dd> ! ! <dt>Step.3</dt> ! ! <dd><p>Integer pretium ! ! (中略) ! ! imperdiet. </p></dd> ! </dl> </body> 60. CSSでベースを整形 body{ ! background:#252422; } dl{ ! width:800px; ! margin:50px auto; } dt{ ! line-height:35p
フォームの入力をもっと快適にする·jq-idealforms MOONGIFT
jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてしまいます。そんな勿体ない取りこぼしのようにできるフォームがjq-idealformsです。 レスポンシブWebデザインなフォームです。入力時にリアルタイムチェックしてくれます。 OKだと青くなります。 カレンダーは選択式です。 チェックボックスなどのデザインがカスタマイズされています。 ドロップダウンも色がついています。 jq-idealformsではステップごとに表示を分けたり、キーボードの入力をリアルタイムにサポートしていたりと便利な機能がたくさんついています。ブラウザはIE8以降の他メジャーなブラウザに対応し、Android
jQueryのserializeはform要素以外にも使えるの知ってましたか？ · DQNEO日記
jQueryにはserialize()という便利メソッドがあって、formの入力値をまるごとクエリ文字列に変換することができます。 クエリ文字列というのはこういうやつです。 ?username=hoge&email=fuga さてこのserialize()の使い方ですが、ぐぐるとform要素に適用するサンプルコードばかり出てきます。 $('form').serialize(); しかし実はこれ、form要素に対してだけではなく任意のDOM要素に対して適用できるんです。 つまりform丸ごとではなく、いつくかのinput要素だけピックアップしてserialize()することができるのです。 serialize()の使い方 HTML <input type="text" name="email" > <input type="text" name="username" > このようなinput
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips ネタ元:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips : アシアルブログ ちょっと気になるコードがあるのでツッコミを。 １．現在見ているページのナビゲーションをアクティブにする if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); } class属性の付加にtoggleClass()を利用しているけどaddClass()のほうがシンプルでよいです。 if (document.URL.index
初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
こんにちは、鴨田です。 今更感はすごくあるとは思いますが、 コーダー初心者でも簡単なJavaScript/jQueryのコードで、 ちょっとした運用を楽に出来るTipsを紹介したいと思います。 １．現在見ているページのナビゲーションをアクティブにする JS if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); }
Android Tips #49 Android Query を使って jQuery 風に超シンプルにコーディングする | DevelopersIO
Android Query とは Android Query とは、Android アプリの実装を jQuery のようにコーディングできるようにするライブラリです。UI に関わる処理や非同期処理などをメソッドチェーンなどを利用して簡潔に記述することができます。今回はそんな Android Query をちょっと触ってみました。 Android Query を導入する まずは以下のダウンロードページからライブラリをダウンロードしましょう。最新バージョンは 0.25.10 のようです (2013年5月14日現在) 。 https://code.google.com/p/android-query/downloads/list ダウンロードしたら、お好きな Android アプリプロジェクトの libs フォルダに配置すれば完了です！ Android Query で実装する では早速実装してみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://daily.d3js.info/?p=296
hanabi.md
HTML5やCSS、jQueryなどのAPIのドキュメントサイト・「DevDocs」 - かちびと.net
jQueryモバイル用のFlatUIテーマ:phpspot開発日誌