jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scrip
Project.vim - Vimでのプログラミングを猛烈に支援してくれるプラグイン - tamakiii@hatena
こんばんは。Google Chrome Extensionに関する記事を書こうと思っていたのに、うまくいかなくて紹介記事に逃げました。 今晩はProject.vimを紹介します。 Project.vimはプログラムに限らず、Vimで編集するテキストデータを管理するためのプラグインです。 iTermからMacVimに乗り換えて非常に不便だったのがファイルの扱いで、IDEの便利さを恨めしくも思いましたが、Project.vimがそんな雑念をも消し去ってくれます。 上が利用中のスクリーンショットです。こんな風に左側に小さくプロジェクトに関係のあるファイルを表示させておいて、ファイルを選択すれば右側で即座に開いて編集を行うことができます。 ダウンロードはこちら http://www.vim.org/scripts/script.php?script_id=69 ダウンロードして解答したら、いつもの
vimでプロジェクトごとにファイルを管理するプラグイン project.vim - Vermee81の日録
project.vimの導入方法と設定を紹介します。使用した時のスクリーンショットは以下の通り。左ペインにプロジェクトのツリーが表示されて、ファイル上でEnterを押すと、右ペインにファイルが表示されます。 まずは以下のリンクからproject.vimをダウンロード。 http://www.vim.org/scripts/script.php?script_id=69 ダウンロードしたtar.gzを解凍 tar xvzf project-1.4.1.tar.gz project.vimを$HOME/.vim/pluginに移動 project.txtを$HOME/.vim/docに移動 ヘルプファイルが読めるようにお馴染みの以下のコマンドも忘れずに :helptags ~/.vim/doc プラグインは:Projectで実行されます。 :Project 最初はプロジェクト定義ファイル「$H
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt
シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script>本体とプラグイン。 $(".foo").gantt({ scale: "weeks", minScale: "weeks",
様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード<script type='text/javascript
要素にフローティング効果を手軽に与えられるjQueryプラグイン・jqFloat.js
画像とかをフワフワ動かすやつです。 指定した要素を、指定どおりに継続 的にサイト内で動かします。CPUの 問題とかもあると思うので多用は 出来ないと思いますが、よく見かけ るといえば見かけるので一応メモ。 オブジェクトにフローティング効果を与えます。キャラクターのあるキッズ、ファミリーをメインターゲットとしたWebサイトなんかと相性良さそうですね。 いろいろと画像が動きます。自動で動くものもあれば、マウスホバーで、クリックでアニメーションがスタートする、なども設定可能みたいです。 見た方が早いですかね。公式デモです。 Demo デモでは画像のみになっていますが、ボックス要素を丸ごと動かしていますので、テキストにしても同じ動作をしてくれます。 IEでも動く。 iPhoneでも動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jq
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
jQuery plugin: ‘autoResize’ - James Padolsey
I remember googling for something of this nature a while ago but all I found were countless attempts using the cols and/or rows attribute of the textarea, thus making it pretty useless if you weren’t using a fixed-width font. Inspired by Jason Frame’s method, I’ve created an animating ‘autoResize’ jQuery plugin. Although it was inspired by his plugin it has a few slight differences, most notably t
ack.vimで編集効率を10倍向上させる | Glide Note - グライドノート
Vimテクニックバイブル ～作業効率をカイゼンする150の技 ここ1週間、Vimテクニックバイブルに載ってる使ったことのないプラグインを試しているんですが、個人的にvimgrepよりも使いやすいと思っているack.vimが見当たらなかったのでご紹介。 ackとは ack 1.96 — better than grep, a source code search tool for programmers findで再帰的に全ファイルを列挙して、各ファイルに対してgrepというような事を一つのコマンドでやってくれます。.svnとかCVSとかを検索対象として自動で除外してくれるので、ソースコードの検索に非常に役に立ちます。findとgrepでソース検索してたら、「それack使うと楽だよ」と会社の親切な人が教えてくれましたよ。基本的な利用方法は下記のような感じで ack パターンマッチ [フ
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide
デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.pageslide.min.js"></script> JavaScript PageSlideさせる要素を指定します。 <script type="text/javascript"> $('a').pa
かわいらしいツールチップ
デモページ：Big Yellow Sweet Tooltipの使い方 外部ファイル スタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sweet-tooltip.js"></script> HTML ツールチップはa要素を使用して実装します。 <a href="#" class="sweet-tooltip" data-style-tooltip="style name" data-text-tooltip="Tooltip's text to be disaplayed"
見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」:phpspot開発日誌
Morris.js 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」。 マウス位置に応じて情報を変えるなど、GoogleAnalytics風のインタラクティブなグラフが描画できます。 実際には次のようなグラフが描画できます。IE6+でも動くということで、そこら辺の心配も無しです サンプルコードも載っていたりするので簡単に使えそうです グラフの種類は線グラフのみですが、多機能すぎて馬鹿でかいよりもシンプルなのが逆にいいかもしれませんね。 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」
vim で JavaScript の syntax check をする - すぱぶろ
vim での JavaScript の構文チェックは jslint.vim を使っていたけど、重かったり、表示が崩れたりしてストレスフルだったので、 最近 Syntastic に乗り換えた。多言語の構文チェック機能があり、JavaScript の構文チェックに限らず大変便利。 Syntastic is a syntax checking plugin that runs files through external syntax checkers and displays any resulting errors to the user. This can be done on demand, or automatically as files are saved. If syntax errors are detected, the user is notified and is hap
Vimスクリプトを書いてみよう — KaoriYa
目的 機能を持ったVimスクリプト(プラグイン)を徐々に作る様子を見て、書き方を学習してみよう 作るのはよくあるタイプのプラグイン Javaの単体テスト用クラスファイルを開く(作る)コマンドを作るよ 「ね、簡単でしょう(by ボブ)」と言ってみたい まずは雛形 ひな形としてこんなスクリプトを作ります。 command! -nargs=0 UtestAppend call <SID>UtestAppend() function! s:UtestAppend() echo 'HERE' endfunction " s:UtestAppend() UtestAppendというコマンドを追加 UtestAppendコマンドいが実行されたら ‘HERE’ と表示する ほら、すごく簡単ですね。 Javaだけに作用させる 以下はdiff形式で変更点だけ。 @@ -1,5 +1,17 @@ c
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
Vimでソースコードを素早く追いかける - Guyon Diary
Vim Advent Calender 2011 45日目の記事です。今回のテーマはソースコードを素早く追いかけるです。 Vimをお使いの皆さんは設定ファイルや文書作成以外にもソースコードを作成・メンテ・閲覧などに利用されている事と思います。 そこで、ソースコードを追いかける時に便利なプラグインをご紹介したいと思います。なお、この記事は過去に私が書いたエントリーを再構成した内容となっています。 追いかけるソースコードを用意する まずは、追いかけたいソースコードを用意しましょう。例としてあげるソースコードはVimで世界的に有名なc9sさんが作った、巷で話題のRubyのBundler（やVimのVundle）ライクなPHP版Onionです。 $ git clone https://github.com/c9s/Onion.git cd ./Onion プラグインを設定する Source Exp
Wordpressに入れておくべき、基本的なプラグイン
「これは入れておかないと損するよ」という、実用性重視のプラグインの紹介。 セキュリティ対策【Akismet】スパムコメントを、除外する。元から入っているプラグインなので、有効化すべし。WordPress.com API キーが必要なので、面倒くさがらず、画面の指示に従い登録しましょう。ちなみに、他にwordpressのサイトを立ち上げた場合でも、再び、同じキーが使えますよ。 【Secure WordPress】名の通り、セキュリティ対策。 【WP Multibyte Patch】マルチバイト文字の対策。とりあえず、不具合を出さないために、入れておこう。 他機種のために【Ktai Style】携帯対応。デザインもいくつか選べれるよ。また、グーグルの携帯用の広告も、がんばれば入れれるよ。Amazonと楽天のアフィリエイトは、パソコンと携帯では別なので、注意が必要ですよ。 【WPtouch iP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry