Quick Start Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan. The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched. Here is most simple example. <!DOCTYPE
時々日本地図をサイトに載せ、そこから地域のページにリンクさせるということをすることがありますが、47都道府県のリンクを日本地図上に配置する作業は、とても骨が折れます。 jQueryのプラグインで、Japan Mapという、日本地図をcanvasで表示し、 マウスをホバーしたときや、地域をクリックしたときのアクションをつけることが出入るものが公開されていましたので、ご紹介いたします。 Japan Mapのサイト↓ Japan Map ( jQuery plugin ) DEMO 使い方 まず、Japan Mapのサイトから「jquery-japan-map.js」をダウンロードし、 htmlのheadでjQueryとともに読み込みます。 <head> ・・・ <script type="text/javascript" src="js/jquery-1.9.1.min.js"></scrip
jQueryでプラグインに頼らず、簡単にタブメニューを実装する方法のご紹介です。 プラグインを使わなくても意外と簡単に実装できますので、ぜひ試してみてください。 CSSでデザインする方法と、画像を使う方法の2パターンをご紹介します。
HTML5のcanvas要素の描画コンテキストを、getElementById()の代わりにjQueryで取得する方法です。jQueryな方はタイトルだけで記事の主旨がお分かりと思いますので読み飛ばしてください（笑）。 １．canvas要素の描画コンテキストとは 前置きになりますが、canvas要素は描画機能にアクセスするためのgetContext()というDOMメソッドを持っています。canvas要素のDOMノードを取り出し、取り出したDOMノードに対してgetContext('2d')を実行することで、描画機能にアクセス可能な「描画コンテキスト」を取得します。 getContext()の引数の「2d」は、描画コンテキストの種類を示し、現在「2d」固定です。要するに「2d」を指定することで「2D描画コンテキスト」を取得します。将来的に、例えば「3d」という引数が増えて3D描画コンテキスト
レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。 アコーディオンメニュー 今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。 クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world! 基本的なやり方 どうやって実装するかを簡単に説明します。 labelをクリックする アコーディオンメニューのクリック部分になります。 labelクリックでチェックボックスにチェックを付け
「セール情報」や「重要なお知らせ」を、 モーダル（フロート）で目立たせたいという要望があったので、 ページのアクセス時にモーダル（フロート）を表示するjQueryプラグインを制作しました。 「jquery.layerBoard.js」は商用利用・改変・再配布可能です。 デモ トップページのアクセス時にモーダルを表示させるプラグイン。 ダウンロード：layerboard.zip【111KB】 デモをみる 次にアクセスしても指定した時間までひらきません。 デフォルトでは1分で、再びひらくようになっています。 再びひらくまでの時間は分単位で指定できます。 必要なファイル 必要なのは jQuery jquery.cookie.js jquery.layerBoard.js jQueryとjquery.cookie.jsはサイトからダウンロードしてください。 jquery.layerBoard.js
on()はbind()、live()、delegate()をまとめたもの。 hover()はmouseenterとmouseleaveのエイリアスです。
まずは下記のサイトから「jquery.cookie.js」と「jquery.layerBoard.js」ファイルをダウンロードします。 ▼jquery.cookie.jsファイル jquery.cookie.jsダウンロード ▼jquery.layerBoard.jsファイル jquery.layerBoard.jsダウンロード まず最初に「jquery.js」「jquery.cookie.js」「jquery.layerBoard.js」ファイルを読み込む「JavaScript」ファイルへの読み込みコードをヘッダーへ記載しましょう。 【ヘッダーに記述】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページアクセス時ポップアップ表示で「はい」or「いいえ」を選択する jQuery 「modal」ウ
タグ 放火EC-CUBE躾アンチウィルスGitAnsibleConoHa VlanWindows ServerLaravelAMD GPURTL-SDR Blog海外お土産貧困教育バグトラッキングDrupalLarabelgoofysRTX1200KubernetesRX 9060 XT レビュー求人ジェネリック家具、ＤＦＶインストールジェネリック、コピーツクモActive DirectoryベンチマークVagrantゆるいハッキングRedisLogstashグラボ新製品APT受信予防接種#RTL-SDR無利子NginxリカバリBINDVirtualBoxAWS EFSfluentdKibanaRX 9000シリーズ#SDR熊本アメーバ赤痢エクセル、小技、文字列操作日本工学院OpenCVApacheRTX1210XAMPPALBゆるいハッキングセミナーRX 9060 XT コスパインフラ現
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation
【使い方】 JS Sweet Alert 2 本日はSweetAlert2というJSライブラリの使い方に関して記載していきたいと思います。 このライブラリはブラウザ準拠の地味なアラートを、デザイン性のあるモノにカスタマイズするライブラリになります。 ブラウザ準拠のアラート DEMO 1 // HTML <a class="btn" id="btn01">DEMO 1</a> // JS $("#btn01").click(function(){ alert("ブラウザ準拠のアラート"); }); ※この解説ではjQueryを使用しますが、jQueryを使用しなくても、もちろん作動します。 １．導入･設置方法 SweetAlert2は、ライブラリをダウンロードして自分のサイト内にファイルを設置し読み込む方法と、CDNを使用して読み込む方法がありまます。 ライブラリをダウンロードする場合 Gi
jQueryのscrollTop()でスクロール位置を取得することでいろいろなことができるようになる。 ウィンドウ最上部のスクロール位置の取得 $(window).scrollTop()で取得。$(window).on("scroll"だけだとロード時に現在位置が表示されないので$(window).on("load scroll"と記述するのが望ましい。 function getScrollTop(){ $("#result").text($(window).scrollTop() + 'px'); } $(window).on("load scroll", getScrollTop); jQueryのscrollTop() スクロール位置取得の使い方 サンプル1 ウィンドウ最下部のスクロール位置の取得 $(window).scrollTop()+$(window).height()で取得
1つの要素に対してclassが複数指定されているときに、classを全て取得する方法がすぐに思いつかなかったので、調べた内容をメモしておきます。 サンプルコード 複数のclassの付いた要素を用意します。 HTML <div class="sample hoge fuga aaaaa"></div> .sampleが持っているclassをすべて取得してみます。 JavaScript $(function() { var classVal = $('.sample').attr('class'); // classの値を取得 var classVals = classVal.split(' '); // 取得した値を分割 // 配列になっているのでforで一つずつ取得できる for (var i = 0; i < classVals.length; i++) { console.log(cl
JavaScriptライブラリとして知られるjQueryが約1年ぶりにアップデートされ、「jQuery 3.3」が1月19日付けでリリースされました。 1つ前のバージョンであるjQuery 3.2のリリースが2017年3月16日で約10カ月前、さらにその前のバージョンであるjQuery 3.1のリリースがそこから8カ月前に遡る2016年7月7日ですので、jQueryはゆっくりながらも着実にアップデートされてきたといえるでしょう。 配列に対してまとめてクラスの追加や削除が可能に 新機能として.addClass()、.removeClass()、.toggleClass()の3つのメソッドが、列挙されたデータに対して利用可能になりました。以下がその例です。 jQuery(elem).addClass([ 'dave', 'michał', 'oleg', 'richard', 'jason',
LPとか縦に長いホームページのアクセス解析ってどうやってますか？ Google Analyticsならデフォルトでも色んなデータ見れるので重宝してるんですが、それでもLPとか縦長のページだとどこまで読まれてるんだろう？とかどれぐらいの滞在時間なのかな？とか色々気になります。 特に、LPだとボタンのクリック数とかから推定してたんですけど、ある日スーパーなjQuery Pluginを見つけました₍₍⁽⁽(ી(*ﾟ▽ﾟ*)ʃ)₎₎⁾⁾ jQuery Scroll Depth Scroll Depth is a small Google Analytics plugin that allows you to measure how far down the page your users are scrolling. It monitors the 25%, 50%, 75%, and 100%
エンジニアの転職情報サイト > WordPress > Lazy Loadとは？画像読み込みを遅延ロードするWordPressプラグインと、jQuery（jsライブラリ）の設定 公開日：2014-09-14 更新日：2022-10-16 Lazy Load とは・・・Webページのスクロールに応じて、画像データを遅延読込させるプラグインになります。 このプラグインは、Wordpressで利用できるプラグイン：「Lazy Load」と、 jQueryのプラグインである「lazy load plugin for jquery」があります。 上記から、Wordpressを利用している場合は、プラグイン：「Lazy Load」を利用し、 WordPressを利用していないWebサイトの場合は、「lazy load plugin for jquery」を利用すると良いでしょう。 本来・・・画像を含む
jQueryプラグインのBoxerを試してみる。 Boxer http://formstone.it/components/boxer ※バージョンは3.3.0を使用。 設置 ファイルを下記のような感じで設置。 ├ HTMLファイル ├ jquery.fs.boxer.min.css ├ jquery.fs.boxer.min.js └ sample.png 基本 基本的にHTMLは下記のような感じで書く。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link href="jquery.fs.boxer.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script
サムネイルをクリックして大きな画像で表示するプラグインというと LightBoxが有名ですが、同じような機能を持った jQueryプラグインは数多く存在します。今回は、Boxerを紹介をします。 Boxerの使い方 GitHubに公開されている Boxerのページからデモファイルをダウンロードして、Boxerを実装するのに必要なファイルをサーバーにアップロードします。ファイルは、jquery.fs.boxer.min.js、jquery.fs.boxer.css、jquery.fs.boxer-icons.png、jquery.fs.boxer-loading-dark.gif、jquery.fs.boxer-loading.gifです。 <link href="css/jquery.maximage.css" rel="stylesheet"> <script src="http://a
jQueryでいろいろな要素をストライプ（縞模様）にする。 最近テーブルとか、リストなんかをストライプ（縞模様）で表示されてるのとかよく見かけますね。 従来のHTMLでもこのような表現は可能でしたが、一行ごとにマークアップしなくてはいけないので地味に大変な作業でした。 そんな作業もjQueryを使えば簡単にできるみたいです。 投稿日2010年07月15日 更新日2011年04月22日 リスト（li）ストライプをHTMLで作成 jQueryの前にHTML+CSSで作成してみます。 例えばリスト（li）なら２つのクラスを交互に割り当てていけばいいわけです。 クラス名はなんでもいいのですが、わかりやすく、偶数奇数の英語である、「even」「odd」一般的なようです。 ただそのまま訳すと偶数＝evenっぽいんですが、jQueryのセレクタでは偶数はoddなので、ややこしいですが偶数に「odd」クラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
