タグ

ブックマーク / hamalog.tumblr.com (13)

  • jQuery.tinyscroller

    スムーズスクロールするやつ作りなおした。 APIコール時、コールバックを受け取るのをやめてdeferredを返すようにしたかったのでそのようにし、ごちゃごちゃになってたのを整理した。 GitHub - Takazudo / jQuery.tinyscrollerデモBasicLiveEventsAPI callAPI call - stopDeferredOptionsdeferredでやりとりすると、コールバック設定しまくらないといけないのが防げて便利

    jQuery.tinyscroller
  • jQuery.LazyJaxDavisで静的サイトを手軽にダイナミックにする

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQuery.LazyJaxDavisというライブラリを書いた。このライブラリは、一般的な静的に生成されるようなサイトを、HTML5 history APIの力を使って素敵にダイナミックにします。 このライブラリを使うと、すべてのリンクを、通常遷移の代わりに、Ajaxベースのダイナミックな遷移にします。その際、history.pushStateして、通常の遷移と同じように見せる。言葉にするのは難しいので、実際にサイトを見てもらったほうが分かりやすいと思う。以下のサイトの左ナビをポチポチクリックするなりして。 jQuery.LazyJaxDavis加えて、結構汎用的なURLルーターの機能も備えて

    jQuery.LazyJaxDavisで静的サイトを手軽にダイナミックにする
  • CoffeeScriptは自分にとっては有益だった

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / CoffeeScriptは是か否かという話は、CoffeeScriptを調べていれば否応なしに引っかかる話題で、自分もそれについてはかなり考えさせられた。何回かこのブログでも書いたとおり、CoffeeScriptいいなーと思ってはいて、ここ1,2ヶ月はずっとCoffeeScriptでJavaScriptを書いているんだけども、いい点はもちろんあるにせよ、書いているうちに、最初は見えてなかった問題も見えてきたりした感じがするので、その点について少し書きます。 なぜ CoffeeScript がよいか - 0xff.toBlog()なぜ CoffeeScript がダメか - 冬通りに消え行く制服

    CoffeeScriptは自分にとっては有益だった
  • jQuery.ui.domwindow - ThickBoxみたいなやつ

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / AjaxかIframeかなんかしらのコンテンツを擬似ダイアログに出すやつを書いた。 gitHub - Takazudo/jQuery.ui.domwindowなんの素っ気も無いダイアログなんだけれども、なんの素っ気も無いダイアログが欲しかったので書いた。ダイアログのスクリプトはそりゃー山のように世の中には存在するんだけれども、実際に仕事で使う時には、素敵な見た目とか全然いらないことが多いし、そんでもってAPIも柔軟に用意されてないと困るんだよなーと思うことが多かったので、そんな時に便利かもしれない。 今までそういう時は、自分は、DOM window っていうライブラリをよく使っていたんだけれど

    jQuery.ui.domwindow - ThickBoxみたいなやつ
  • jQuery.fx.offですべてのアニメーションをカット

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQueryのopacityアニメとIE6,7,8 - Takazudo hamalogでも昔書いたのだけども、IE8以下ではopacityに対応していないので、jQueryでアニメーションしようとすると、色々なことが面倒。そこで、ばっさりIE8以下対応をさっさとやるのが以下。どうのこうのでブラウザ判別でもして if (ieLessThan9){ jQuery.fx.off = true; }jQuery.fx.off = true にすれば、すべてのアニメーションが一瞬で終わるようになります。これでfadeした時でも一瞬で変わるから問題なしだぜイェイってねー。 ※これはかなりUIに関するJS

    jQuery.fx.offですべてのアニメーションをカット
  • CoffeeScriptをおすすめしたいワケ

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 以下のエントリでも少し書いたけれども、 CoffeeScriptいいかも - Takazudo hamalogそれ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、 サンプルこのひとまとめのUIを管理するクラス的な物を作ろうとしたら、例えば以下のようになる。 var Hoge = function(el) { this.content = el.find

    CoffeeScriptをおすすめしたいワケ
  • 任意の数のDeferredを$.whenに渡す

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / $.when.apply(this, [deferred, deferred, …]) とかやる demo on jsfiddlevar wait = function(millisec){ return $.Deferred(function(defer){ setTimeout(function(){ defer.resolve('I waited for ' + millisec); }, millisec); }).promise(); }; $(function(){ var fns = [ wait(200), wait(200),wait(500), wait(1000), wa

    任意の数のDeferredを$.whenに渡す
  • $.ImgLoader + spin.js でローディング待ってギャラリー的な

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 画像をパラパラフェードして切り替える様なUIをJSで作る時、画像をプリロードしておかないとパラパラ画像が出てきてちょっとかっこわるい。でもプリロードするのはめんどかったり、ローディング待ちの表示を出すのもちょっとめんどい。 そもそも、ローディング待ちのくるくるスピナーなアニメGIFって、あれローディング終わったらもう用済みだし、使うにしてもそいつを先にプリロードしておかないと意味ないし、なんかすごい無駄感漂うので微妙って思ってた。 そこで、あのくるくる、CSS3でやっちゃうのあったなーとか思って見てたけど、んーIEがねーって思って色々ググってたら、spin.js ってのを見つけた。これは、ロー

    $.ImgLoader + spin.js でローディング待ってギャラリー的な
  • classやidに-を使うとか使わないとか

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest logを見て、自分はいつも-を使ってるので、その理由を書いてみる。 結論から言うと、-でも_でもキャメルでもどれでもいいと思う。で、自分が-を使っているのは、jQuery UIcssがそのように書かれていて、僕が年中、ヘビーにjQuery UIのベースとなっているwidgetというフレームワークを使っているから。そして、仕事でやる場合にはだいたいコレを使うので、それに習っている感じ。参照:The jQuery UI CSS Framework -を使う時は、名前空

    classやidに-を使うとか使わないとか
  • JSの前にCSS読み込まないと色々うまくいかないことがある

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / head内にlinkでcss読み込んで、scriptでjs読み込んで、中で DOMContentLoaded だの jQuery(function(){}) だのやって云々とかやりますよね。これ、 link要素でCSS読み込みscript要素でJavaScript読み込みの順番でやらないと上手くいかないことがあるみたいです。って今日はじめて知りました。 OK(link先script後)NG(script先link後)NGの方を何度もリロードすると、ピンクのdivがたまにslideDownしない。自分がこれを確認したのはChrome。ver.16.0.912.63。理由は、link要素を先に書か

    JSの前にCSS読み込まないと色々うまくいかないことがある
  • 「Webデザイナーのための jQuery入門」という本を書きました

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 2011年12月7日発売です。もう屋に並び始めたみたい。 Webデザイナーのための jQuery入門これは、Webデザイナーとか、HTML+CSSを普段書いてるような人でJavaScriptをほとんど知らないという人がターゲットで、そういった人らがjQuery使ってちょっとしたものを自分で作れるようになれるようになったらええんじゃないかという感じで書かれたです。ちょっとしたモノっていうのは、こので解説している、以下のような機能です。 画像のロールオーバー入力フォームのガイドテキスト(「検索ワードを入力してください」みたいやつ)アコーディオン外部ファイルを読み込んで表作成スライドショータブ

    「Webデザイナーのための jQuery入門」という本を書きました
  • jQuery1.7で追加されたdeferred.notifyとdeferred.progress

    deferred.progressには、途中経過として実行したい関数を渡す。この関数はdeferred.notifyが呼ばれたときに実行される。途中経過resolveみたいな感じ。一連のステップを踏む処理を作る時、途中経過を示したいときに使えそう。プログレスバーとかなんかそんなやつに。 http://jsfiddle.net/Takazudo/SqL9k/deferred.then も、第三引数にprogressCallbackを受け取れるようになっていた。 http://jsfiddle.net/Takazudo/UZCHs/

    jQuery1.7で追加されたdeferred.notifyとdeferred.progress
  • Backbone.jsでなんか作ってみた所感

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / とりあえず、JSONデータを用意して、それをもとにUIをガリっと作るような機会があったので、半ば無理矢理Backbone.jsが便利なのかどうか試してみた。サンプルは出せないけど、JSONファイルを元に、地図にポツポツポイントをおいて、それクリックしたら遷移したり、地図がズームしたりとか、そんな感じのもの。感想は、「サーバーと連携する機能が無い限りは、そこまで意味が無い」 arrayとobjectが混ざって階層化されたJSONを扱う時、Backbone.jsで、arrayをCollection、objectをModelでラップし、これをネストさせた形でモデル部分のクラスを構成する。そして、それ

    Backbone.jsでなんか作ってみた所感
  • 1