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
Updated 2014.02.16 / Published 2014.02.16 jQueryでdata-*属性を扱う際にjQuery.data()メソッドもしくはjQuery.attr()メソッドを使うことになるでしょうが、jQueryで扱えるdata-*属性のオブジェクトは前提としてキャッシュ仕様であることを理解しておかないと嵌ることが多々あります。 取得だけなら問題は起こらない <div id="user1" data-id="1" data-user="Jack" data-date-of-birth="2000-10-01">Jack</div> これらのdata-*属性を取得したい場合、jQueryであれば次のように記述します。 //data()の場合 jQuery("#user1").data("id"); // => 1 (数字扱い) jQuery("#user1").d
TypeScriptで書いていて疑問に思うことがあるんすよね〜 jQueryのプラグインをTypeScriptで扱い方が分からない! $('#modal').modal(); ってやるとコンパイル通らないんですよね (当たり前ですけど) tsファイルがあれば /// <reference path="hoge.ts"/> これで良いんですけどね 自分でtsファイルも作れば良いのですが面倒くさいので tsファイル作らないでやる方法です。 var bs_modal: any = $('#modal'); bs_modal.modal({ keyboard: false }); bs_modal.modal('hide'); 通常であればプラグイン自体のオブジェクトをanyで作成すれば コンパイルエラーにならないんですけど jQueryプラグインの場合は、jQueryオブジェクトを拡張する形で作
jQuery のプラグインを書くお作法みたいのがあって、だいたいどのプラグインも以下のように書かれている (function($) { $.fn.myPlugin = function() { ... }; }) (jQuery); これTypeScriptで書こうと思ったらこんな感じになった。 /// <reference path="path/to/jquery.d.ts" /> module jQuery { var $:JQueryStatic = <JQueryStatic>jQuery; $.fn.myPlugin = function() { ... }; } jQuery モジュールを定義すると外側の即時関数は大体同じにコンパイルされる。 ただしこうすると jquery.d.ts の jQuery の定義を上書きしてしまうらしいので、$ に型アノテーション付きで jQuer
前回 は、「Creating Responsive Applications Using jQuery Deferred and Promises」 の記事と jQuery のリファレンスを翻訳し、Deferred の解説をお届けしました。が、今一歩、Deferred オブジェクトの うれしさ をお伝えできていなかったように思います。今回はその反省をふまえ、単なる翻訳ではなく、元記事の文脈に沿って、Deferred オブジェクトをどのように使うと/何がうれしくて/どうしあわせになるのか、私が学習して得た事をお伝えしたいと思います。 今回は、4本の jsfiddle を記事に埋め込んでいます。jsfiddle 上で自由に編集してテストしてもらえばうれしいのですが、4本すべて実行すると1.4MBものリソースを読み込む事になり、ブラウザに優しくありません。すぐに タブや をクリックせずに、 タブ
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール?というかたは、↓の DEMO をご覧になって、どこかリンク部分(下線がある文字)をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 *味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順1:jQueryの記述 手順2:HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順1:jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
すべての Microsoft 製品 Global Microsoft 365 Teams Copilot Windows Surface Xbox セール 法人向け サポート ソフトウェア Windows アプリ AI OneDrive Outlook Skype OneNote Microsoft Teams PC とデバイス Xbox を購入する アクセサリ VR & 複合現実 エンタメ Xbox Game Pass Ultimate Xbox Live Gold Xbox とゲーム PC ゲーム Windows ゲーム 映画とテレビ番組 法人向け Microsoft Cloud Microsoft Security Azure Dynamics 365 一般法人向け Microsoft 365 Microsoft Industry Microsoft Power Platform W
ここ数カ月、"jQluster"と名付けたjQueryプラグインに取り組んでいたんだけど、とりあえずリリースできるところまで漕ぎ着けた。 https://github.com/debug-ito/jQluster jQlusterはよそのWebブラウザのDOMオブジェクトなどを操作するためのプラグイン。 普通、jQueryは自分のページの中のDOMオブジェクトを操作したりするために使われるけど、jQlusterは世界のどこかのよそのWebブラウザで表示されているよそのページのDOMオブジェクトを操作する。もちろん、どこのWebブラウザの表示ページでも操作できるわけではなく、同じjQlusterサーバに接続されて管理されているブラウザのページのみ操作できる。 一体そんなもの何の役に立つんだという話ではあるので、デモアプリケーションを作ってみた。 http://jqlusterdemo-deb
ajaxを使ってページ遷移をしないシステムを扱っています。 ページ遷移をしない時に厄介になるのが、URLが変わらないゆえにブラウザの進む、戻るが効かない事。 そこで現在のシステムでは、進む、戻るを有効にするhashchangeというプラグインを導入しています。 Ben Alman » jQuery hashchange event ハッシュが変わった時にイベントを追加できるというものです。 これを使うことで、ajaxや「http://url.html#hoge」のようにurl内でアクセスをした時にイベントが発生して、そのタイミングで進む、戻るが効くようになるということです。 以下のページに詳しくまとまっていますので、プラグインの詳細や使い方は以下参照。 jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」(実装解説つき): 小粋空間
軽めのjQuery Advent Calendar 2012の6日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。 先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか?と質問をされました。 jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
jQuery 1.6 が既にリリース されていますが、1.5 で追加された Deferred を勉強する意味で、Script Junkie から Creating Responsive Applications Using jQuery Deferred and Promises を翻訳してみましたので、共有したいと思います。著者の Julian Aubourg は、jQuery のコアチーム・メンバーとして、Ajax モジュールの書き換えと Deferred 導入を指揮した方だそうです。 記事の途中、各メソッドの説明部分は、jQuery ドキュメントの翻訳に差し替えていますので、リファレンスとして使ってもらうのも良いかと思います。 Deferred や Promise は、概念や用語が少々分かりにくいところがあるかと思いますので、読んでくださった方の、少しでも理解の助けになれば幸いです
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('su
bell賞味期限切れコンテンツ この記事は公開または最終更新から1067日くらい経過しています。 このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。 公官庁のウェブサイトなどでよく見かける、文字サイズを変更するスクリプト。 コード自体は昔それっぽい記事を書きましたのでその時に使ったのと似たような方法で実装する予定ですが、そのスクリプトだけだとページを遷移した場合、設定が初期状態に戻ってしまいます。 大抵の場合文字サイズを大きくして読み始めた人は他のページでも大きな文字で読むでしょうから、これでは不便ですよね。 そこで、cookie等を利用してブラウザごとに文字サイズの設定を記憶させる必要があります。 cookieを利用する方法はいくつかあるようなのですが、今回は jquery.cookie.js というjQueryから操作できる
最近、Twitterみたいに一番下までスクロールした際に、自動で次のツイートを読み込んだりしたりするサイトをよく見ませんか? このように、「一番下までスクロールしたら何かしたい」っていう場合。 これをイベントとして提供してくれるjQueryプラグインを紹介します。 一番下までスクロールした際に「次のページを読み込んで追加する」って仕様に限定されるのであれば、Infinite Ajax Scroll, a jQuery plugin なんかが便利だと思います。 しかし、読込の実装がちょっと普通じゃなく、読み込み部分は自分で実装したいとか、そもそも読込はしないで何か別の実装をしたい、といったケースもあります。 そこで便利なのが jquery.inview というjQueryプラグインです。 使ってみたサンプルはこちら 使い方は簡単で jQuery本体を読み込む <script type="te
1. Make sure to include jQuery in your page: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2. Include jQuery Selectric: <script src="jquery.selectric.min.js"></script> 3. Include jQuery Selectric styles, and change it to your taste :D (please refer to our demo page for more themes and other customizations) <link rel="stylesheet" href="selectric.css"> 4.
// Cache the target element var $selectValue = $('#select_value').find('strong'); // Get initial value $selectValue.text($('#get_value').val()); // Initialize Selectric and bind to 'change' event $('#get_value').selectric().on('change', function() { $selectValue.text($(this).val()); }); $('#set_value').selectric(); $('#set_first_option').on('click', function() { $('#set_value').prop('selectedIndex
「サイトにカレンダー機能付けて!」って時って、意外と悩みませんか?Wordpress何かで作る時はプラグインで対応しますが、CMS無しで、ランディングページ的なの作って的な案件の時は、まーなんだかんだよく迷う。Googleカレンダーの埋め込みだと見栄えがちょっと…って事も多いですよね。 僕はと言えば、プログラマーさんにカレンダー部分だけ別で依頼したりする事も少なくは無かったんですが、それにしたってカスタマイズ性を考えて高機能な物にすればする程、コストは掛かるし、ちょっとどうしたもんかと更に頭を悩ませる事も少なくありませんでした。 今日ご紹介する、jQueryのカレンダープラグイン『CLNDR.js』はもしかしたらそんな悩みを解決してくれる手段の一つになるかもなと思ったので、共有させて頂きます。 中を見てみると、結構jsの知識が無いとキツイ感じですが、jQuery触ったことあるレベルの人でも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く