Animate Css JqueryAnimate Css Jquery, animate with animate.css and supported jquery library
テーブルにフィルタ・並び替え・編集等の機能を加える「jquery-fulltable」:phpspot開発日誌
GitHub - joseluisballesterosdelval/jquery-fulltable: Plugin that enables any table to be filtered, ordered, edited, and more, all in one. テーブルにフィルタ・並び替え・編集等の機能を加える「jquery-fulltable」 プラグインで初期化すると次のようなテーブルに変化します。 関連エントリ テーブルをサクッとレスポンシブ対応にする「resTables」 テーブル行の詳細をクリックで開けるテーブル実装 テーブルをブラウザ上で組み立てられるUI実装「a-table」
【JavaScript】ドラッグ可能な横スクロールを実現するkinetic.js【プラグイン】 « JavaScript « 技術ブログ « 株式会社プロネット | WEBシステム開発20年以上の実績
こんばんは。 今日はjQueryのプラグインの紹介になります。 ドラッグ可能な横スクロール画面を作る際便利です。 GitHub 環境 chrome 47.0.2526.111 IE 8,9,10,11 FireFox 43.04 で動作確認済みです。 デモ 外部サイトです。 デモ 使い方 まずは、全画面横スクロールにしたいので横幅が大きいブロック要素を作りましょう HTML <div id="scroller"> <div id="inner"> <!-- content --> </div> </div> CSS body,html { height:100%; min-height:100%; } #scroller { width:100%; min-height:100%; overflow: hidden; } #inner { width:5000px; } こんな感じで。 あ
jQuery LoadingOverlay - Gaspare Sganga
IT Manager, GIS Analyst & Lead Developer @setin. Freelance Developer & Consultant. A flexible loading overlay jQuery plugin Contents Quick Demo Get it Features Methods Actions Options and defaults values Animations Examples History Comments and Ideas Quick Demo Try jQuery LoadingOverlay! Get it GitHub View project on GitHub or download the latest release. npm npm install gasparesganga-jquery-loadi
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
jQueryで簡単にドラッグ＆ドロップのソートを実装する方法
読む：3分 試す：15分 はじめまして、4月にアシアルへ入社した噂の好青年こと高橋です。 今日はjQuery UIを使ったオシャンティなソートを紹介します。 まずはデモをご覧ください。 「こんなメンド・・・大変そうなUIできるかなぁ？」 心配ご無用！jQueryさんはやってくれます！！ まずは必要なソースを準備します。 下記からそれぞれ最新版をダンロードしてください。 http://jquery.com/download/ （24/7/19時点で ver 1.7.2） http://jqueryui.com/download （24/7/19時点で ver 1.8.21） ファイル構造・読み込み等は割愛します。 今回覚えるべき、たったひとつのシンプルなキーワード 「sortable」 まずはHTMLいきます <table class="table table-striped table-b
height() - jQuery 日本語リファレンス
最初の要素の高さをピクセル単位で取得します。 jQuery1.2からは、このメソッドでwindowやdocumentの高さも取得できるようになりました。 ボタンをクリックすると、高さを表示します。 サンプルプログラムはiframe内で動いているので、windowの高さは黄色い部分の値になります。予期したよりも小さい値が表示されているかもしれません。その場合は、単独で開いて確認してみて下さい。 <button id="getp">Get Paragraph Height</button> <button id="getd">Get Document Height</button> <button id="getw">Get Window Height</button> <div> </div> <p> Sample paragraph to test height </p> function
jQueryでradioボタンが変更された時のイベント処理
jQueryでradioボタンが変更された時のイベント処理 html <input name="test" type="radio" value="on" />on <input name="test" type="radio" value="off" />off jquery $( 'input[name="test"]:radio' ).change( function() { alert( $( this ).val()); // valueを表示 });
jQueryに独自の関数を追加 - Toro_Unit
jQueryを使っているとやっぱり独自の関数を作りたくなってきますよね。 hoge()とhogehoge()というjQueryで使える関数を作ります。 [js] jQuery.fn.extend({ hoge:function(vars){ jQuery(this).addClass("hoge").css({color:"#FFF"}); return this; }, hogehoge:function(){ var $this = jQuery(this); $this.html("hogehoge"); return this; } }); [/js] こんな感じで独自の関数を定義できます。コードの再利用が簡単になるので、覚えておいて損はないです。 return thisを返しておくと、メソッドチェーンができるようになるので、忘れずに入れましょう。
jQuery リファレンス：removeClass
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
[jQuery] Enterキーでフォーカスを移動するには
Enterキーでフォームを送信したくない時は あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。 リターン（Enterキー）でフォームを送信しない方法: 小粋空間 とりあえずこの記事の「４．押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。 Enterキーで次のフィールドにフォーカスを移動するには 次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな～、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。 Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。 Shift＋Enterキーにも対応するには さらについでにShift+Enterキーでの逆順の移動に
Webページの印刷プレビューを見やすく素早く表示させるjQueryプラグイン・Print Preview - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Webページの印刷プレビューを、 その場で見やすく素早く表示 させるjQueryプラグインです。 地味だけど結構良かったです。 IEには対応して無い様ですが、 印刷が必要なページに導入する と良いユーザービリティになるかも。 この手のライブラリは個人的に初見だったので備忘録的にご紹介します。 このようにその場で直ぐにプレビューを表示させる事が出来ます。プラグインを導入すると、プレビュー用のボタンが指定した箇所に表示されます。また、ショートカット（WinならCtrl+P）でも同じエフェクトでプレビューが表示されます。 通常のブラウザの機能の印刷プレビューでも確認したところ、確かに別途用意したprint.cssを読み込んでくれているようでした。 ご覧いただいたほうが早そ
Lazy Load(画像の遅延読み込み)を実装する方法
レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。「遅れて」というよりは、「適切なタイミングで」と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか？ 転送量の節約ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して「やっぱ止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。 このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲
エラー箇所など指定した要素にスクロールで移動する
photo by mollyali 縦長Webページの入力フォームなどで、バリデーション後にエラーを表示したいことがある。その方法はいくつもあるが、今回はエラー箇所にスクロールで移動する方法を実装する。 ※サンプルではjQueryを使用しているが、使わなくても対応可能（アニメーションが面倒だけど） 特定の要素にスクロールで移動する var position = $('セレクタ').get(0).offsetTop; $('body').animate({scrollTop: position}, 'slow'); 要素の位置を取得するには $('セレクタ').get(0).offsetTop を使う。 $('セレクタ').offset().top で位置を取得するとズレる場合があるので注意。 また、複数ある要素のうち1番目に移動したい場合は、 $(‘セレクタ:first’).get(0).
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本をめくるようなエフェクトを実装できるjQueryプラグインまとめ！
jQueryでクリックされた要素が何番目か取得する - Qiita
http://www.hp-stylelink.com/news/2015/02/20150217.php
http://www.hp-stylelink.com/news/2014/12/20141217.php
jQueryの基本 - $(document).ready - Qiita
