jQuery UIのTabsのタグにそのまま適応できる、超簡素なタブUIプラグイン。 Knockout.jsの練習として作成。 コード量は多くないが、バインディング部分を文字列で合成しないといけないのが大変ネック。 (function($, ko) { var TabViewModel = function(activeId) { var T = this; T.activeId = ko.observable(activeId); T.isActive = function(id) { return T.activeId() === id; }; T.activate = function(id) { T.activeId(id); }; }; $.fn.koTabs = function(opts) { opts = $.extend(true, { tabs: "> ul > li
CSS3で追加されたanimationを使って何かしてみたかったので、画像を次々入れ替わって表示されるスライドを作ってみました。 まだまだ実用的ではないので、今回ChromeやSafariのWebKit系のみになりますのでご了承ください。 こういうのを何と呼べばいいのかよく分からなかったので、皆さんがイメージしているものと違ったらごめんなさい。 今回は別サーバーにサンプルを用意しました。 HTMLは非常にシンプルです。 <div id="img-slide"> <a href="#"><img src="img1.png" id="img1" /></a> <a href="#"><img src="img2.png" id="img2" /></a> <a href="#"><img src="img3.png" id="img3" /></a> <a href="#"><img src
// ==ClosureCompiler== // @compilation_level SIMPLE_OPTIMIZATIONS // @output_file_name default.js // ==/ClosureCompiler== // ADD YOUR CODE HERE function hello(name) { alert('Hello, ' + name); } hello('New user');
特徴 配置と動きに特化した Javascriptライブラリです。 シンプルで柔軟性もあり、 処理も高速です。 対応OS / ブラウザ iOS 7+ Android 4.1+△ Android 4.4+○ IE9+ Safari latest Chrome latest Firefox latest
こんにちは、keiです。 今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。 ランサーズ上で、大容量ファイルのアップロード機能を実装することになった際に、以下の軸で調査した結果となります。 手軽に実装できる 見た目が今風 (大容量なので)アップロード中にプログレスバーが表示される Uploadify http://www.uploadify.com/ 複数ファイルアップロードが可能なjQueryプラグイン。 HTML5バージョンとFlashバージョンがあります。 長所 豊富なドキュメントとデモ 高いカスタマイズ性 短所 HTML5はライセンスが必要 Plupload http://www.plupload.com/ HTML5、Flash、Silverlightに加え、GearsとBrowserPlusにも対応し
この記事は会社内の別チームの方に、 僕の今のチームで git をどう運用してるかを ワークショップ形式で説明するための資料である。 事前準備 git と git-flow を入れておくこと 参考資料(Macでgitとgit-flowインストール) - xcode cli toolインストール -- https://daw.apple.com/cgi-bin/WebObjects/DSAuthWeb.woa/wa/login?appIdKey=d4f7d769c2abecc664d0dadfed6a67f943442b5e9c87524d4587a95773750cea&path=%2F%2Fdownloads%2Findex.action - homebrew のインストール -- https://github.com/mxcl/homebrew/wiki/installation - b
さらに一歩踏み込んだCSS3の使い方!コツとポイントを理解して 楽しくサイトを彩る方法1 of 55
fastClick.jsはMobile Safariのクリックイベントにおける遅延を改善するソフトウェアです。 iPhoneのMobile Safariにおいてリンクをタップした時の動作が重たい(遅い)感じがしたことはないでしょうか。実際、300msくらいの遅延が発生しているようで、Webブラウザゲームなどではもっさりした動作に感じてしまいます。そこで使ってみたいのがfastClick.jsです。 テスト画面です。上が高速処理を施したもの。下は施していないものになります。 実際に押した感じとしてレスポンスは上のが速いです。 クリックする度にカウントされますが、キャッシュが使われていると思われてもやはり上のが速いです。 具体的な処理についてはソースを見ていただくとして、体感として速くなっているのが分かるかと思います。touchendなどのイベントでは遅くならないらしいですが、clickイベン
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード <script type='text/javascript' src='http://ajax.googleapis.c
適当に書いた奴をGithubにあげておいた。 mizchi/haxe-try https://github.com/mizchi/haxe-try enchant.jsもHaXeから触ってみた。nodeとenchant.js、enchantの型アノテーションは haXeでenchant.jsする利点 - mitamex4uの日記 http://d.hatena.ne.jp/mitamex4u/20111230/1325248577 を使わせていただきました。 とりあえずクイックソート 配列操作系のユーティリティはあんまりなさそう。 undescore.jsクローンのUndescore.hxってのはあった。が、名前空間がほんとにUnderscore.mapとかで冗長な気が… HaXeを使う指針 何よりも気に入ったのが型がオプショナルであるという点。Dynamic型にすればそれ以下のプロパティ
(function(win, doc){ if (win.File && win.FileReader && win.FileList && win.Blob){ }else{ alert("FILE APIに対応してないよん"); return; } var inputFile = doc.getElementById("inputFile"), result = doc.getElementById("result"); var isImage = function(file){ return file.type.match("image.*")? true : false; }; var loadDataURL = function(file, callback){ var reader = new FileReader(); reader.onload = function(){
GALAXY NEXUSのモニターオフするときのエフェクトが面白かったのでCSSでざっくり真似る。 webkitのみ。 <input type="radio" name="power" id="power-on"> <input type="radio" name="power" id="power-off"> <label for="power-on" onclick>ON</label> <label for="power-off" onclick>OFF</label> <div id="monitor"> <div> <img src="http://jsdo.it/static/assets/svggirl/02/material.svg" width="320" height="240"> </div> </div> input[name=power] { display: n
Web アプリケーションからファイルを扱う | Mozilla Developer Network https://developer.mozilla.org/ja/docs/Using_files_from_web_applications に掲載されている、サムネイル表示の例。 jQueryのバグでevent.dataTransferがundefinedになるため、 http://bugs.jquery.com/ticket/10756 jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] }; として回避する。 //http://bugs.jquery.com/ticket/10756 jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] }; function h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く