タグ

JavaScriptとjqueryに関するmasa0x80のブックマーク (28)

  • jQuery 2.2 and 1.12 Released | Official jQuery Blog

    To usher in the new year, the jQuery team has been hard at work on 2 new releases: jQuery 1.12.0 and 2.2.0! These releases include lots of bug fixes and improvements to make your cross-browser development experience better. We anticipate this to be the last releases for the 1.x and 2.x branches before we release jQuery 3.0. Since jQuery 3.0 will have some breaking changes, we will continue to supp

  • 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

    jQueryのDeferredを用いたモダンなAjax処理の書き方
  • jQueryの必要なところだけを取り出せる「jQuip」:phpspot開発日誌

    jQuip - jQuery in parts :: Builder jQueryの必要なところだけを取り出せる「jQuip」。 ajaxの機能だけを使いたいのに、全部インクルードしちゃうのは回線のムダでパフォーマンスにも影響しますね。 ということでajaxの機能だけとかcssの機能だけといった風にチェックボックスでチェックすればコードをWEB上で取得できてそのままコピペで使えるというものです。 サイト上でminifyしたり逆も可能です。 いらない機能は読み込みたくないものですがこれはナイスですね 関連エントリ 円形で回転するタイマーを実装できるjQueryサンプル Twitter OAuth認証をポップアップで行うjQueryプラグイン 良い感じで動作するニュースティッカー実装jQueryサンプル

  • 綺麗なツリービューが実装できるjQueryプラグイン「jsTree」:phpspot開発日誌

    jsTree Examples 綺麗なツリービューが実装できるjQueryプラグイン「jsTree」 次のようなWindowsのツリービューっぽいUIが実装できます。JSONやXMLデータをツリーとして表示することが可能です。 アプリケーションで使い慣れた機能をWEBでも簡単に使えるのはいいですね クリックでアイテムの選択も可能です。 実装は最低限次のコードで実現できます $("#demo1").tree(); 関連エントリ WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」

  • jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる

    久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下

    jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
  • シンプルでインタラクティブな地図を実装できるjQueryプラグイン「jVectorMap」:phpspot開発日誌

    jVectorMap シンプルでインタラクティブな地図を実装できるjQueryプラグイン「jVectorMap」。 シンプルデザインながら拡大してもクオリティが保たれていて高速レスポンスの地図が実装できます。国ごとのカラーリング等も可能なので、アクセス解析とかそういった部分で使えるのかも。 地図クリックで各種コールバック関数が使えるため、フォーム内で国の選択といった入力補助プラグインとしても機能しそうです。 今後の国際化の流れにおいて便利に活用できる局面があるかもしれません。 マウスオーバーで変色。インタラクティブに動作。クリックしたコールバック設定もOK 国ごとのカラーリングを示した例です。 アメリカだけを対象に描画も可能 ヨーロッパだけもOK 拡大しても新たにデータを読み込むわけでもなく高速なレスポンスが期待できます。 作った方お疲れ様でした&すごい! 関連エントリ ドラッグできる地図

  • jQueryプラグインの書き方を考えてみる(2) - Cyokodog :: Diary

    更新履歴 2010-01-21 プラグイン定義方法については、約1年後に再考した下記エントリの方をお勧めします。 jQuery プラグインの定義パターンについて調べてみた - Cyokodog::Diary プラグイン API の定義パターンについて調べてみた - Cyokodog::Diary jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog::Diary jQuery ライクなプラグイン API の定義方法を考えてみる - Cyokodog::Diary jQuery 用にカスタマイズした myclass.js を使用して、プラグインの定義方法を考えてみます。 myclass.js による クラス定義 myclass.js を使用するとクラスベースな OOP な書き方ができます。 (function(target){ target.Sam

    jQueryプラグインの書き方を考えてみる(2) - Cyokodog :: Diary
  • jQueryプラグインの書き方を考えてみる(1)

    更新履歴 2010-01-21 プラグイン定義方法については、約1年後に再考した下記エントリの方をお勧めします。 jQuery プラグインの定義パターンについて調べてみた - Cyokodog::Diary プラグイン API の定義パターンについて調べてみた - Cyokodog::Diary jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog::Diary jQuery ライクなプラグイン API の定義方法を考えてみる - Cyokodog::Diary プラグインを書いてみる まずこのへんの記事を参考に、 jQueryは、プラグインで手軽に機能を実装できるのが特徴です。プラグイン・ディレクトリ(Plugins | jQuery Plugins)に沢山のプラグインが公開されていますが、作り方を調べてみたら、かなり簡単に自分でも作成できるよ

    jQueryプラグインの書き方を考えてみる(1)
  • jQuery 1.5の新機能: jQueryのサブクラスが作れるようになる | へびにっき

    jQuery 1.5 beta1 のリリースノートを見ていたら面白そうな機能があったので紹介。 jQuery.subclass() でjQueryのサブクラスを作ることができる var MyjQuery = jQuery.subclass(); 作成したサブクラスには独自のメソッドを定義することができる。定義の仕方、使い方は通常のjQueryと全く同じ。 MyjQuery.fn.writeHello = function(){ this.text('Hello World'); }; MyjQuery('p').writeHello(); 通常のjQueryメソッドはサブクラスでもそのまま使える。サブクラスを作った後に追加したメソッドも使えるので、プラグインによる拡張と組み合わせても大丈夫。 MyjQuery('div').css('border', '1px red solid').wr

  • Kanasan.JS jQuery コードリーディング #2 に参加したので復習とコードの解説をする - mollifier delta blog

    2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われた(告知ページ)。みんなで jQuery のソースコードを読む勉強会で、僕は初めての参加。事前に前回分も読んでおいたので準備万端、気合いを入れて参加した。 で、今回の内容なんだけど、642行目から1205行目まで読み終えた。全部で6240行なので全体の5分の1ぐらい終わったかな。今回は普段外部から使うものじゃなくて、jQuery 内部で使う関数のところが多かった。あとは jQuery マニアしか使わないようなメソッドとか。そんなわけで使い方がイメージしにくいところもあったので、その中でわかりにくかったとこを復習して挙げておく。 あと、今回読んだ jQuery のバージョンは 1.4.2。 前提 こんな感じでメソッドを追加してるところがある。 jQuery.extend({ queue

    Kanasan.JS jQuery コードリーディング #2 に参加したので復習とコードの解説をする - mollifier delta blog
  • jQuery ソースコードを読むための参考資料一覧 - mollifier delta blog

    2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われる(告知ページ)。みんなで jQuery のソースコードを読むイベントで、今回が2回目だ。参加者募集中です。 jQuery はファイル1つだけのライブラリなのですごい環境とかもってなくても大丈夫なんだけど、読むうえで参考になるサイトとかをまとめてみた。この辺の準備をしておくと理解が深まると思う。 ソースコード http://code.jquery.com/jquery-1.4.2.js http://github.com/jquery/jquery まずは jQuery のソースコードを取ってこないと始まらない。今回はバージョン 1.4.2 を使用する。jQuery の公式サイトから圧縮していないコードをダウンロードしよう。 それと、jQuery ソースコードは Git で管理されて

    jQuery ソースコードを読むための参考資料一覧 - mollifier delta blog
  • jQuery Text Change Event を使って twitter をインクリメンタル検索するサンプルを書いた - mollifier delta blog

    jQuery Text Change Eventってのを見つけた。jQuery のカスタムイベントを定義するプラグインで、テキストボックス、テキストエリアの内容が変わるたびにイベントが発生するようになる。 キー入力をイベントで処理するのってかなりめんどくさいんだけど、これで「テキストボックスに入力があるたびに何かする」みたいなことが簡単にできるようになる。 イベント一覧 具体的には以下の3つのイベントが発生するようになる。 textchange テキストの内容が変わったときに発生するイベント hastext テキストが空の状態から何か入力されたときに発生するイベント notext テキストが空でない状態から空になったときに発生するイベント 使い方はこんな感じ。 $('#inputbox').bind('textchange', function(event, previousText) {

    jQuery Text Change Event を使って twitter をインクリメンタル検索するサンプルを書いた - mollifier delta blog
  • jQueryはモナドだ - id:anatooのブログ

    この記事はjQuery is a Monad | Important Shockという記事の勝手訳です。 追記1: bonotakeさんが補足記事を書いてくれています → JQueryがモナドかどうかとか - たけをの日記@天竺から帰ってきたよ 追記2: hirataraさんが補足記事を書いてくれています → jQueryは当にモナドだった - 北海道苫小牧市出身のPGが書くブログ Haskellプログラマーは誰しもがモナドに関する各々のチュートリアルを書くと言われる。というのも、一度モナドの定義とその可能性を理解すれば、モナド全体を囲む神秘性に挑戦して打ち破るのが容易になるからだ。門外漢からすれば、モナドはHaskellを真に理解することを妨げる不可解な障壁だ。モナドはとても不適当な名前で呪われていて、一風変わった文法を持ち、一度に何もかもやってしまう様に見える。しかしながら、その動き

    jQueryはモナドだ - id:anatooのブログ
  • 40分で覚える!jQuery速習講座 (1/6)

    いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは? そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目:導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。

    40分で覚える!jQuery速習講座 (1/6)
  • jQueryの無名関数の組み立て方

    なんかWordPressとjQueryでググるとやたら$が使えないとかnoConflictがどうたらで気になったんですが、jQueryでは無名関数のローカル引数で$を使うのがスマートだと思います。

    jQueryの無名関数の組み立て方
  • くるくる回して入力するUIを作ってみた - 今日のごはんは素麺です

    とある範囲の値を入力してもらいたいけど, テキストボックスじゃ自由度高すぎるし, 範囲が微妙に広いからコンボボックスじゃ選ぶのめんどいなー*1. そんなコトを考えているときに「こんなのどうよ?」と思って作ってみた. とりあえずこんな風になった このページを開いて, 青いボックスの上でマウスのボタンを押しっぱなしにすると, ちっこい矢印がでてくる. その状態で, その矢印を中心に: 時計回りにドラッグするとカウントアップ 半時計回りにドラッグするとカウントダウン します. 欠点 入力の仕方がわかりにくい*2 入力範囲が広すぎると何回もくるくるしなくちゃいけないのでめんどくさい とりあえず意外におもしろい動きなんじゃないかと思います. iPodのUI? 知らないお( ^ω^)*3 あ, もし使いたい方はこちらからJavaScriptのソースを取得してもらえればいいかと思います. ちなみにjQu

    くるくる回して入力するUIを作ってみた - 今日のごはんは素麺です
    masa0x80
    masa0x80 2009/10/17
    おもしろい
  • jQuery List – A Blog For Coders & Programmers

    CSS is an acronym that stands for cascading style sheets and refers to a set of instructions that controls the appearance of a web page. The formatting principles of CSS are supported by most browsers include Firefox and IE3. In comparison with HTML, CSS provides more formatting options and finer tuning for instance, instead of being stuck with 7 font sizes one can simply use an infinite number of

  • Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web

    Jetpack is a newly formed initiative and experiment in using open Web technologies to enhance the browser, with the goal of allowing anyone who can build a Web site to participate in making the Web a better place to work, communicate and play. As with all Labs experiments, Jetpack is an open source project and everyone is welcome to participate in its design, development and testing. Read the full

  • Firefox 拡張を jQuery で書く! Jetpack を使ってみた。 - IT戦記

    はじめに JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る! というものを Mozilla Labs がリリースしたみたいですね。 https://jetpack.mozillalabs.com/ というわけで 少し触ってみました Jetpack Feature の書き方 Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。 これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。 JavaScript ファイル 公開用 HTML ファイル JavaScript ファイル JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。 (function() { Jetpack.statusBar.appe

    Firefox 拡張を jQuery で書く! Jetpack を使ってみた。 - IT戦記
  • jQuery 日本語リファレンス

    jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );