jQuery

【jQuery】スワイプ / マウスホイールイベントを拾うには...

jQuery

■ スワイプ / マウスホイールイベントを拾うには... 問題点 ブラウザ(IE、Firefox、Chrome etc)によって拾い方が異なる。 http://codaholic.org/?p=1139 今回の解決案 jQuery を使う ■ サンプル 例１：マウスホイールによる画像を拡大・縮小する https://blo…

【jQuery】スクロール連動 ～ scrollTop / scrollLeft ～

jQuery

■ はじめに スクロール連動について、調べたところ、 jQuery で簡単にできるっぽいのでメモ。 ■ サンプル <html lang="jp"> <head> <meta charset="UTF-8" /> <title>Demo</title> </head> <body> <div id="upper" style="width:100px; height:100px; overflow:auto; border-style:solid"> <div>1234567890123456789012345678901234567890123456789012…</div></div></body></html>

【jQuery】LoadingOverlay ～ 二度押し防止のためにオーバーレイ画面を表示する ～

jQuery

■ はじめに オーバーレイ画面を表示するツールを探していた。 jQuery LoadingOverlayが見つかったので、メモる。 ■ 公式サイト jQuery LoadingOverlay https://gasparesganga.com/labs/jquery-loading-overlay/ デモ https://gasparesganga.com/labs/jquery-…

【jQuery】fakeLoader.js ～ 二度押し防止のためにオーバーレイ画面を表示する ～

jQuery

■ 公式サイト fakeLoader.js http://joaopereirawd.github.io/fakeLoader.js/ デモサイト http://joaopereirawd.github.io/fakeLoader.js/demo/demo1.html ライセンス https://github.com/joaopereirawd/fakeLoader.js/blob/master/LICENSE * MIT (商用利用…

【jQuery】 クライアントサイドの検証処理/バリデーション ～ Parsley編 ～

jQuery

■ はじめに https://blogs.yahoo.co.jp/dk521123/37666873.html https://blogs.yahoo.co.jp/dk521123/37668489.html の続き。 はじめ、jQuery Validation Plugin を使おうとしてたが Bootstrap4 に対応させたく、調べてたら、Parsley が見つかったのでメモ。…

【jQuery】表の操作について ～ DataTables 編 ～

jQuery

■ はじめに * Bootstrap4 で表を扱ってて、たまたま DataTables を見つけて、 試しに使ってみたらよかったので、メモ。 => Bootstrap4 対応は助かる ■ サンプル <html lang="jp"> <head> <meta charset="UTF-8"> <title>datatebles site</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> …</meta></meta></head></html>

【jQuery】マテリアルデザインのGo to Topボタン ～ Material ScrollTop Button ～

jQuery

■ はじめに * スクロールした際に上に戻るボタン（Go to Topボタン）で 自作するのは大変そうなので、何かないかと探してたらよさげなのがあったので、メモをする ■ 公式サイト https://github.com/bartholomej/material-scrolltop ライセンス * MIT (商用利…

【jQuery】偶数/奇数の要素で処理を切り替える

jQuery

■ 案１：「$(”XXX:even/odd”).addClass(”YYY”)」を使用する サンプル <html lang="jp"> <head> <meta charset="utf-8"> <title>odd/even</title> <style> li { list-style-type:none; width:40%; } .for-even { background-color:orange; } .for-odd { background-color:green; } </style> <head> <body> <ul> <li>0</li>…</ul></body></head></meta></head></html>

【jQuery】jQueryプラグインを自作する

jQuery

はじめに * 最近、JavaScriptばっかり書いてたので、共通処理をjQueryプラグイン化する事を考える 構文 基本 (function($) { $.fn.【プラグイン名】 = function() { // ここに実装する return this; }; })(jQuery); 引数を受け取る (function($) { $.fn.【プ…

【jQuery】jQueryを使ったAjax通信 ～基本編～

jQuery

■ Ajaxに関する予備知識 クロスドメイン制約について http://blogs.yahoo.co.jp/dk521123/35603506.html より * Ajaxは、セキュリティ上の理由から、別ドメインのサーバとは通信できない制約がある ■jQueryを使ったAjax通信時のAPI (1) $.ajax() : Ajax通信…

【jQuery】【JS】jQuery / JavaScript でのサニタイジング(エスケープ)

jQuery

■はじめに * クロスサイト・スクリプティング(XSS)の一環として、 jQuery / JavaScript でのサニタイジング(エスケープ)を調べてみた 補足：用語について * クロスサイト・スクリプティング/サニタイジング(Sanitizing)について、以下の関連記事を参照のこと…

【jQuery】jQuery ～ 基本文法編 ～

jQuery

■基本構文 [1-0] 構文（参考程度で） jQuery(セレクター).イベント(function () { // 処理内容 } * セレクター : 操作する要素を指定する(後述「■セレクターについて」参照) * イベント : 操作タイミング(click、dblclick、mousedown、mouseup、mouseover、m…

【jQuery】jQueryを使ったAjax通信 ～Ajax あれこれ編～

jQuery

■ 同期処理をするには * 「async: false」にする => 戻り値も受け取れる 構文 $.ajax({ url: './index.html', // アクセス先のURL async: false, // ★非同期通信を行うか★ // ..,略... }); 参考文献 http://www.atmarkit.co.jp/ait/articles/1007/30/news110…

【jQuery】 tablesorter を使って select box をソートする

jQuery

■ はじめに https://blogs.yahoo.co.jp/dk521123/25076367.html で扱ったテーブルのソート用の jQueryプラグイン「tablesorter」において、 他のサイトを見ると、テキストで扱ったものばかりで セレクトボックスを扱ったものがあまり多くなかったのでメモ。 …

【jQuery】jQuery の アイコン を 表示する

jQuery

■ サンプル <html> <head> <meta charset="UTF-8"> </head> <body> <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css" rel="stylesheet" /> <script src="">http://www.google.com/jsapi"> <style> a.ui-state-default { padding: .4em 1em …</link></body></html>

【jQuery】モーダルダイアログを表示する

jQuery

モーダルダイアログの実装方法 * 色々な方法があると思うが... [1] jQueryのプラグインで実装する 1-1) Remodal 1-2) Custombox 1-3) LeanModal など... http://ichimaruni-design.com/2015/03/jquery-modal/ http://blog.8bit.co.jp/?p=11326 [2] jQuery / …

【jQuery】ツールチップを表示させる ～ tipsy の使用　～

jQuery

前準備 [1] 以下のサイトから、tipsy の javascript と CSS をダウンロードする 1-1) jquery.tipsy.js 1-2) tipsy.css https://github.com/jaz303/tipsy [2] jQuery と 1)でダウンロードしたファイルをインポートする サンプル <html> <head> <meta http-equiv="Content-type"content="text/html; charset=UTF-8"></meta> </head></html>

【jQuery】タイマー処理 ～ setInterval の使用　～

jQuery

■ 構文 その１ $(function(){ setInterval(function(){ 【処理】 },【タイマー時間(ミリ秒)】); }); http://black-flag.net/jquery/20110715-3339.html その２ var timer = setInterval(【処理関数】, 【タイマー時間(ミリ秒)】); http://blog.livedoor.jp/l…

【jQuery】複数の画像をスライドショーで表示する ～ Cycleの使用　～

jQuery

デモ http://malsup.com/jquery/cycle/anchor.html ダウンロード http://malsup.com/jquery/cycle/download.html 項目 * timeout: 画像が切り替わる時間 * pause: 0 は「ウスを乗せるとスライドが停止なし」、1 は「停止する」 * autostop: 0 は「ストップな…

【jQuery】フェードイン・アウトで表示する ～ Innerfade の使用　～

jQuery

* 画像でも文字でも、フェードイン・アウトで表示可能 ダウンロード * 一番下まで行って「jquery.innerfade.zip (XXX kb)」を押下。 http://medienfreunde.com/lab/innerfade/ デモ http://miracle-ysdesign.com/test-sample/jquery-test/crossfade/Innerfad…

【jQuery】自動再生で切り替える ～ Slider Kit の使用（２）　～

jQuery

http://blogs.yahoo.co.jp/dk521123/26631495.html の続き。 サンプル + Main +- site +- default.html +- lib (ダウンロードしたlibをそのまま置いた) +- css +- images +- js サンプル <html lang="jp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>【勝手にやってちょ０１】</title> </meta></head></html>

【jQuery】自動再生で画像を表示させる ～ Photo Slider の使用　～

jQuery

使用上の注意 (1) jquery1.3.1だと、動作しない模様（って、もうv1.7.1まで、でてるやんけ） (2) 登録するファイル名に制限がある（回避方法あり） デモ http://opiefoto.com/articles/photoslider#example 参考文献 http://dispersalblog.blog90.fc2.com/bl…

【jQuery】進捗状況を表示 ～ progressbar の使用　～

jQuery

シンプルなサンプル * まずは、これで環境ができているかを確認する サンプル <html> <head> <title></title> <link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css" /> <script src="jquery/jquery-1.6.2.js" type="text/javascript"></script> </link></head></html>

【jQuery】入力補助（日付編） ～ Datepicker & Masked Input の使用　～

jQuery

■ Datepicker * 日付入力補助で、カレンダーフォームを作成する Datepicker仕様 http://docs.jquery.com/UI/Datepicker デモ http://akdiary.seesaa.net/article/114106237.html 主なプロパティ 一般 * dateFormat：日付フォーマット(例「dateFormat: 'yy/mm…

【jQuery】複数画像を切り替える ～ Slider Kit の使用　～

jQuery

http://blogs.yahoo.co.jp/dk521123/24754786.html の続き。 ダウンロード http://www.kyrielles.net/sliderkit/sliderkit_en.html デモ http://www.kyrielles.net/sliderkit/demos/photos-galleries.html 特徴 * タグ構造や部品単位でclass属性が決まってい…

【jQuery】表の操作について ～ tablesorter 編 ～

jQuery

■ 2018/08/02追記 * 以下の関連記事で扱った DataTables ってのもある。 https://blogs.yahoo.co.jp/dk521123/37668379.html ■ テーブルにソート機能を追加する 設置方法 [1] 以下から、tablesorter (__jquery.tablesorter.zip) をダウンロードする http://t…

【jQuery】時刻入力について ～ Time Entry の使用 ～

jQuery

サンプル <html> <head> <script src="./js/jquery.js" type="text/javascript"></script> <script src="./js/jquery.timeentry.js" type="text/javascript"></script> <script src="./js/jquery.timeentry-ja.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function($){ $("#inputForStartWor…</head></html>

【jQuery】複数画像を切り替える ～ jCarouselLite の使用　～

jQuery

解決方法 * jQuery + jCarouselLite を使用することで解決。 後日談 * jCarouselLiteは、IEで色々とトラブルがあるらしい。で、jCarouselがあるらしい。 http://blog.mufu.jp/2009/01/jcarousellitejcarousel.html jCarouselについて http://www.atmarkit.co…

【jQuery】jQuery UI ～ Dialog/ダイアログ ～

jQuery

jQueryのリンク jQuery 入門編 http://blogs.yahoo.co.jp/dk521123/22669718.html jQuery UI - Dialog/ダイアログ - http://blogs.yahoo.co.jp/dk521123/22674817.html jQuery UI のダウンロード * 以下のサイトから、「Download」をクリックし、jQuery UIを…

【jQuery】jQuery ～ 入門編 ～

jQuery

jQuery のダウンロード [1] 以下のサイトから、「Development」をチェックして、jQueryをダウンロードする http://jquery.com/ ※ FireFoxなどの場合、ソースコードが見えてしまうので、それを全選択＋コピペし、UTF-8形式で、「jquery.js」の名前で保存する …