タグ

ブックマーク / ginpen.com (7)

  • jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com

    仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基パターンという事で。

    jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
    yamadar
    yamadar 2015/03/30
    有用でした。ありがとうございます。
  • スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ!(Frontrend Advent Calendar 2013 – 06日目) | Ginpen.com

    (追記: 2018年10月)何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。(これ今後数年で大流行りしそうに思うので、未読なら是非!) さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが(周回遅れ)、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何

    スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ!(Frontrend Advent Calendar 2013 – 06日目) | Ginpen.com
  • CSSでグラデーションを使うときにhsl()が便利すぎる。(CSS おれおれ Advent Calendar 2012 – 19日目) | Ginpen.com

    CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image: linear-gradient( top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );

    CSSでグラデーションを使うときにhsl()が便利すぎる。(CSS おれおれ Advent Calendar 2012 – 19日目) | Ginpen.com
    yamadar
    yamadar 2013/06/04
    現行ブラウザの hsl() サポート状況は、IE8以前を除けばOKそうです。http://www.browsersupport.net/CSS/hsl()
  • 典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com

    一口にJSerといっても、色々な分野の人がいます。あなたはどんなJSerになりたいですか? 方向性により学ぶべき事も変わってきます。目標を明確にしましょう。 というわけで、独断と偏見……というか主に偏見で三種類にまとめてみました。 追記: 「勉強法」とかタイトルに付けておきながら勉強法に触れてませんでしたので「勉強範囲」に修正しました。ひー。 三種類 アニメーションを作る人 アプリを作る人 サーバ側を作る人 基的にプログラマ視点です。コーダー視点も最後に。 では、それぞれ見てみましょう。 アニメーションを作る人 Flashの代わりにJavaScriptCSSを使う人。Flasherさんがシフトしてくる位置。 発注側が想定するJavaScripter。最近の携帯ゲームで需要がある。 お仕事 JSだけでなくCSSや画像を駆使して画面を描く。 UIだけならいなくても困る事はないけれど、UX

    典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com
  • jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com

    個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。(ちょっとだけどね。) えらい! jQuery Blog » jQuery 1.8 Released jQuery Blog » jQuery 1.8 Beta 1: See What’s Coming (and Going!) jQuery Blog » The New Sizzle jQuery Blog » jQuery Core: Version 1.9 and Beyond jQuery Blog » jQuery 1.9 and 2.0 — TL;

    jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com
  • jQuery1.6の更新内容をまとめたよ。 | Ginpen.com

    昨日jQuery1.6が公開されたので、その内容をまとめてみました。 jQuery: » jQuery 1.6 Released だいたい原文にそってますが、翻訳ではありません。 追記 : data()の扱いが誤っていたので修正しました。キーをキャメルケースにする必要があるとしていましたが、引数を与えずにマップを得た場合の話で、引数にキーを与えて個別に取得する場合は過去のコードと互換性があります。thanks @GeckoTang !(23:11) 変更点 既存コードに影響がある変更がいくつかあります。 data属性の自動マッピング ハイフン “-” を含む名前のとき、$element.data()に引数を与えずに得たマップのキーはキャメルケースに変換されるようになりました。 var $div = $('<div data-abc-xyz="123" />'); var data = $d

    jQuery1.6の更新内容をまとめたよ。 | Ginpen.com
  • jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com

    先日jQuery 1.6がリリースされましたが、案の定.attr()関連で議論になったようで、一週間後に後方互換を保つ更新が行われました。 jQuery: » jQuery 1.6.1 Released 1.6の更新内容は先日の記事をご覧頂ければ。 jQuery1.6の更新内容をまとめたよ。 | Ginpen.com 更新内容 jQuery 1.6では.prop()メソッドの追加と.attr()メソッドの変更があり、これが「属性」と「プロパティ」の差、及び関係性についての議論を引き起こしました。結果として、1.6.1では後方互換を保つよう修正される事になりました。 つまり1.5.2から(1.6を飛ばして)1.6.1へバージョンアップする際は、.attr()関連のコードは変更が不要です。 なお.date()の方は1.6のリリースノートの通りの動作のままである事に注意してください。 前回(1.

    jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com
  • 1