インタラクティブなクレジットカード入力フォームを実装するjQueryプラグイン・Card
インタラクティブなクレカ情報入力フォームを実装するスクリプトのご紹介。以前も似たようなものを紹介しましたが、こちらの方が良さそうだったので備忘録。 以前、Skeuocardというスクリプトをご紹介しましたが、こちらも同じ目的で作られたものです。 カード番号を入力すると、頭4桁を解析してカードの種類が表示されます。このスタイルもCSSのみで作っているようです。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script> <script src="card.js"></script>本体とプラグインを読み込みます。 $('form').card({ container: $('.foobar')})で、セッティングするだけ。 Webで
【jQuery】ドリルダウンナビゲーションを実装できるプラグイン jQuery Sliding Menu | バシャログ。
パズドラのランクが175になりました ishida です。昨日やっとサタン降臨をクリアしてワーイワーイなテンションです。 さて本日はドリルダウンナビゲーションを実装できるjQueryプラグインのご紹介です。 ドリルダウンナビゲーションとは 1画面の中で、リンクなどの項目を選択して大分類から小分類へと対象を絞り込んでいくナビゲーションです。 表示エリアに制限のあるスマートフォンなどのデバイスでよく見られるUIですね。 そんなドリルダウンナビゲーションを簡単に実装できるjQueryプラグインがありましたので、 簡単なデモを作ってみました。 jQuery Sliding Menu デモ まずは、以下のデモをご覧ください。 リンクをクリックするたびに、下層のナビゲーションが表示されていきます。 HTML <div id="menu"> <ul> <li><a href="#">ノーマルダンジョン<
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch - かちびと.net
jQuery UIをタッチデバイスに対応させる ライブラリ・jQuery UI Touch Punchの ご紹介です。いつか使うかも、と思った ので備忘録。これを見て、そういやスマ フォでjQuery UIを試したことが無いこと に気が付いた次第です・・ jQuery UIのドラッグとかリサイズとかソートとかをiPhoneなどに対応させるためのライブラリです。そういやjQuery UIはタッチデバイスで動くのか試したことありませんでしたが、ドラッグやリサイズはそのままでは使えませんでした。 これは需要あるんじゃないですかね。このライブラリでタッチデバイスに対応させられるのは以下の通り。 Draggable Droppable Resizable Selectable Sortable Accordion Autocomplete Dialog Progressbar Slider 実機でテ
jQueryのプラグインを探す時に便利なサイトのまとめ
星の数ほどあるたくさんのjQueryのプラグインから、目的にあったものを探すのはなかなか大変ですよね。そんな時に役立つ便利なサイトをまとめました。 まずは手前ミソで自分がまとめたものから。 これは本当に多大な労力と実際の動作確認もしているので自信をもってオススメできます。 jQueryのプラグイン100選 -2013年総集編 日々チェックしているスクリプトから厳選して一年単位でjQueryのプラグインをカテゴリごとに選出しています。プラグインの半分近くは個別に記事も書いてあります。 jQueryのプラグイン100選 -2012年総集編 jQueryのプラグイン100選 -2011年総集編 jQueryのプラグイン100選 -2010年総集編 jQueryのプラグイン100選 -2009年総集編 jQueryのプラグイン100選 -2008年総集編
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」:phpspot開発日誌
jQuery Autotab Demo 電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」 電話番号フィールドを複数にわけているけど、入力がおわったら次のフィールドに自動でうつる、というアレが簡単に実装できます。 単に移動するだけではなくて、入力値をフィルタすることも可能です 関連エントリ Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 より良いフォームの入力ヒント実装jQueryプラグイン「Label Better」 フォーム要素にフォーカスした際のヒント表示を簡単に実装できるjQueryプラグイン「FormHelp」
複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」:phpspot開発日誌
Multifilter - Sort a table on Multiple inputs. A jQuery plugin from Tommy Palmer. 複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」。 テーブル内容をフィルタするのに用意されているものは１個というのが殆ですが、条件を複数指定して絞り込めるフィルタプラグインです。 アイテム量が多い場合なんかに使えそうですね 関連エントリ テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「
可変グリッドプラグインjQuery masonryの設定方法・オプションまとめ - ナオユネット
CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。 そこで役立つ便利なプラグインjQuery masonryをまとめてみました。 ちなみにMasonryとは、和訳すると「石造建築」。 レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな？ jQuery masonryの使い方 JSファイルをダウンロード まずはjQuery本体とjQuery masonry本体をDL。 jQuery jQuery masonry jsファイルを読み込み headタグ内に、ダウンロードしたJSファイルの読み込みます。 <script src="jquery.js"></script> <script src="jquery.masonry.min.js"></script> 続けて、/bodyの直前に下記jsを記述します。 <script>
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
コピペでOK！スムーススクロールでページ内リンクやトップへ移動！#なしで
記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかもスムーズスクロールで移動すれば動きもわかりやすいし気持ち良い。今回はJavaScriptやjQueryのプラグインを使わずに実現する方法です。 最近は多くのブログ・サイトで右下に「ページ先頭へ」戻るボタンやリンクを見かけます。しかしクリックして一気に最上部までワープすると味気ないし自分の位置を見失いがちです。目次の場合も同様です。 ゆめぴょんです。こんちはっ(^^)/ ページ内リンクはSEO対策にもなると聞いたことがあります。しかし私はむしろ訪問者のためのナビゲーションの1つとして便利だと思っています。 ページ内部リンクのしくみと弊害 そのしくみはとても簡単です。現在のURLの後に「#」をつけるとページ先頭へ、「#pyon」などをつけると「id="pyon"」を設定してる位置へジャンプします。 だから見出しに「
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
jQuery高速化！処理速度を10倍上げるテクニック20選
Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers
androidでoverflow:scrollがきかないのをjavascript（jQuery）で解決する : 森のコーディング
5月8 androidでoverflow:scrollがきかないのをjavascript（jQuery）で解決する カテゴリ:jQueryandroid Tweet ※一部ソースが間違えていたので修正しました[20131028] サイトをつくっていて、特定の領域だけスクロールさせたいとき、 要素をdivでかこんで overflow:scroll; などとします。 スマホ用サイトでも、使うことはちょくちょくあるのですが、なんとandroidでは、overflow:scrollがきかずに、強制的にoverflow:hidden;になってしまうというバグが。 それを解決するライブラリも半日探したけれど見つからず、、 しょうがないのでjavascriptを自分で書いて解決してみたら、 思いの外簡単だったので、共有しときます。 基本的にはコピペでいけると思います。 javascript部分（というか
テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」:phpspot開発日誌
テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」 2013年10月02日- jQuery Super Easy Text Rotator by Pete R. | The Pete Design テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」 「Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style」 というマークアップがあった場合、Super Simple Text Rotator with Style、のSimpleの部分がカンマ区切りで区切られたテキストにアニメーションしながら切り替わるという
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Tables, for Bootstrap 5
showjin.me
MdN Design｜総合情報サイト
変わったUIの日付＆時刻ピッカー実装jQueryプラグイン「DateTime Picker」:phpspot開発日誌
クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」:phpspot開発日誌