[B! jquery] amari3のブックマーク

脱jQueryのためにしたこと - ICS MEDIA

脱jQueryという主張をよく耳にします。私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。リニューアルにあたってJavaScriptで改善したかったことリニューアルにあたって

amari3 2019/04/03

リンク

汎用性重視のテーブルフィルタリング系 jQuery プラグイン | CYOKODOG

汎用性を重視したテーブルフィルタリング系の jQuery プラグインです。実装の基本思想は以前書いた「jQuery によるシンプルなテーブルフィルタリング処理の実装を考えてみる」に基づいてます。変更履歴 v0.5 フィルタ条件の入力フィールドを自動生成する機能を追加しました。 Excel のオートフィルタのようなプルダウン、ラジオボタン、チェックボックスによる条件入力フィールドの自動生成機能を追加しました。 QueryString によるフィルタリング機能を追加しました。 Bootstrap3 対応。使用手順の説明、デモを大幅刷新しました。 v0.4 １つの条件入力フィールドを複数カラムに対し適用した場合、当該フィールドについては OR 条件でフィルタされるようにした。 v0.3 プラグインの実行時、パラメータ名を指定ぜずフィルター要素のみを指定できるようにした。 $(‘table’

amari3 2016/05/20

jquery

リンク

tablesoterをRailsで使う方法 + FilterとSort機能の使い方 - 脳汁portal

jueryプラグインのtablesorterをRailsで使う方法です。 tablesorterはtableをsortしたりfilteringするjQueryプラグインです。ソースコードまずはじめに、tablesorterには本家とforkして他の人が開発しているPageの二つのドキュメントがあります本家： http://tablesorter.com/docs/ Fork： https://mottie.github.io/tablesorter/docs/ 今回はForkの方を利用する方法を記載します。ライブラリのダウンロード app/assets/javascriptsディレクトリに jquery(jquery-2.1.1.min.js) jquery.tablesorter.combined.js(v2.23.2) をダウンロードして配置します https://mottie

amari3 2016/05/02

jquery
sort

リンク

jQuery plugin: Tablesorter 2.0

amari3 2016/04/12

リンク

そこそこユーザビリティの高いフォームを作った

そこそこユーザビリティの高いフォームを作った入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。フォームサンプルソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。フロントエンド実装だけです（サーバ側スクリプト

amari3 2014/01/20

jquery

リンク

jQuery Countdown を使ってカウントダウンタイマーを表示する | バシャログ。

ハッピーバースデートゥーミー！今日が誕生日のinoueです。さて、診断テストのような入力フォームを表示する場合、時間制限を設けたい場合があります。そういったページに「あと〇〇分」というカウントダウン表示を簡単に追加できるjQueryプラグイン『jQuery Countdown』を今回紹介します。概要 jQuery Countdown 使い方は上記のサイトのトップページを見ればすぐわかります、というくらい非常に簡単かつオプションも豊富。多言語対応もすでにされています。例えば、id:timeCount の要素に liftoffTime までの残り時間を時分秒（=HMS）で表示したい場合は次のように記述します。 $('#timeCount').countdown({until: liftoffTime, format: 'HMS'}); サンプル：今から20分後までのカウントダウン

amari3 2013/10/09

リンク

jQuery Countdownを使用してカウントダウンの仕組みを実装してみる

カウントダウンの機能をjavascriptで実装しようと思ったら、いいプラグインを見つけた。 jQuery Countdown jQuery Countdownはその名の通り、カウントダウン機能を実装するjQueryのプラグイン。時間のフォーマットの融通が利いたり、カウントダウン終了時にイベントを起こしたりできる。しかも簡単。以下よりcheckoutが可能。 $ svn checkout http://jquery-countdown.googlecode.com/svn/trunk/ jquery-countdown で、こんな感じで使う $(function(){ $('#counter').countdown({ image: '/fileset/jquery-countdown/img/digits.png', startTime: '01:01:01:00' }); });

amari3 2013/10/09

リンク

jQuery Countdown

A jQuery plugin that sets a div or span to show a countdown to a given time. The current version is 2.1.0 and is available under the MIT licence. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations. Download now Defaults Formats 1 Formats 2 Layouts Significant Count Up Relative Pause/Lap Time Zones Callbacks Localisa

amari3 2013/09/20

リンク

Morris.js

Making good-looking graphs shouldn't be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing simple charts easy.

amari3 2013/06/25

リンク

jquery.storage.jsを作ってみた。 - @thorikiriのてょりっき

sessionStorageとlocalStorageって便利なんだけど、ちょっと不便なところがあるので、もっと便利にしてみようと思って作りましたよ。不便な点は次の通り有効期限の設定をすることが出来ない暗号化・復号化をしてから出し入れしないとダメ文字列形式でしか保存されないのでJSONを文字列化したりパースしてから出し入れしないとダメ基本的な使い方はこんな感じ // 今まで通り（風）の使い方（暗号化されます） $.sessionStorage.setIt em("key", "value"); var val = $.sessionStorage.getIt em("key"); $.sessionStorage.removeIt em("key"); $.localStorage.setIt em("key", "value"); var val = $.localStorage.ge

amari3 2013/06/10

html5
jquery

リンク

フォームのバリデーション用jQueryプラグインいろいろ+α

個人的なメモ。普段さほど使うことが無いので、必要な時に探すのに時間掛からないようにまとめておきます。沢山ある必要はさほど無いのですが、勉強用も兼ねていろいろと数を揃えておきました。お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。

amari3 2013/03/12

form
jquery

リンク

なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密

日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。な

amari3 2013/03/08

リンク

1216彩票-官网平台

您不具备使用所提供的凭据查看该目录或页的权限。请尝试以下操作：如果您认为自己应该能够查看该目录或页面，请与网站管理员联系。单击刷新按钮，并使用其他凭据重试。 HTTP 错误 401.1 - 未经授权：访问由于凭据无效被拒绝。 Internet 信息服务 (IIS) 技术信息（为技术支持人员提供）转到 Microsoft 产品支持服务并搜索包括“HTTP ”和“401 ”的标题。打开“IIS 帮助”（可在 IIS 管理器 (inetmgr) 中访问），然后搜索标题为“身份验证”、“访问控制”和“关于自定义错误消息”的主题。

amari3 2013/01/09

jquery

リンク

jQueryのDeferredを用いたモダンなAjax処理の書き方

目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes

amari3 2012/12/14

ajax
jquery

リンク

jQueryでsetIntervalを使って特定の間隔でfunction処理を繰り返し行う（タイマー処理）方法｜BLACKFLAG

JavaScriptでのfunctionを一定の間隔で繰り返し処理を行う時の指定に使う「setInterval」。 jQueryでこの指定を使うこともでき、単純な記述ですが、さまざまなループ処理などにも使えるので参考までに使い方をメモ書きしておきます。 $(function(){ setInterval(function(){ ～ここに処理を記載～ },1000); }); 最後の数値部分は繰り返し処理を行う間隔になります。例えば、3秒ごとに画像の位置を10pxずつ、ズラす場合は $(function(){ $('img').css({left:'0',position:'absolute'}); setInterval(function(){ $('img').stop().animate({left:'+=' + '10' + 'px'},1000); },3000); }); この

amari3 2012/11/30

jquery

リンク

http://webcake.no003.info/webdesign/jquery-ajax-php-timer-kanshi.html

amari3 2012/11/27

jquery

リンク

グラフ描くならMorris.jsがお手軽で良いかも - (ﾟ∀ﾟ)o彡 sasata299's blog

2012年11月16日13:55 JavaScript Ruby グラフ描くならMorris.jsがお手軽で良いかもこんにちわ。寒くなってきましたがみなさまお元気ですか？さて、先日ちょっとしたグラフを描画したかったんですよ。それでなにか使いやすいライブラリ無いかなーと思っていたら railscast (revisedなので有料です) で Morris.js ってjQueryプラグインが紹介されてて良さげだったので使ってみました。google analytics みたいなツールチップも出してくれます。使い方はとっても簡単です。まず、jQuery (>=1.7) と Raphael (>=2.0) が必要です。あとは Morris.js があれば動作します。これらを app/assets/javascripts/application.js に設定してください。この記事執筆時点での

amari3 2012/11/16

jquery
graph

リンク

jqMobi (1.11) の jQuery との互換性、Zepto とも比較 - メモ用紙

2013年11月現在、jqMobi は App Framework へ、Zepto は v1.0rc1 から v1.0 (正式版) へとバージョンアップしています。最新版 App Framework, Zepto.js 1.0 と jQuery との互換性をご覧ください。jQuery と互換性があり、とっても軽い JavaScript ライブラリ jqMobi. jquery-1.7.2.min.js が 93 KB なのに対し、jq.mobi.min.js (1.11) はわずか 19.4 KB。ファイルサイズだけでなく、スクリプトの初期化も圧倒的に速い。（iPhone 4 / iOS 6 の Safari では jQuery 1.7.2/1.8.2 が 70 ms, Zepto v1.0rc1 が 20 ms, jqMobi 1.11 が 14 ms 程度。iOS 5 ではもっと差が

amari3 2012/11/14

リンク

jQueryの未来に備える - Cybozu Inside Out | サイボウズエンジニアのブログ

こんにちは、kintoneを作っているエンジニアの佐藤鉄平(@teppeis)です。先日10/24に発売されたWEB+DB PRESS Vol.71のJavaScript連載で「プログラマのためのjQuery再入門」という記事を書かせて頂きました。ワンランク上のjQuery使いを目指す方のために、こんな内容になっています。パフォーマンスアップの秘訣 Sizzleの仕組みとセレクタの高速化 on/offによる新しいイベント制御API Deferredを使った非同期処理最新版の1.8.2をもとに書いたので、1.4あたりでjQueryに入門した方の知識のブラッシュアップにもオススメです。是非ご覧ください。これでもう「jQueryは甘え」なんて言わせません！ jQuery 1.9で削除されるかもしれないAPIたちさて、jQueryの次期バージョン1.9が来年前半に計画されています。 1.