jQuery Smart Wizard 4 - jQuery製のウィザードライブラリ
たくさんの入力欄があるフォームをまとめて入力するのは苦痛です。果てしなく続く入力欄を見ただけで気分が萎えてしまいます。そこで使えるのがウィザードです。入力欄をグルーピング、分割することで心理的負担を下げられます。 そこで使ってみたいのがjQuery Smart Wizard 4です。jQuery/Bootstrapをサポートしたウィザードライブラリです。 jQuery Smart Wizard 4の使い方 矢印形のウィザード。 サークル型。 ドット型。 モーダルウィンドウと組み合わせることも可能です。 jQuery Smart Wizard 4はjQueryとBootstrapというよくある組み合わせで使えるのが便利です。VueやReactなどのライブラリに依存することがないので、広くWebサイトで使えるでしょう。 jQuery Smart Wizard 4はjQuery/JavaScri
多彩なローディング画面を実装できる「jQuery LoadingOverlay」 – bl6.jp
jQuery LoadingOverlayは、カスタマイズ性に優れた多彩なローディング画面を実装できるjQueryプラグインです。クルクル回る一般的なものから、オートリサイズに対応したりカウントダウンのタイプにしたりと、さまざまなローディング画面を表現できます。フェード表示／非表示やオーバーレイもシンプルでとても美しいですね。 Font Awesomeの利用やカウントダウン表示もできる 以下からjQuery LoadingOverlayのデモやダウンロード、または詳しい使い方を確認できます。 jQuery LoadingOverlay 上記ページに設置されているデモには、いくつかのパターンが用意されています。 画面全体にオーバーレイをかけてローディング表示する「Whole page Overlay」、特定の要素だけにローディング表示させる「Single element Overlay」、特
ブックマークレットで jQuery を使う魔法の 210 文字
最近、JavaScript ＝ jQuery というくらい、jQuery ありの JavaScript に慣れてしまったのですが、となると困るのがユーザースクリプトやブックマークレットです。 ユーザースクリプトについては以前の記事、Greasemonkey で 超お手軽に jQuery を使うスニペット [Chrome 対応版] でフォローできているのですが、ブックマークレットで使うにはこのままというわけにいきません。 なので、これを元にショートコード化して、ブックマークレットでも使いやすいよう 241 文字 (コメント除く) にまとめ上げたのが下記になります。 前述のユーザスクリプト向けのコードを書いた後に知った事を反映させて、https 対応とか、jQuery の痕跡を完全に残さない対応とかも追加してます。 (function(f,d,b,s){d=document;b=d.body;
jQuery-Tabledit - Bootstrapのテーブルでデータの編集を可能に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムといえばテーブルによるデータの一覧表示ですよね。実装すると次に要望にあがるのはデータのフィルタリングであったり、一回更新だったりします。非常に厄介です。 今回はその一部、一覧時におけるデータの編集を手助けしてくれるソフトウェア、jQuery-Tableditを紹介します。Bootstrapのテーブルに対応しています。 jQuery-Tableditの使い方 jQuery-Tableditで表示したところです。右側に編集、削除のアイコンがあります。 クリックするとテキストボックスになって編集可能になりました。 編集完了すると赤くなります。これで編集した行がわかりやすくなります。 さらにダブルクリックしたセルだけを編集状態にすることもできます。 行全体ではなく、指定したセル
画像上にピンを立てて注釈を埋め込むことができる「jQuery.easypin」:phpspot開発日誌
jquery.easypin by atayahmet 画像上にピンを立てて注釈を埋め込むことができる「jQuery.easypin」 画像にピンを立てて、洋服等をそのまま購入に結びつけるようなUIが簡単に実装できます。 関連エントリ 画像の選択に便利なチェックボックス実装jQueryプラグイン「imgCheckbox」 WEB上での画像の切り取りの決定版jQueryプラグイン「Cropper」 Photoshopばりの画像編集エディタをサイト上で使えるようにするjQueryプラグイン「Classypicozu」 画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「toCanvas」
jQuery.ajax の data の型
jQuery.ajax を利用してデータをサーバーに送信するには、以下のような形で data オプションに送信するデータを設定しますが、そのデータ（下のコードで言うと jsonString）の型は何にすべきかという話を書きます。 function apiHeroesPost() { $.ajax({ type: "POST", url: "api/heroes", data: jsonString, contentType: "application/json; charset=utf-8", success: function (data) { // ・・・省略・・・ }, error: function (jqXHR, textStatus, errorThrown) { // ・・・省略・・・ } }); } 答を先に書くと、 GET 要求（クエリ文字列としてデータを送信）の場合は
jQueryプラグイン、ImageLightboxを使う - Qiita
jQueryのプラグイン、ImageLightboxという物を使ってみたので、メモ。公式サイトのサンプルとは微妙に違って詰まったので参考になれば。 ちなみに、同じような名前のプラグインはいっぱいあるのでわかりにくいですが、以下のものです。 http://osvaldas.info/image-lightbox-responsive-touch-friendly そもそもImageLightboxってなんだ？ jQueryのプラグインの一つで、jQueryとセットで使うことで、画像をクリックすると画面中央に大きく表示されるアレを実現するものです。ブラウザの画面サイズによってフレキシブルにレイアウトを変動させる、レスポンシブレイアウトに対応しているのと、非常に軽いのが特徴らしい。 導入方法 導入方法も非常に簡単。該当となるHTMLファイルに、jQueryとImageLightboxを参照させる
HTMLの<table>内をソートできるjQueryプラグイン - Qiita
jQueryプラグインとして作ってはみたものの、sortableという名前がいろいろとかぶっていることに気づいたので、github公開はよしてこっちに 使い方 <table> に sortable クラスを付与 ソートしたい <thead> の <th> に sort_number または sort_number_attr クラスを付与 <th> に sort_number_attr クラスを付与した列の <td> には、sort-value 属性でソート順の数値を指定 ソートアルゴリズムはマージソートなので安定ソート ソートのキーにした列の <td> には sort_by_asc および sort_by_desc クラスが付与されるので、cssで色をつけたりできる コード ;(function($) { $.fn.sortableInit = function(){ var elemen
jQuery 3.0 および jQuery Compat 3.0 のアルファ版が公開される
jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。主に .show()、.hide() メソッドに対して行われた仕様変更について触れてみたいと思います。 米国時間の 13日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。 現行版の jQuery 2.x 系の後継が 「jQuery 3.0」、1.x 系の後継が 「jQuery Compat 3.0」 と名称変更されてのリリースになります。大きいところだと .show()、.hide() メソッドの仕様が変わったみたい。 jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released ： Official jQuery Blog jQ
CSVファイルをHTMLのtableに変換して表示するjQueryプラグイン jquerycsvtotable の使い方 | 9ineBB
エクセルや表計算ソフト等で作成したものなどをCSVで出力して、それをwebサイトでHTMLのtableにして表示する事が出来るjQueryプラグイン jquerycsvtotable の使い方を紹介します。 ※デモでは、テーブルのデザインにCSSを当ててあります HTMLのヘッダー当たりにjQueryとプラグインjquerycsvtotableを読み込みます <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="jquery.csvToTable.js"></script> <head></head>の間等にコードを入れます、プラグインへのパスはファイルを設置した場所に合わせて変更してください。同じ階層にある場合は上記の記述になります 次にテーブルを表示したい所に 任意のクラス名を付けたdiv
IE9 のみ $.ajax が期待通り動作しません
IE9で$.ajaxが動作しません(IE10やChromeでの正常動作は確認済み) 現在ajax実行時のソースは下記のソースの通りです。 現状の動作としてはサーバー側に処理が移る前に、 error: function (XMLHttpRequest, textStatus, errorThrown) に到達してしまう状況です。 textStatusには"error"、errorThrownには"アクセスが拒否されました。"という文字列が入っています。 "アクセスが拒否されました。"の対応策として、このサイトを参考に「jquery.xdomainrequest.min.js」を試したのですが、依然として"アクセスが拒否されました。"が帰ってきます。 現在はこのサイトを参考に、XDomainRequestでの対応を試みています。 解決方法の分かる方がいましたら、ご教授をお願いします。 $.aj
Q. AngularJSとjQueryの違いは何でしょうか？ | POSTD
私が知っているJavaScriptライブラリといえばjQueryです。 しかし、新規プロジェクトのデフォルトのライブラリとして、プログラマ仲間がAngularJSを導入しました。 私はAngularJSについての知識が全くありません。jQueryと何が違うのでしょうか。 jQueryのタスクとして実行された関数群は、AngularJSでも使用できますか？ asked by user825904 Answer(s) jQueryはDOMのエレメントを操作・管理するための優れたツールです。 WebアプリケーションのようなデータのCRUDがなく、DOMのエレメント操作についてのみ言えば、 jQueryは最高のツールの一つです（AngularJSでも同様の操作が可能です）。 AngularJSは以下の特徴を持つフレームワークです。 双方向データバインディング MVWパターン（MVCの派生パターン）
AngularJSで3rd パーティー製のUIをdirective化する時の注意 - Qiita
はじめに 自作ディレクティブを作成した際に、angularの(scopeの)イベントとjQueryのDOMイベントを結合させるのに若干苦労したため、メモ化。 実例 今回、実例としてBootstrapのmodalをangularのディレクティブ化する、というのをやってみる.ディレクティブの仕様としては以下のイメージ. my-modalタグでBootstrapのモーダルを描画できる. title属性でモーダルのタイトル文字列を指定できる. state属性を指定でき、true/falseの状態に応じてモーダルが表示/非表示化される. なお、先に断っておくが、下記は飽くまで説明用のサンプルである。 Bootstrapとangularを組み合わせるのであれば、自作するのではなく http://angular-ui.github.io/bootstrap/ を使った方が良い。 利用側のコードイメージと
AngularJSではjQueryを使わない - The Round
注：古い記事の為、内容が最新ではない可能性がありますm(＿ ＿)m AngularJSではjQueryを使わない どうもマツウラです。 AngularJSでjQueryプラグインを使う方法を調べました。 結論から書くとなるべくdirectiveで書きなおして下さい、ということです。 プラグインをそのまま使いたい気持ちはありますが、理由があるんです。 まず、AngularJSで使う方法をみてみます。 プラグインが適用されない。 directiveのlink関数に書く。 .directive('myDirective', function() { return { link: { post: function(scope, element, attr) { //... } } } }) 動的に生成されたDOMに対してプラグインが適用されない。 $timeoutを使う。 $timeout(fun
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68996a682d66a0a12cce22ce700c4f49f5b6023/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png)
【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン［Isotope］の使い方。
グリッドに沿って各要素をタイル状にレイアウトするプラグインで、有名なものでは［jQuery Masonry］が挙げられます。 この分野のjQueryプラグインでは最も知名度が高く、初心者の方でも比較的簡単に導入できるので、使っている方も多いでしょう。 ある程度の知識があればカスタマイズも容易にできるので、個人的にもお勧めできるプラグインです。 唯一の難点といえば、デフォルトでは要素のフィルタリングやソート機能に対応していないこと。 今日紹介する［Isotope］は、超高機能なフィルター機能、ソート機能を兼ね備えた「Masonry風」のプラグインです。 実装サンプル まずはサンプルをご覧ください。 サンプル・デモ：Masonry風プラグイン［jQuery Isotope］の使い方 実はこのプラグイン、弊社オンズのウェブサイトのトップページでも利用しているので、「見覚えのある動きだ」と感じた方
ステップ形式のウィザードが作れる「jQuery Steps」:phpspot開発日誌
Examples - jQuery Steps ステップ形式のウィザードが作れる「jQuery Steps」。 WEBサイト上で、ユーザ登録画面などで入力項目が多い場合にステップ表示をした方がユーザは安心しますが、それをjQueryで簡単に実現できるプラグイン。 デザイン的にBootstrapなサイトでも使えそうで便利かも 関連エントリ フォームにて入力の入力UIを追加できる「jquery.signfield」 フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 より良いフォームの入力ヒント実装jQueryプラグイン「Label Better」 クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery 3.0のαバージョン発表、開発者は要テスト
http://www.webtoolnavi.com/jquery-matchheight/
javascript - jQueryを使っている箇所を簡単に調べられる方法はありませんか？ - スタック・オーバーフロー