1分でわかるZeroClipboardのサンプルとライブラリの使い方
1. ZeroClipboardを読み込む <script src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script> 2. コピーするテキストとボタンの場所を指定 <input id="text" value="Sample Text"> <button id="btn">コピーする</button> var btn = document.getElementById("btn"); var text = document.getElementById("text"); var clip = new ZeroClipboard(btn); clip.on("ready beforecopy", function() { btn.dataset.clipboar
指定した条件でテーブルの行を並び替える - tablesorter - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions
1行間隔で行の背景色を変える widgets プロパティに zebra を指定すると、1行間隔でテーブル行の背景色を入れ替わり表示できます。 jQuery(function($) { $('#r4').tablesorter({ widgets: ['zebra'] }); }); //jQuery tr 要素のクラスに even と odd が交互に付与されるので、スタイルシートを使って even と odd の背景色を指定します。 table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } # 都道府県 フリガナ ふりがな ローマ字
汎用性重視のテーブルフィルタリング系 jQuery プラグイン | CYOKODOG
汎用性を重視したテーブルフィルタリング系の jQuery プラグインです。 実装の基本思想は以前書いた「jQuery によるシンプルなテーブルフィルタリング処理の実装を考えてみる」に基づいてます。 変更履歴 v0.5 フィルタ条件の入力フィールドを自動生成する機能を追加しました。 Excel のオートフィルタのようなプルダウン、ラジオボタン、チェックボックスによる条件入力フィールドの自動生成機能を追加しました。 QueryString によるフィルタリング機能を追加しました。 Bootstrap3 対応。 使用手順の説明、デモを大幅刷新しました。 v0.4 １つの条件入力フィールドを複数カラムに対し適用した場合、当該フィールドについては OR 条件でフィルタされるようにした。 v0.3 プラグインの実行時、パラメータ名を指定ぜずフィルター要素のみを指定できるようにした。 $(‘table’
HTML テーブルをナイスに扱う DataTables 〜導入編〜 - A Memorandum
DataTables とは HTML テーブルを操作する jQuery のプラグイン。 本家は以下 datatables.net 簡単な例 Microsoft の CDN でホストされているため、stylesheet と script を以下のように指定。 <head> ・・・ <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></scri
javascript 初心者が CakePHP2系 の更新処理を Ajax でやってみた | X->A->O
目次 はじめに 必要となる情報・知識 サンプルコード まとめ はじめに 今回、データの更新処理をAjaxを使って実装してみたのですが、結構覚えることが多く大変だったので実際にやったことをメモ。 次同じことをするときにさらっと思い出せるように。 プログラムに限らない一般的な話ですが、一見複雑なものも細分化していくと単純なものになりますね。まぁ、その単純なものをいかに有機的に組み合わせていくのかっていうのが、何においてもカギを握るわけでもありますが。なお jQuery を使用しています。そして、スクリプト系のヘルパーは今回勉強不足なこともあって一切使用していません。いずれ機会があれば Cake の機能をフル活用した書き方も実践したいところです。CakePHP のバージョンは 2.2.1 ちなみに私は CakePHP の処理の流れは一通りわかっているけど、jQuery はDOMをIDで指定して、
テーブルのヘッダを固定してスクロールする jQuery プラグイン - Qiita
超便利 いいところ ・テーブルをほとんどいじらなくていい（tableタグにid属性を付加する程度） ・縦・横のスクロールが可能 ・固定化する（スクロールしない）列数・行数を指定できる ・高さや幅の指定の範囲内でスクロールバーが必要ない場合は、普通に表示してくれる ・MITライセンス ・jQuery1.3系、1.4系で動作するらしい 悪いところ ・見当たらない ・しいて言えば、動的に行や列を追加するとおかしなことになるそうだ Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with si
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」:phpspot開発日誌
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 2012年07月13日- Zebra_Datepicker, a lightweight datepicker jQuery plugin 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 13KBでクロスブラウザ、CSSによるデザイン変更が容易で国際化対応もしていて日本語カレンダーへのカスタマイズも簡単。 日付の形式も自在に指定可能。YdM等とオプション指定するだけです。 こうしたライブラリは実装が簡単であると同時に、サイトのデザインにマッチするようにカスタマイズできるようになっていると本当に使い勝手がよいですね。 実装自体は便利だけどカスタマイズに数日かかったなんていうとちょっと困ります。 年だけの選択も出来ます 関連エントリ これは新し
折り畳みのテーブルを表示するjQueryプラグイン「jExpand plugin」の使用方法 | blog*org
jQueryには便利なプラグインがたくさんあり、テーブルをソートしたりページ送りするタイプはいくつもの種類があります。今回は、ちょっと珍しいテーブルを折り畳み表示するプラグインです。紹介ページは多数ありましたが、使用方法があまりないので書いてみました。 「jExpand plugin」どのような動きかはデモページを見ていただければわかりやすいと思います。 タイトルの行をクリックすると詳細の行が表示されるという仕組みです。 ダウンロード(Download jExpand with samplesからダウンロードできます) http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx 使用方法 HTMLのhead内に <script src="http:
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
jQuery UIのデザインをオリジナルに変更したサンプル | キャリア | マイナビニュース
分かりやすいタイトルが思い浮かばない ので適当な感じになりましたが。jQuery UIのデザインをちょっと今風に変更した サンプルが配布されていたので備忘録。 jQuery UI、凄く機能的で良いんですが、 用意されているデザインが若干使いにく いんですよね。 jQuery UIのデザインを変更するやつです。正直、公式で用意してくれているデザインは沢山あるんですが、どれも少々使いにくい感じなので自分で作るしか無いわけですが、結構面倒です。 で、今日紹介するサンプルはBootstrapっぽい感じで割りと使いやすいのではないかと思ってメモがてら記事にします。 Selene こんな感じ。以下動作サンプルです。 Sample 使い方は変わらないです。CSSだけSeleneっていうのを使えばいいだけ。 <link type="text/css" href="ui-selene/jque
blog.cuegraphix.com - jQueryのFlexigridを使ってみた
データを簡単にテーブルにフォーマットしてくれるjQuery プラグイン Flexigrid を使ってみた。 Flexigrid http://www.flexigrid.info/ Google Code http://code.google.com/p/flexigrid/ DBから吸い出して管理画面などでさくっとテーブルにしたい場合に非常に便利！ 具体的にどんなことができるのかはマイコミジャーナルさんの記事がわかりやすいのでリンク わずか数行で”ものすごいテーブル”に! – jQueryプラグイン「Flexigrid」 ただこのプラグインあまりリファレンスがない・・・ jsを開けばオプションは一目瞭然なのだが、自分メモとして残しておきます。 オプションパラメータ一覧 UIパラメータ width テーブルの横幅。数値もしくは auto が利用可能。auto に設定した際は横のリサイズは無
スクレイピング応用編-phpQuery-
さて今回は前回に引き続きスクレイピングします。といっても前回よりかなり応用が効くやり方です。スクレイピングだけじゃないですがDOM操作もできちゃうすぐれものphpQueryをご紹介します。 ただ取ってくるだけじゃないですよ。色々と便利に使える要素がかなり詰まっています！ →前回の記事はコチラ 詳しくはコチラをご参照ください→phpQuery マニュアルはコチラ スポンサーリンク ダウンロードサイトからダウンロードします。（full-packageかone-fileどちらでも良いですがfull-packageが良いと思います。下記のことだけならone-fileでもできます。） require_once(‘phpQuery/phpQuery.php’) で呼び出して使います。 phpQuery設定方法 //ファイル読み込み $html = phpQuery::newDocumentFile('
セレクターで要素を選択する - jQuery 日本語リファレンス
jQueryを使ってコーディングする上で、最も頻繁に出てくる作業のひとつがセレクターによる要素選択でしょう。 この便利さが、他のライブラリをおさえてjQueryがデファクトになりつつある要因のひとつでもあると思います。 殊にバージョン1.3になってからはエンジンがsizzleに変わり、更に柔軟性と実行速度を向上させています。 通常はidによる単一要素選択が多くなるかもしれませんが、上手に使うことでより一層、jQueryによる開発が楽しくなると思います。 セレクター書式確認用ツール しかし、セレクター書式は時に非常に難解です。 これを確認するために、簡単なブックマークレットを作ってみました。 以下のリンクを、Firefoxであればツールバーなどにドラッグして下さい。 IEならば右クリックして「お気に入りに追加」を選び、警告は無視して登録します。 [jQuery Selectors Inspe
PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌
phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に属性を追加等のDOMを操作も簡単に行えます。 jQueryの便利さがPHP上でも十分に使えますので知っておくと確実に面倒な処理を楽に書けるようになるでしょう。 スクレイピング HTMLのスクレイピングをする場合には超簡単かつ、jQueryを使ったことがある方なら抵抗なくすぐに習得できます。 ちょっとコードを書いて実験してみました。 と書くと <div id="two"></div>の中身である t
[JS]jQueryのプラグイン33+1選 -2012年5・6月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Champagne エレメントをランダムな順番でアニメーションで表示します。 Real Shadow カーソルを光源としたリアルな影
jQueryによるフォーム部品操作のレシピ - むつらつれづれ
テキストボックスやラジオボタンなどのフォーム部品は、論理モデルとしては単純なnameとvalueの組み合わせであるものの、jQueryを以ってしても画面上では統一的に扱えずに意外と苦労する。忘れがちなので纏めてみた。 フォーム部品共通 フォーム部品（のjQueryオブジェクト）を取得する var obj = $('#target'); // id指定 var obj = $('.targets'); // class指定 var obj = $('input[@name=xxx]'); // name指定 テキストエリア、リストメニューなど同一ドキュメントで唯一なものにはユニークなidを振っておき、チェックボックスやラジオボタンなど同一のname要素で複数存在するものにはそれらで共通のclassを振っておくか、name要素で指定するのが無難か。 テキストボックス（input[@type=t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DataTables | Javascript table library
http://www.jqueryhelp.net/
http://www.jqueryhelp.net/tutorial/01.html?PHPSESSID=314162d2a186692d5d419f89d1115b3b
認証がかかっています