タグ

JavaScriptに関するw7treeのブックマーク (28)

  • 横からニュルっとスルっとあいつがでてくる。jQueryドロワーメニュープラグイン【jSlideMenu】を使ってみた|わざログ| うずまきブログ| 名古屋のホームページ制作/印刷物デザイン 株式会社うずまきデザイン

    ずいぶんと前に日列島に寒気がやって参りましたね。最近はこたつの中で横になりながらジャンプ片手にみかん片手に、ついでにテレビ見ながらごろごろしてることを思い浮かべながら布団に入るのがついつい日課になってるエンジニアの松です。 長めの自己紹介はさておき、日は今ノリにノッているあのイケてるドロワーメニューを使ってみたいと思います。 google.com スマホ版 巷で噂のドロワーメニュー。FacebookアプリやGoogleサイト(*右画像)など、だれもが利用しているアプリやWebサービスで導入されています。横からニュルっとスルっとでてくるあのメニューこそ、ドロワーメニュー張人です。あのニュルニュル感が気持ちいいから、ついつい何回も何十回も何百回も角っちょのメニューアイコンを押しちゃうんですよね。ああ気持ちいい。 今回ドロワーメニューを導入する際に使用したのはjQueryプラグイン【jS

    横からニュルっとスルっとあいつがでてくる。jQueryドロワーメニュープラグイン【jSlideMenu】を使ってみた|わざログ| うずまきブログ| 名古屋のホームページ制作/印刷物デザイン 株式会社うずまきデザイン
  • [jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle

    タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。

    w7tree
    w7tree 2013/12/24
    これ便利。使います。
  • 爆速でわかるjQuery.Deferred超入門

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結

    爆速でわかるjQuery.Deferred超入門
    w7tree
    w7tree 2013/10/21
    わかりやすかった。使いこなせるまで反復して読み返したい
  • jQuery UIのDatepickerでカレンダーから楽々日付入力

    フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の1機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery体が必要となります。 jQuery体の準備は以前「「CrossSlide」写真や

    jQuery UIのDatepickerでカレンダーから楽々日付入力
    w7tree
    w7tree 2013/07/03
    入力フォームのUI向上のためには必須。全部google様提供のライブラリで簡単解決。DLの必要なし。
  • チラ見せしちゃうJavaScript「Page Peel」

    twitter facebook hatena google pocket 最近チラッと広告やコンテンツを見せて興味を喚起するサイトがあります。 jQueryプラグインの「Page Peel」はそれを実現してくれるJavaScriptです。 sponsors 使用方法 Page PeelからjQuery.pagePeel.jsなどファイル一式をダウロードします。 ※psdやflaファイルまで入っています。 さて、これらを以下のように記述します。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jQuery.pagePeel.js"></script> <script type="text/javascript"> $().ready(

  • jQueryによる要素の存在チェックまとめ

    jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素(jQueryオブジェクト)が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括ってますが、必要に応じて「$(function(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 1.$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える(配列の基メソッドが使える訳ではない)ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i

    jQueryによる要素の存在チェックまとめ
    w7tree
    w7tree 2013/01/09
    要素の存在判定いろいろ。undefinedエラー防止策
  • Node.js、Socket.IO、MongoDBでリアルタイムWeb

    Node.js+Socket.IO+MongoDB こんにちは! 著者は、マインドフリーという会社でNode.jsを使ってWebアプリなどを作成している。この連載では、最新Webテクノロジを使った研究開発の事例や実績を発信する弊社のサイト“Tech Release”のリニューアルで培ったNode.jsに関する知識を分かりやすくお伝えする。 Tech Releaseは一見、普通のブログに見えるが、実は記事の更新内容がリアルタイムにView画面に反映されている。管理者が、記事の文章(データ)に変更を加えると、その記事を見ている人にもページをリロードせずに、リアルタイムに文章(データ)が変化していく。 このUXを実現するために開発したシステムが、REALTIME BLOG ENGINE「REABLO」というエンジンだ。「REABLO」はNode.jsとSocket.IO、MongoDBを使用して

    Node.js、Socket.IO、MongoDBでリアルタイムWeb
  • ちょっと高度にJavaScript/クロージャの基礎 | DevelopersIO

    JavaScriptのクロージャを一言で言うと、「自身が定義されたスコープにおいて変数を解決する関数」となります。 少し複雑ですが、マスターすれば何かと便利な概念なので、解説したいと思います。 ちなみに、JavaScript未経験なFlex開発者にオススメしたいClosure ToolsのClosure Toolsとは別物です。まぎらわしくてすみません。 例 var f = function() { var i = 0; return function() { return i++; } }(); console.log(f());// 0を出力 console.log(f());// 1を出力 console.log(f());// 2を出力 変数iは、匿名関数のローカルスコープに定義されています。ローカルスコープの変数は、関数の処理が終わると無くなってしまうのが普通ですが、関数fの出力

  • キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」:phpspot開発日誌

    Keypress: A Javascript library for capturing input キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 jQuery等に依存せず、簡単に使えるキーボードイベント実装ライブラリ。単体キーだけでなく、複数のキーの組合せや、キーを押した順によってイベントを発動させることができ、とりあえずキーボードショートカットなんかを入れたいという場合に簡単に使えそうです。 ライブラリを使ったイベント実装コードは以下。Shift+Sで発動する関数を設定しています。 keypress.combo("shift s", function() { console.log("You pressed shift and s"); }); 次のような感じで、キーボードを↑↑↓↓〜という感じに順に打ってイベントを発動させることも可能 keypr

    w7tree
    w7tree 2012/10/04
    こいつを待ってた
  • JsDoc Reference - jasmine.Matchers

    Class jasmine.Matchers Defined in: Matchers.js. Class Summary Constructor Attributes Constructor Name and Description

  • Ruby脳でCoffeeScriptのクラスを理解する - hp12c

    ブログを下記に移転しました。デザイン変更により移転先では記事が一層読みやすくなっていますので、よろしければ移動をお願い致します。 Ruby脳でCoffeeScriptのクラスを理解する : melborne.github.com - Rubyは最高の言語だから もっと普及していいと思うけれども その障害となっているのはたぶん 「Rubyがビジュアルに訴えない言語」となっているからだよ たしかにRubyにはRuby/TkとかShoesとかがあるけど 現代のプログラミングで「ビジュアル」と言ったら 暗黙的に「Web上の」という修飾が付くよね 一方でJavaScriptは jQueryやCoffeeScriptの人気を見る限り 最高とは言えない言語だけれども 「ビジュアルに訴える言語」となっている点が 普及の大きな要因になっていると思うよ つまりブラウザ上で実行できる唯一の言語たる地位が Jav

    Ruby脳でCoffeeScriptのクラスを理解する - hp12c
  • Rails 3.2 のプロジェクトに jasmine 導入して CoffeeScript でテスト書くまで - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

    Rails 3.2 のプロジェクトに jasmine 導入して CoffeeScript でテスト書くまで - Qiita
  • socket.ioとenchant.jsでネトゲ作り始めた - mizchi log

    某所に提出するように昔作ったもののコア部分を詰めて作ったんだけど、興が乗ったので今日そのまま作りこんでみた。 同時にログインして相手に近づいて殴ったらHPバーが減って死ぬ。死ぬと4秒でリポップする。 まだマップを実装したりモンスターを徘徊させたりしてない。実質一日で作ったものなので現状この程度。 ガワはenchant.jsで書いた。はじめてまともにつかってみたが、意外と複雑な構成に耐える印象。とくにアニメーション部分はavatar.enchant.jsの仕組みにほぼ乗っかっているのだが、サーバーサイドでステートを決定してクライアントで受け取っている。こんなこと自分以外はやっていないと思う。 一応Githubに置いた。グワーッと作りたかったので、まだテストコードを書いていない。 mizchi/node-mmo https://github.com/mizchi/node-mmo git cl

    socket.ioとenchant.jsでネトゲ作り始めた - mizchi log
  • 【jQuery】.on() の使い方(jQuery1.7~) at softelメモ

    jQuery1.7から、.bind()、.live()、.delegate()などは非推奨となり、.on() が推奨となりました。今後すべてのイベントは .on() で、となっていきそうですが、なにやら引数が多くて分かりにくい感じ?では使ってみましょう。 1、$(セレクタ).on(イベント, 関数) セレクタにマッチした要素で、イベントが発生すると、関数が実行されます。 = .bind() ですね。 「セレクタにマッチした要素に」なので、そこにある要素に対してとなり、後から動的に追加した要素に対しては効きません。 example $('#example-button').on('click', function(){alert('clicked!');}); Demo デモ – $(セレクタ).on(イベント, 関数) 2、$(document).on(イベント, セレクタ, 関数) do

    【jQuery】.on() の使い方(jQuery1.7~) at softelメモ
  • JavaScript: window.open() 小窓の基礎

    window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第1引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ(別のファイル)は別途作成して用意しておきます。 第2引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第3引数「オプション」はウィンドウの特徴を設定する文字列です。 こ

  • [JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media

    HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考:video, audioのサポート状況 video, audio

  • [JavaScript] ブラウザのお気に入りに登録ボタンを実装する | Library | Development Reference

    お気に入りに登録ボタンを押した時にブラウザのお気に入り登録ダイアログを表示するライブラリを作成した。お気に入りに登録ボタンの実装の度にいちいちブラウザ判定処理まで作成するのが面倒臭いので・・・ DEMO DOWNLOAD 仕様 メソッド呼び出し時にブラウザ判定を行い、JSによるお気に入り登録に対応していれば登録ダイアログを表示する。対応していない場合はブラウザのメニューから登録する旨を伝えるメッセージを表示する。 使い方 ZIPファイルを解凍後、中身をサーバの任意のディレクトリに配置し、機能を実装したいhtmlでJSを読み込む。 <script type="text/javascript" src="common/js/bookmark.js"></script> 登録ボタンの onclick イベントなどで、bookmark() メソッドを呼び出す。 <input type="butt

  • お気に入り(ブックマーク)登録リンク(Firefox/IE対応) - Open the JavaScript

  • Route 477(2006-05-06)

    ■ [javascript] printf なんでjavasciptにはprintfがないのかと小一時間。いや別に printfでなくてもいいけど、0詰めとか簡単にやる方法が欲しいよ。 ぐぐったら頭に"0"を付けておいて最後の2文字を切り取る なんて方法が出てきた。なるほどなぁ。 例えば %04d なら str = ("000" + i).substr(-4); とかか。(iは4桁以下とします) 57 http://www.google.co.jp/search?q=javascript printf... 48 http://www.google.co.jp/search?sourceid=chrome&ie=... 41 http://www.google.co.jp/search?q=javascript printf... 23 http://www.google.co.jp/se

    Route 477(2006-05-06)
  • [jQuery] グルーポン系サイトでよく見掛けるカウントダウンタイマーのサンプルコード

    jQueryで、グルーポン系サイトでよく見掛けるカウントダウンタイマーを実装しようと、プラグインを探していたのですが、百式さんのライフハックにプラグイン無しでも簡単に実装できそうだったので、一部書き換えてご紹介します。 ・元ネタ:グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる | IDEA*IDEA ■ 元のコード ■ カスタマイズ(日/時/分/秒 表記) 以上です。 ■ カウントダウンタイマーを実装する方法の紹介記事 その他、JavaScript/jQuery で、カウントダウンタイマーの実装について書いてある記事。 ・jQuery Countdown ・jQuery Countdown を使ってカウントダウンタイマーを表示する | バシャログ。 ・jQueryで時間をカウントダウンするJavaScript「jCountr」|skuare.net