カラムをドラッグして並び替えが可能なテーブルを実装できるjQueryプラグイン「jquery.dragtable」:phpspot開発日誌
jquery.dragtable.js カラムをドラッグして並び替えが可能なテーブルを実装できるjQueryプラグイン「jquery.dragtable」 意外となかったカラムをドラッグ＆ドロップで並び替えるプラグイン。 比較したい値が離れていると視点の移動でやりづらくなっちゃいますが、並び替えすることで比較が簡単になりそう 特定のカラムだけ固定することも可能 関連エントリ HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー
タイトルのとおりjQueryを使ったクリックで開閉するメニューを作ってみました。先日マウスを乗せると開くメニューを紹介しましたが、用途によって使い分けるといいと思います。 facebookにも同じようなのがありますね。それではHTMLから解説していきます。 HTML まずはHTMLです。コンテンツの部分は省略しています。 <div id="fixed-menu"> <div id="fixed-menu-contents"> <a href="#" id="home"></a> <div class="panel-wrap"> <a href="#" class="panel-btn">カテゴリー</a> <div class="panel"> コンテンツ </div> </div> <div class="panel-wrap"> <a href="#" class="panel-btn
動画やGoogleマップにも対応した軽量なモーダルウィンドウを実装するjQueryプラグイン・Pop Easy - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 使いやすそうなモーダルウィンドウのスクリプトがあったので備忘録。VimeoやGoogleマップにも対応しており、ファイル自体も圧縮版で2KB程度と軽量なのも嬉しいですね。 モーダルウィンドウ実装用のスクリプトです。jQueryに依存します。 使いやすそうなモーダルウィンドウです。 スタイルもカスタマイズしやすそう。 $('.modalLink').modal({ trigger: '.modalLink', olay:'div.overlay', modals:'div.modal', animationEffect: 'slidedown', animationSpeed: 400, moveModalSpeed: 'slow', background: '00c
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。 １．jQuery UI Tabsについて 基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。 サンプル ２．hashchangeプラグインについて jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にするには、hashchangeプラグインを利用します。 hashchangeプラグインの基本的な設定方法については「jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）」を参照してください。 ３．jQuery UI Tabsでhashchangeプラグインを利用する ２項のリンク先の説明ではjQuery
手軽に美しく実装！ファイルアップロード用JavaScriptライブラリ4選 - Lancers開発ブログ
こんにちは、keiです。 今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。 ランサーズ上で、大容量ファイルのアップロード機能を実装することになった際に、以下の軸で調査した結果となります。 手軽に実装できる 見た目が今風 (大容量なので)アップロード中にプログレスバーが表示される Uploadify http://www.uploadify.com/ 複数ファイルアップロードが可能なjQueryプラグイン。 HTML5バージョンとFlashバージョンがあります。 長所 豊富なドキュメントとデモ 高いカスタマイズ性 短所 HTML5はライセンスが必要 Plupload http://www.plupload.com/ HTML5、Flash、Silverlightに加え、GearsとBrowserPlusにも対応し
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」:phpspot開発日誌
ALAJAX - a jQuery plugin for ajax auto form sending | Freelancer ID 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームなんかを作る場合はAjax前提で作ったりしますが、このプラグインで $('#form').alajax(); のように初期化すれば一瞬でajax化が完了します。 もちろん、サーバ側のプログラムの調整は必要ですが、簡単にajax化できるというのはよいかもしれませんね。 やっぱりajaxフォームの速度ってはやくて利用者としては速いほうがいいわけなので、こういう風にマークアップの作り手側は簡単に対応できると作り手としては嬉しいですね。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ 画面遷移なしのAjaxでファイルアップロードするjQuer
汎用性の高い、jQueryの定番系プラグインのまとめ
単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。 いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。
前回のjQuery|Enter|Tab|でフォーカス移動の続編でファンクションキーの制御をjQueryでやってみます。 - せかにゃ～
業務WEBアプリだったら、ファンクションキーは必須ですよね。 普通にkeydownイベントで処理を行うと、ブラウザの規定動作が発現し邪魔しちゃいます。 例えば、[F1]:ヘルプ [F3]:検索 [F5]:更新 [F11]:最大化 などなど・・・ あと[BackSpace]で履歴の「前のページに戻る」を無効化する事も忘れちゃいけません。 そんなこんなで以下参照 動作サンプルWinのIE8とFirefox3.5のみ確認 var d = document; $(function(){ //IE F1ヘルプ制御 if (d.all) window.onhelp = function(){return false;} //============================== // キー項入力 イベント //============================== $(document).
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
第9回 Ajax編（後編）
連載目次 jQueryでAjax通信の基本的な機能を担うのは、$.ajaxメソッドです。load、$.get、$.post、$.getJSON、$.getScriptなどの簡易メソッドもありますが、実は、これらのメソッドはすべて$.ajaxメソッドを内部的に利用しているのです。$.ajaxメソッドが汎用的なAjax機能を提供するとしたら、そのほかのAjax関連メソッドは、目的に特化した機能を簡易なインターフェイスで提供するものであるといえるでしょう。 $.ajaxメソッドの引数には、Ajax通信に必要なオプション情報を「キー : 値」のハッシュ形式で指定できます。以下に、利用可能なオプション情報をまとめておきます（主要なオプションについては、適宜、次項以降で解説します）。 $.ajaxメソッドで利用可能なオプション* 成功コールバックにXMLHttpRequestオブジェクトが渡されるよう
jQuery Form Plugin
Overview The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn't get any easie
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
jQueryでモーダルウィンドウを作成。 | Almondlab
（追記／2011.12.02）ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。 jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。 サンプルはこちら <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」:phpspot開発日誌
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 2011年03月22日- jQuery File Upload Demo デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 ファイルアップロード用のプラグインはよくありますが、このプラグインでは、デスクトップにあるファイルをブラウザにそのままドラッグ＆ドロップでファイルアップロードが完結します。 ダイアログからいちいちファイルを選択して、というUIは使いづらいですが、これなら直感的に、初心者でも簡単にファイルをアップロードすることが可能になります。 尚、Firefox、Chromeで動作。IEでは動きませんでした。 デスクトップからファイルをドラッグすると枠がニュイーンと広まって、ドロッ
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特定の値に基づいて個々のjqgridセルを編集可能にする必要がある - 初心者向けチュートリアル
http://designaholic.cc/2011/03/jquerycss20.html
