JavaScriptでTABLEにソート機能を実装する（jQuery不要）
※仕様説明 灰色のタイトル部分をクリックするとソートされる 同じ項目をもう一度クリックすると逆順にソートされる 数字しか入っていない列は数字として扱われる（小数点付きも数字として扱われる） 1行でも文字列が含まれている列は文字列としてソートされる 何も考えずに文字列ソートで実装してしまうと、列名「No.」などは「1、10、2、3、4...」という並び順になりますが、そこは仕様説明のとおり、数値しか入っていない列は数値比較によってソートしています。 列名「数値項目」にあるとおり、1.234などの小数点付きの値もきちんと数値として扱っています。 ただし、列名「カンマ」にあるような3桁区切りされた数値は文字列として扱われるため、文字コード順になります。 HTMLソース <table id="sort_table"> <tr> <th>No</th> <th>全角項目</th> <th>数値項目<
非jQuery環境ではどう書んだっけ?チートシート - Qiita
※追記 コメントでこの記事よりも断然質の良い記事を教えてもらいました。 @kabochaさんありがとうございます。 You Don't Need jQuery https://github.com/oneuijs/You-Dont-Need-jQuery 追記の追記。 日本語訳のお手伝いをさせていただきました。 github https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ja.md [Qiita]もうjQueryは必要ない http://qiita.com/tatesuke/items/b9548dd484b01b139b74 jQueryが使える環境でコーディングした後、jQueryが使えない環境でコーディングしようとすると、「どう書くんだっけ？」となることが多いです。ということで分かる範囲でチートシ
jQuery でなんか書くときのちょっとした規約 - 犬ターネット
規約ってほどでもないけど、jQuery でコード書くときは以下みたいな感じで書くことが多くなった。 どう書こうが好みだろうけど、jQuery オブジェクトに $ を付けるくらいはしといたほうがよい。
jQuery UI 1.10 日本語リファレンス | js STUDIO
このサイトについて jQuery UIの日本語リファレンスです。 jQuery UIの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 このリファレンスではjQuery UIのバージョンは1.8以上を対象としていますので、それ以前のバージョンについては当てはまらない 箇所もあると思いますので注意してください。 また、1.8以降のバージョンによる違いについて、なるべく記述しているようにはしていますが、内部処理やclass名の変更等、全ては書ききれてはいないので、 詳細について知りたい場合は公式サイトでの確認をお願いします。 jQuery UI 1.9アップグレードガイド(英文) jQuery UI 1.10アップグレードガイド(英文)
Jenkins + PhantomJS + QUnit でJavaScriptをCIする » 梨木を読む
最近とあるプロジェクトで、JavaScriptを使い、お客さん先のホームページを読込、その内容に応じて広告をJavaScript内で生成する『レコメンドエンジン』の配信サービスを提供している。 その中で、JavaScriptが複雑化してきたので、JSのxUnitの書き方と、CIサーバJenkinsに載せるようにしました。 JavaScriptの単体テスト QUnitとJasmineを調べたが、ピュアなxUnitが好きなので、今回QUnitを選択した。QUnitのテスト表記は下記のようにシンプルなequal関数でサクサクかけました。 書きながらソースコードのリファクタリングも進みました。やはりテストコード書くとコードの悪い所が顕著に見えるのが心地いいです。 １，QUnit 元々は、jQueryのテストフレームワークとしてスタートした。現在はjQueryに依存していない 公式サイト：ht
[JS]パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるスクリプト -Gridster
CSS3アニメーションのかっこいいエフェクトを伴って、パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるjQueryのプラグインを紹介します。 パネルはグリッドに沿って、カラムをまたいでも移動できます。移動した際に他のパネルは指定した縦列・横列数とマージンを維持します。 他のパネルも移動可能です。 対応ブラウザ Internet Explorer 9+ Firefox Chrome Safari Opera Gridsterの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="libs/jquery.js"></script> <script type="text/javascript" src="jquery.gridster.js"></scri
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
スマートフォンに特化することでjQuery API互換ながら5KB以下なJavaScriptライブラリ·Zepto.js MOONGIFT
Zepto.jsはjQuery API互換のスマートフォンブラウザ向けJavaScriptライブラリ。 Zepto.jsはJavaScript製のオープンソース・ソフトウェア。最近のWebシステム開発ではjQueryを使わないことがなくなったとさえ言えるかもしれない。それくらい頼り切ってしまっている。普通にJavaScriptを書くのが苦しくなるくらいだ。 サンプル。大抵の機能はデスクトップブラウザにも対応。 そのためスマートフォン向けのサイトでもjQueryを使ってしまう。だがデスクトップのように高速な回線でない場合もあるため、jQueryの90KBくらいのサイズは非常に重たいのだ。そこで使ってみたいのがjQuery API互換の軽量ライブラリであるZepto.jsだ。 Zepto.jsは何と5KB以下で提供されている。eachやmap、$を使ったDOMアクセス、Ajax、findなど基
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
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(
Any+Time DatePicker/TimePicker AJAX Calendar Widget - HTML5, AJAX, JSON and XML Consulting and Training by Andrew M. Andrews III (SM)
Commercial use is now permitted under a JS Foundation-style (MIT-style) license! Download Sexy is OVER-RATED. Let's try USER-FRIENDLY. It seems like there's a million calendar and clock widgets out there, and when you look past the eye-candy, they all have one thing in common: they're tedious at best. At worst, counter-intuitive. Sure, a picker that uses sliders or spinners, or looks like an analo
テーブルにソート、内容編集、行の削除等の機能を加えるjQueryプラグイン・TableGear - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 なかなか多機能なライブラリだったので 備忘録。テーブルにソート、コンテンツの 編集や、Ajaxによる行の削除が可能な jQueryプラグイン・TableGearです。この 手のプラグインはいくつかありますが、 中でもかなり高機能な気がします。 jQueryだけでなくmootoolsも用意されてるみたいです。テーブル内でソートが可能で、セル内は編集できます。もちろん、編集後のソートもOK。行そのものを消す事も可能ですよ。 セル内は編集可能で、普段はこのように通常と変らないインターフェースを維持できます。マウスでクリックするとプルダウンや入力エリアが出現。 編集してもソート機能は維持 ソート機能が付いていますが、セル内に変更を加えても、変更後の内容でソートしてくれます。
使い道色々。jQueryを使ってSparklineグラフを描く·Peity MOONGIFT
PeityはjQueryでSparklineグラフ（円、棒、折れ線）を描くJavaScriptライブラリ。 PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。 Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行わない。そのような説明がなくとも十分理解できるグラフについて使われる。ごく小さいので文章中に埋め込むのも容易だ。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができる。 折れ線グラフ タグの中に埋め込まれた文字を使ってグラフにして
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
Web開発にお役立ちな30のハイクオリティなグラフ描画ライブラリ | TRIVIAL TECHNOLOGIES 4 @ats のイクメン日記
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー Webにグラフやチャートを描画するライブラリを探していたら見つけました。いろいろあるもんですね:-)。 30 High Quality Charts And Graphs For Webdevelopers To Download 個人的に興味を持ったものをかいつまんでご紹介:-)。 gRaphaël Raphaëlというライブラリをベースに開発されているグラフ描画ライブラリ。MITライセンス。シンプルなコーディングで綺麗なグラフを描画できる。幅広いブラウザ(Firefox 3.0以上, Safari 3.0以上, Opera 9.5以上，Internet Explorer 6.0以上
jQueryMobileを使ってのスマートフォンサイトの構築メモ at HouseTect, JavaScriptな情報をあなたに
Dalam dunia hiburan digital, SURGAVIP kembali menjadi sorotan setelah Broadcasting Empire merilis ulasan eksklusif mengenai pola permainan dari salah satu provider terfavorit, yaitu Pragmatic. Penelusuran kali ini berfokus pada peluang kejutan jackpot maxwin yang sedang ramai diperbincangkan komunitas game online. Broadcasting Empire menyoroti bagaimana konsistensi kemenangan dalam game pragmatis
シンタックスハイライターでコードをわかりやすくする「jQuery Syntax Highlighter」
twitter facebook hatena google pocket コードを表示させたい時、テキストの一部を分類ごとに異なる色やフォントで表示するとわかりやすくなります。 これをシンタックスハイライトと呼んだりしますがSnippet :: jQuery Syntax HighlighterはjQueryでそれを簡単に実現します。 また選べるスタイルも多いので、重宝するかも知れません。 sponsors 使用方法 Snippet :: jQuery Syntax Highlighterからjquery.snippet.js、jquery.snippet.cssをダウンロードします。 また、jQueryからjquery.jsをダウンロードしてください。 次に下記のようにそれらを読み込みます。 <link rel="stylesheet" type="text/css" href="jq
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nanoScroller.js - A jQuery plugin that offers a simplistic way of implementing scrollbars.
http://www.cmmntr.com/m/22