横からニュルっとスルっとあいつがでてくる。jQueryドロワーメニュープラグイン【jSlideMenu】を使ってみた｜わざログ｜ うずまきブログ｜ 名古屋のホームページ制作／印刷物デザイン 株式会社うずまきデザイン
ずいぶんと前に日本列島に寒気がやって参りましたね。最近はこたつの中で横になりながらジャンプ片手にみかん片手に、ついでにテレビ見ながらごろごろしてることを思い浮かべながら布団に入るのがついつい日課になってるエンジニアの松本です。 長めの自己紹介はさておき、本日は今ノリにノッているあのイケてるドロワーメニューを使ってみたいと思います。 google.com スマホ版 巷で噂のドロワーメニュー。FacebookアプリやGoogleサイト（*右画像）など、だれもが利用しているアプリやWebサービスで導入されています。横からニュルっとスルっとでてくるあのメニューこそ、ドロワーメニュー張本人です。あのニュルニュル感が気持ちいいから、ついつい何回も何十回も何百回も角っちょのメニューアイコンを押しちゃうんですよね。ああ気持ちいい。 今回ドロワーメニューを導入する際に使用したのはjQueryプラグイン【jS
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
爆速でわかる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 UIのDatepickerでカレンダーから楽々日付入力
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の１機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
チラ見せしちゃう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(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 １．$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える（配列の基本メソッドが使える訳ではない）ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i
【jQuery】.on() の使い方（jQuery1.7～） at softelメモ
jQuery1.7から、.bind()、.live()、.delegate()などは非推奨となり、.on() が推奨となりました。今後すべてのイベントは .on() で、となっていきそうですが、なにやら引数が多くて分かりにくい感じ？では使ってみましょう。 １、$(セレクタ).on(イベント, 関数) セレクタにマッチした要素で、イベントが発生すると、関数が実行されます。 = .bind() ですね。 「セレクタにマッチした要素に」なので、そこにある要素に対してとなり、後から動的に追加した要素に対しては効きません。 example $('#example-button').on('click', function(){alert('clicked!');}); Demo デモ – $(セレクタ).on(イベント, 関数) ２、$(document).on(イベント, セレクタ, 関数) do
[jQuery] グルーポン系サイトでよく見掛けるカウントダウンタイマーのサンプルコード
jQueryで、グルーポン系サイトでよく見掛けるカウントダウンタイマーを実装しようと、プラグインを探していたのですが、百式さんのライフハックにプラグイン無しでも簡単に実装できそうだったので、一部書き換えてご紹介します。 ・元ネタ：グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる | IDEA*IDEA ■ 元のコード ■ カスタマイズ（日／時／分／秒 表記） 以上です。 ■ カウントダウンタイマーを実装する方法の紹介記事 その他、JavaScript/jQuery で、カウントダウンタイマーの実装について書いてある記事。 ・jQuery Countdown ・jQuery Countdown を使ってカウントダウンタイマーを表示する | バシャログ。 ・jQueryで時間をカウントダウンするJavaScript「jCountr」｜skuare.net
DOM要素の属性：クラス｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
addClass(class)〔要素に指定したクラスを追加〕 hasClass(class)〔要素が指定したクラスを持っているか判定〕 removeClass([class])〔要素からクラスを削除〕 toggleClass(class)〔要素のクラスを切替〕 toggleClass(class, switch)〔要素のクラスを切替〕 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" co
amp; — javascript・jQuery 画像のパスを取得する時の使い分け
jQueryを使って何か作っているとき、特にDOMの操作などの処理の高速化の為にjavascriptオリジナルのコードを使う事がよくあります。 で、画像のsrcを変更していた際にjavascriptオリジナルとjQueryのメソッドを使った際に取得できる値が違ったのでメモ。 javascript:プロトタイプオブジェクトの値から取得する場合imgオブジェクト.srcで値を使うとhttpから始まる絶対パスで取得出来ます。 //element = <img src="hoge.jpg" /> var src = element.src; alert(src); // http://xxx/xxx/hoge.jpg javascript:getAttribute()メソッドを使う場合。 //element = <img src="hoge.jpg" /> var src = element.ge
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
