jQueryプラグインを自作するには？（$.fn） - Build Insider
← 前回 連載 INDEX 次回 → jQueryでアプリを開発していて、似たようなコードを何度も見かけるようになってきたら、プラグイン化することを検討すべきです。本サイトでも、jQuery UI、jQuery Mobileなどのプラグインを解説していますが、こうしたプラグインは（もちろん）自分でも作成できます。何度も利用するような機能は、無秩序に自己流の関数／クラスライブラリにしてしまうのではなく（ましてや、似たようなコードをコピペするのではなく）、プラグインとしてまとめることで、利用する際にも一貫性を維持でき、結果としてコードの見通しもよくなります。 本稿では、confirmプラグインの作成を通じて、プラグインの基本を学びます。confirmプラグインは、ボタンクリック時に確認ダイアログを表示して、［OK］ボタンが選択された場合は後続の処理を継続し、［いいえ］ボタンが選択された場合には
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
jQueryでfadeOutの後にremove - Qiita
としてみたところ、 フェードアウトせずにそのまま消えてしまった。 ちょっと調べてみると、処理を待つキューに入る処理と入らない処理があるとのこと。 エフェクト系は概ね入るようだけど、remove()はキューに入らない。 キューに入れるには.queue()を使う。
phiary
Code html 目次となるアンカーと, ページトップに移動するアンカーを設置しています. <body> <h1 id='top'>jQuery でページ内リンクを全てスムーズスクロールにしよう</h1> <h2>Table of contents</h2> <ul> <li><a href='#section1'>Section 1</a></li> <li><a href='#section2'>Section 2</a></li> <li><a href='#section3'>Section 3</a></li> <li><a href='#section4'>Section 4</a></li> </ul> <h2 id='section1'>Section 1</h2> <p class='pad'>Text Text Text Text</p> <a href='#top'
jQueryのイベントで return false はしない方が良い
前回の記事を書いている時に検索にヒットしたリンクでちょっと「へぇ～っ」となったものがあったのでメモ。 javascript - event.preventDefault() vs. return false - Stack Overflow イベントのハンドラを書く時に、jQueryのイベントと通常のDOMのイベントでは return false; の意味が違うらしい。まずい、今まで気にしていなかった。。。 jQueryのイベント： デフォルト動作を抑止。 イベントバブリングを中止する。 通常のDOMのイベント： デフォルト動作を抑止。（但しブラウザのバージョンに依存） イベントバブリングの中止はしない。 という事らしい。 jQueryのイベントハンドラで return false; をしてしまうと、イベントバブリングまで中止されてしまう。これはあまり好ましくない事だ。 なぜイベントバブリ
jQuery学習者にReactも学習してほしい3つの理由と学習方法まとめ
jQueryの初版が登場して10年が経ちました。 jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。 時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。 そうした中、昨今注目されているのがReact.js(React)です。 今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。 Reactとは？ Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。 Facebookが開発の主導となっており、
高速かつスムーズなページ遷移を実現する pjax 覚書 - Qiita
★2018/04/13投稿 → Barba.jsを使った実装方法を書きました pjaxをざっと触ってみたので、自分用にメモ。 少々癖はあるが、シームレスなページ遷移の実装や、読み込み速度の向上が可能。 まだまだ使いこなせてないので、マスターしたい（切実） ★pjaxについてはこちら → http://falsandtru.github.io/jquery-pjax/ 準備 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
HTML5 Sortable
HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API. DEPRECATION NOTICE This project is not mantained anymore. I recommend using RubaXa's Sortable or voidberg's fork instead. Why another sortable plugin? Because it's better. Well, If you want to read the whole story read it here. Features Less than 1KB (minified and gzipped). Built using native
jQuery UI datepickerを日本語化したりカスタマイズしたり - メン醤のjQuery workshop
前回に引き続きjQuery UIのdatepickerです。 やはりデフォルトのままだと色々不便があります。 前回はカラー(テーマ)のカスタマイズを紹介しました。 jQuery UIの導入方法と色を変えるためのカスタマイズ - メン醤のjQuery workshop 日本語化 公式のGitHubリポジトリよりdatepicker-ja.jsをDLします。 (Rawと書いてあるボタンをクリックするとこのファイルだけ取得できます) https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ja.js jsのjquery-uiディレクトリなどに置いてscriptタグで読み込ませます。 カレンダーの表示位置 カレンダーの表示位置はデフォルトで自動計算になっていますが、 テキストボックスの配置がウィンドウの下限に近い場合に
超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker
2015.02.23 超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker ツイート シェアする 共有する はてブ Pocket あなたのサイトの入力フォームは、日付入力が難しくなっていませんか？希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、入力しやすいよう改善しましょう！フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。 ではどうすれば日付入力が簡単になるのでしょうか？答えは「カレンダー」を使用して日付入力をしてもらうのです。普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、また1クリックするだけで選択出来ます。今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します！ ▼サンプルページ jQuery-ui-datepic
jQuery UIを利用するには？
jQuery UIの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery UIで提供されているコンポーネントと、基本的な利用法を説明する。 連載 INDEX 次回 → このシリーズでは、何回かにわたって、jQuery UIの基本機能を目的別リファレンスの形式でまとめていきます。 jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。プラグインとはいえ、開発チームにはjQuery本家のメンバーも参加しているオフィシャルな存在であり、jQueryベースでリッチなUIを持ったWebアプリを開発するならば、まずjQuery UIの利用を検討することをお勧めします。 jQuery UIのコンポーネントは、大きくInteractions（インタラクション： マウスによる汎用的な対話処理）
jquery プラグイン/作成 - Qiita
注意 この文章は、ここの文章をそのままコピペしたものです。 プラグイン作成に非常に有効なのでメモしました。 最新版はオリジナルの文章を読むことをお勧めします。 元文書: Plugins/Authoring - jQuery Wiki(t) jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です！プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3.
Gmailのように「shift + クリック」でチェックボックスの複数選択を可能にするjQueryプラグイン｜プログラムメモ
Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。 ● 1.jQueryをダウンロード http://jquery.com/ からjQueryをダウンロードします。（ダウンロードしたファイル名を jquery.js とします。） ● 2. jQuery Field Plug-inをダウンロード http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm から【jquery.field.js】をダウンロードします。 ● 3. 以下のようなチェックボックスを含むhtmlを用意します <form> <input ty
スクロールに応じて指定した要素に任意のclassを付与できるスクリプト・「scrollClass」
scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で緑、上に戻す時は青と変化するように設定しました。ライセンスですが、一通り動作確認したあと確認しようとしたらユニコーン出てて見れませんでしたので後で確認します。 scrollClass
jQuery とっても簡単、ページ内リンクでスムーズスクロール
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール？というかたは、↓の DEMO をご覧になって、どこかリンク部分（下線がある文字）をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 ＊味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順１：jQueryの記述 手順２：HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順１：jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルなグリッドベースのギャラリー実装jQuery「sampGallery」:phpspot開発日誌
リストから必要な物を選ぶUIを実現する「jQuery.SelectListActions」:phpspot開発日誌
レスポンシブな階層メニュー実装「menu-breaker.js」:phpspot開発日誌
スクロールが生じたtableの左右上下の列や行などを固定出来るスクリプト・「TableHeadFixer」