You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
何が変わったか(概要) jQuery 3.0では、非推奨としていたAPIやドキュメントになかったAPIを削除したり、全体的にAPIを整理してバグを修正しています。また一部のAPIでは、大きな仕様変更があります。既存のコードを動作させる場合には注意が必要ですので、まず移行プラグインをバージョンアップ対応ツールとして使って、影響具合を確認することをお勧めします。 なお、jQuery 3.0での特に大きな変更点は、次のとおりです。 バージョンの1本化 Deferred機能が「Promises/A+」仕様に準拠 非推奨のload、unload、errorを削除して、onメソッドに統一 カスタムセレクタの高速化 既存コードからの移行 既存のコードを移行できるように、Ver3用移行プラグインがリリースされています。このプラグインでは、影響のあるコードに対して警告がブラウザのコンソールに表示されますので
JavaScriptライブラリjQueryの開発チームは、2014年10月から開発を進めてきた「jQuery 3.0」の正式版を、6月9日(現地時間)に公開した。「jQuery 3.0」ではInternet Explorer 6~8をサポートしていないため、Internet Explorer 6~8へのサポートが必要な場合は「jQuery 1.12」の使用が推奨される。 「jQuery 3.0」では、jQuery.DeferredがPromises/A+およびES2015との互換性を確保したほか、catch()メソッドに.then(null, fn)へのエイリアスとなるpromiseオブジェクトが追加されている。また、従来バージョンではエラーメッセージが表示されなかったいくつかのケースについて、エラーメッセージを表示するよう変更が加えられた。 このほか、「jQuery 1.8」から存在して
こんにちは。 ブログちょっと遅れました。 あえてのじらしプレイです、川崎です。 (嘘です。花金のエクストラコールドビールが僕を呼んでいたのです…!!) さて!どこかの月曜ブログ担当のクワムラ○んみたいに最初のサービスマクラはだらだら書きません。 (あ、伏せ字ずれた!笑) バージョンが1.1になって普及されてきた「Jquery Mobile」。 それに伴ってサードパーティのツールもちょこちょこでてきてます。 今日はスマホサイト制作にあまり知識が無くても「これがあれば制作に入りやすい」と思われる神器たちを公開しちゃいます! 1,テンプレートの作成(アプリ) DREAM WEAVER CS5.5からモバイルサイト制作機能を強化したDreamWeaver。 スニペットの充実、サイドバーからコンテンツの簡易挿入! ぼくが一番重宝しているのは、「モバイルスターター機能」!! 「メニ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」=「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
Facebookなどでフォーム入力中にページを移動(離脱)しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 1.ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか?'; }); }); </script> <form method="post" acti
ヤフー株式会社は、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 Advent Calendar 2012 – 01日目 jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。 jQuery() APIについてはこちら。 jQuery() – jQuery API jQuery(expression, context) – jQuery 日本語リファレンス jQuery(html, [ownerDocument]) – jQuery 日本語リファレンス jQuery(callback) – jQuery 日本語リファレンス jQuery(elements) – jQuery 日本語リファレンス jQueryと$は同じものなので、jQuery()と$()は同じです。これ、実は関数なんですよ。 というわけで、以下使い方。 5種類の使い方 セレクター : $('#tar
jQuery SpectragramはInstagramの写真をブログのサイドパーツなどに掲載できるJavaScriptライブラリです。 Instagramに写真をたくさん投稿しているユーザは自分のブログでも写真を載せたいと思うはずです。そこで使ってほしいのがjQuery Spectragramです。 こちらはユーザのフィード。 ポピュラーな写真。 タグ付けで抽出した写真。 サンプルのコードです。 jQuery Spectragramはユーザ名や抽出したい条件を指定するだけで容易にInstagramの写真を取得できます。後は自由に写真を載せるだけです。とは言えInstagramなので、その見せ方についても多少はこだわりたい所でしょう。 jQuery SpectragramはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。 MOONGIFTは
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前:CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 よくある拡大鏡を実装するスクリプト です。マークアップも楽で、コード も少量で済むので参考にしました。 そんなに多用するUIではありませんが、 便利は便利なので覚えておきたいです。 方法が好みだったのでメモ的に。いわゆるルーペ的なを実装。 Sample jQueryを使います。 ドラッグで動かします。CSS-Tricksでもだいぶ前にプラグインを作ってました。こちらはクローンを自分で用意する、というものでしたが、今日のコードは指定したセレクタ内のDOM要素のクローンを作成してオリジナルの上にレイヤーとして重ねてCSSで部分的に表示、JSでドラッグ出来る様にすると拡大されたように見える、という仕組みっぽいので、マークアップは普通でOKです。 CSSを外すと、クローンが
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料! Koottamのデモ
これらのフレームワーク/ライブラリを利用することで、デバイスの違いを(全くでないにせよ)あまり開発者に意識させることなく、標準的な枠組みでスマートフォン対応のアプリケーションを開発できるようになる。 スマートフォン対応のフレームワークは歴史も浅く、まだまだデファクト・スタンダードといえるものはないものの、現時点で最有力候補の一角と目されるのが、本連載のテーマでもある「jQuery Mobile」だ。 ■jQuery Mobileとは? jQueryそのものについては本稿の読者諸氏であれば、すでに既にご存じであろう――JavaScriptライブラリのデファクト・スタンダードだ。「Write Less, Do More(よりシンプルなコードで、より多くの処理を)」をモットーに、シンプルな構文でありながら機能性も高いことから、近年急速にユーザー数を増やしている。何千、何万にも及ぶプラグインによっ
こんにちは、2011年度新卒エンジニアの夏目です!突然ですがみなさんJavaScript書いてますか? 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
jQueryでマウスオーバーすると全体的にピカーンってなるやつ マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。 投稿日2011年10月11日 更新日2011年10月12日 準備 htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。 html <p class="button"><a href="#">ボタン</a></p> その他マウスオーバーしたときの大きめの画像を用意します。 ここでは「bg.jpg」という名前で1000×1000の画像を使用します。 bodyのbackgroundを指定する方法 一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。 jQueryでimageとpositionの設定をしますので、cssでその他の設定をして
レスポンシブWebデザイン対応のイメージ スライダーです。かなり沢山出てきました ね。こちらはcssやHTMLもシンプルで済む のでコードをシンプルにしたい際は使い 勝手が良さそうです。こうして選択肢が 増えるのは凄くうれしいですね。 続々出てきますね・・・こちらもレスポンシブWebデザイン対応のスライド。こちらはMedia Queriesを使用していないようなので、いつも通りのマークアップで手軽に実装出来るのが特徴みたいです。 パッと見は普通ですが、どのようなモニターサイズでもレイアウトを崩すことなくスライダーとして機能してくれます。slidesjsベースで作っているようですので2つ先、3つ先の画像に移動しても余計なアニメーションがありません。 スクリーンショット スマートフォンで閲覧しても自動でスライドごとリサイズしてくれます。少しだけ動きがアレですかね? コード <script sr
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く