DataTables | Javascript table libraryAdd advanced interaction controls to your HTML tables the free & easy way
jQueryで実装するページローディングのプログレスバー | 群馬 ホームページ制作：MK-Design/MKデザイン「群馬県伊勢崎市」
今回は、ページの読み込み時、jQueryを使い進捗状況をプログレスバーで表示する方法を、実際にサンプルコードを用いて、詳しく記載していこうと思います。 ページを読み込む際、jQueryでページローディングを実装しているサイトをよく見かけますが、プログレスバーを実装しているサイトは少ないように感じます。そこで、今回記載する「プログレスバーでの表示機能」を用意しておくと、ページローディングと同様に、すべての画像の準備が整うのを待ってから、ページを表示することができます。画像をたくさん含むページやファイルサイズの大きいページに、ページローディングのUIとして実装することをおすすめします。 という事で、それでは今回はッ、 ・プログレスバー表示機能の概要 ・プログレスバー表示に必要な処理 ・プログレスバー表示のHTMLとCSS ・プログレス、ローディング表示のjQuery 上記について記載していこう
jquery : focus to div is not working
After the ajax function is over. in success messages I'm focusing to the specific div. But it's not working. My code is here. $j.ajax({ url:"<?php echo admin_url( 'admin-ajax.php' ); ?>", type:"POST", data:"action=press_release&page="+0+"&do_task="+do_task+"&id="+id+"&module="+module, success:function(data){ $j("#com_cont").show(); $j("#com_cont").html(data); $j("#loading_heart").hide(); $j("#focu
たった10秒でローディング画面を実装出来るjQueryプラグインPACE.js！ | SEO対策なら株式会社ペコプラ
WEBサイトの読み込み時間に表示されるローディング画面。 ユーザーにストレスを与えず待ってもらう為にも気持ちの良いローディング画面を作りたいものです。 今回は本当にコピペするのみ！たった10秒で実装出来てしまうJqueryプラグインのPACE.jsの使い方と、 ローディングアニメーションを作成するのに便利なライブラリをいくつかまとめたのでご紹介します！ jsとcssを読み込むだけ！PACE.jsの使い方 早速ですがPACE.jsの使い方です。 1.CDNでpace.jsと使いたいテーマのcssをheadに記述CDNはこちら <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%
Getting Started | Select2 - The jQuery replacement for select boxes
1. Getting Started Installation Basic usage Builds and modules 2. Troubleshooting Getting Help Common problems 3. Configuration Options Global defaults data-* attributes 4. Appearance 5. Options 6. Data sources The Select2 data format Ajax (remote data) Arrays 7. Dropdown 8. Selections 9. Dynamic option creation 10. Placeholders 11. Search 12. Programmatic control Add, select, or clear items Retri
Google Chrome の JavaScript コンソールが便利
jQuery の使用 次のコードを実行することにより、jQuery を読み込んでいないページでも jQuery を使用することができる。 if (!window.jQuery) { document.body.appendChild((function(){ var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; return s; })()); } (参考: ChromeのJSコンソールでjQueryを使うTips – y-kawazの日記) 試しに任意のページで jQuery をロードして、次のコマンドを打ってみると、あら不思議……。 $('img').a
ThemeRoller | jQuery UI
Using ThemeRoller ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects. To create a custom theme, select the Roll your own tab and tweak the settings. As you work, the UI components to the right will update to reflect your design and you can download your theme whenever you like. If you'd like to use a pre-designed theme, select the Theme Gallery tab and
Eric Martin » SimpleModal
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development. Usage SimpleModal provides 2 simple ways to invoke a modal dialog. As a chained jQuery funct
テーブル内の行やセルなどの要素をドラッグ＆ドロップで自由に配置できるスクリプト・REDIPS.drag
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
jQuery逆引きリファレンス 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
jQueryを使ってキーの同時押し取得(shiftやctrl) - Qiita
チャットなどを作るときに、"Shift+Enterキーを押したときに送信を行う"などをよく使うと思います。このときのキーの同時押しの処理がイマイチ情報を調べにくかったのでまとめておきます。 やりたいこと Shift + Enterを押した時に何か 調査 １つのキーコード取得 jQueryのkeydownメソッドを使うと凄く簡単に１つのキーなら取得できました。 keydown(fn) - jQuery 日本語リファレンス 複数のキーコード取得 基本的には１つのキーコードを取得してそれが押された状態で次のキーが押されたという判定をkeyup,keydownを使って取得するみたいです。 JavascriptでKeyの同時押しを判定する ．．．けっこうめんどくさそうでした。 (てかキーコードいちいち調べるのも面倒) altKeyとかmetaKeyとかのイベントがあるっぽい 教えてもらったのですが、
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
jQuery TextExt Plugin
Demo This demo shows off Tags, Prompt, Focus, Autocomplete and Ajax plugins. About TextExt is a plugin for jQuery which is designed to provide functionality such as tag input and autocomplete. The core design principle behind TextExt is modularity and extensibility. Each piece of functionality is separated from the main core and can act individually or together with other plugins. TextExt’s modula
jQueryで設定されたクリックイベントなどを定義している場所を調べる方法 - Qiita
Chromeなどのモダンブラウザであれば、デベロッパーツールがあってJavaScriptのデバッグなどもそこで容易にできる。例えば、なんかのボタンにJavaScriptでクリックイベントを設定している場合、なにが設定されているかの確認もサクッとできる。 デベロッパーツールで、イベントの中身を確認 <div id="click1">click1</div> <script> var click1 = document.getElementById('click1'); click1.addEventListener('click', function() { console.log('click1'); }); </script> Command + Option + i のショートカットで起動 調べたい要素を選択し、右側のパネル「Event Listeners」を選択する 右端のフィルタっ
連載：jQuery逆引きリファレンス 第5回 コア編 − ＠IT
jQueryのキモともいえる$()関数を始め、jQueryオブジェクトの中核となるメソッドについてまとめた、すぐに役立つ12本を一挙公開。 連載目次 このシリーズでは、jQueryの基本機能を逆引きリファレンスの形式でまとめています。リファレンスという性質上、本稿では入門レベルからの解説は行っていません。jQueryの基本、また、Visual StudioでjQueryを利用する方法などについては、拙稿「ASP.NETプログラマのためのjQuery入門」も併せて参照してください。 さて、第5回となる今回は「コア編」です。本稿では、jQueryのキモともいえる$()関数を始め、jQueryオブジェクトの中核となるメソッドについて扱います。 セレクタ式で特定の要素セットを取得するには？ － $(exp [,context]) － HTML文字列からjQueryオブジェクトを生成するには？ －
jQueryオブジェクトの裏側をのぞいてみよう！ · DQNEO日記
jQueryオブジェクトとは何か？ 最初に答えを言います。 jQueryオブジェクとは、jQuery.fn.jQuery.initクラスのインスタンスである 下記の式を評価してみればわかります。 var obj = $('div'); alert(obj instanceof jQuery.fn.init); // => true Google Chrome Developper Toolsで変数を見てみると、確かにそのように表示されます。 次に、jQueryのソースコードを見てみましょう。 冒頭にこのように書かれています。 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, (ここでrootjQueryとは$(document
iPhone/iPad(iOS)でjQuery UIのsortable,resizeableなどに対応する
こにゃにゃちわ～。 jQuery UIを用いて、チョコっとしたUIをウェブサイトに組み込むことは、比較的よくあります。 とりわけ私がよく使うのは draggable resizable sortable あたりなのですが、これらのUIはその性質上ドラッグアンドドロップを使用します。 ただし、iPhone/iPadなどのiOSデバイスでは御存知の通り、touch操作になっているので、jQueryそのままではうまく動きません。 そこで活躍するのが、ｊQuery UI Touch Punchです。1つのjsファイルで完結しているので、基本的にjQuery UIを読み込んでいるscriptタグの後に、こいつを読み込むだけで、スマートフォンなどでのドラッグアンドドロップ操作が可能になることが確認できました。 ただし、このままだと一つ問題があります。それは「sortableメソッドなどでcancel属
今、AngularJSというフレームワークがヤバい - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年11月05日10:36 JavaScript 勉強会 今、AngularJSというフレームワークがヤバい 先週の土曜日、ランサーズさんで行われた 第３弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。 AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態（要素の追加・削除や、状態のon/off など）を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。 ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが（これは directive と呼ばれます）、この ng というのは AngularJS の２文字目と３文字目を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plugins.learningjquery.com/
とりあえず作ってみます ckeditorの改行をbrにする