jqueryでinputチェックボックスのチェックが入ると、disabedを操作して送信ボタンが有効になるようにしています。 チェックが外れると、送信ボタンが無効になります。 内容確認しないと進めないというフォームに使えるのではないでしょうか？ ヘッダーで、jquery.jsと後述のcheck.jsを読み込んでいます。 2014/01/21改訂。 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/check.js"></script> [check.js]JavaScript $(function(){ //送信ボタンの無効、チェックボックスを外す $(".mod_form_btn inp

割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l

今流行のドロワーメニュー。ハンバーガーマークを押したらニョキッと出てきてバッテンを押したらニョキッといなくなるやつです。 ソースはたくさん落ちていて、それ使っても良かったんですが軽量にしたかったのと、あまり機能もいらなかったので自分で書いてみました。 コンテンツ部分がグインっと動いたりしません。コンテンツにメニューがかぶさるだけです。 サンプルページ　ソースダウンロード（ZIP） ※今回紹介するソースではWindowの右から出てきます。 スクリプト 使うのはこの10行。 ※jQueryを読み込んでおいてくださいね。 $(function($) { WindowHeight = $(window).height(); $('.drawr').css('height', WindowHeight); //メニューをwindowの高さいっぱいにする $(document).ready(funct

簡単！レスポンシブメニューをjQueryでドロップダウンできるように設定する方法 2016.06.16 スマホ用のレスポンシブwebサイトを作る時に、のハンバーガーメニューからドロップダウンするメニューを作りたい人は必見です。jQueryの｢MeanMenu｣を使って設置しますが、簡単に作れますので、ご覧ください。 完成したドロップダウンメニュー ※実際に私が設定したレスポンシブサイトは なぜ、ドロップダウンメニューが必要なのか？ スマホの画面は大きさが限られているので、できるだけ表示画面を確保する必要があるため ドロップダウンメニューは今や標準装備であり、ないとユーザリビティの低下につながるため サイトに動きがあることにより、ユーザーを退屈させないため ドロップダウンメニューの設定方法 まず、｢MeanMenu｣のサイトから、jQueryファイルをダウンロードします。ダウンロードしたら、

デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント

Googleマップを白黒する方法が知りたくて色々調べたんですが、分かりにくい記事が多かったので、シンプルかつ、一番簡単に設置するために書くことにしました。 和風な店舗ホームページ制作の時にGoogleマップの表示はやっぱりモノクロがしっくりきます。 後はモダンなWebサイトデザインだったりとか。 普通のカラーは嫌だ！モノクロがいいわ！という方におすすめな方法です。 JSを用意する インラインで書いてもいいですし、外部から読み込んでもどっちでもいいんですが、下記コードをコピーしてmap.jsとかでjsファイルを作ってください。 function initialize() { var latlng = new google.maps.LatLng(35.685175, 139.752799); var opts = { zoom: 17, center: latlng, mapTypeCont

Googleマップを表示させるには APIキー が必要です。 APIキーを取得する場合は 「Google Cloud Platform」で プロジェクトを作成し、プロジェクト内でAPIキーを作成・請求先アカウントを紐づけるという作業が必要です。 ここでは新しくプロジェクトを作成し、APIキー取得と請求先アカウントの設定方法を紹介します。 「Google Maps Platform の提供を開始 : Google マップのビジネス利用がさらに進化 」 https://developers-jp.googleblog.com/2018/05/google-maps-platform-google.html 「Google Maps Platform」 https://cloud.google.com/maps-platform/ 準備 まず以下のものを用意してください。 ①Googleアカウン

Google Maps APIを使って、地図を表示したりマーカーを立てたりをやってみます。 今回使用するのは、以下のJavaScript API になります。 Google Maps JavaScript API | Google Developers ■目次 Google マップの表示 Google マップにマーカーを立てる マーカーに吹き出しを追加する 住所から緯度と経度を調べる Google マップに複数のマーカーを立てる 1. Google マップの表示 まずは地図を埋め込んでみます。 実際に使用する場合はAPIキーを取得したほうがよいですが、今回は動作の確認ができればよいので省略します。 APIキーを使用する場合は、こちらからAPIを有効にして、APIキーを作成して下さい。 1-1. 地図を埋め込む場所を指定 ■HTML <div id="sample"></div> 1-2.

jQueryを使ったchart.jsとは？ 前にもいくつか紹介しましたjQueryとはJavaScriptのライブラリで、ライブラリとはなんぞや、となるとめんどくさいので、wikiでも見ておいて ライブラリ -Wikipedia 適当に抜粋すると 汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたものである。一般にライブラリは、それ単体ではプログラムとして動作させることはできないので実行ファイルではない。 よけい意味がわからないかもだけど、jQueryで言えば JavaScriptの超便利な拡張機能で、少ないコードでいろんなことができるやつってさらにわかりにくくなったことで、説明は諦めます。 まあ実際に次から見ていって！ で、今回はjQueryを使ったchart.jsってのを使ってレーダーチャートをサイトに簡単に実装していく方法を書いていきます。 完成形をまず見てみる まず

特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。

フルスクリーンで表示させ、ブラウザサイズを変更しても縮尺してくれるjQueryプラグインcovervid.js。800bytesと軽量で便利なプラグインです。

まずは下記のサイトから「jquery.carouFredSel-5.6.2-packed.js」ファイルをダウンロードします。 ▼jquery.easing.1.3.jsファイル jquery.carouFredSel-5.6.2-packed.jsダウンロード ダウンロードファイル「jquery.carouFredSel-5.6.2-packed.js」をアップロードし、「jquery.min.js」「config.js」ファイルを読み込む「JavaScript」ファイルへの読み込みコードをヘッダーへ記載しましょう。 【ヘッダーに記述】 【cssファイルに記述】 /* スライド ---------------------------- */ #service { position: relative; padding: 0 0 10px; } #service .slide { font

画像の一覧をスクロールするjQueryプラグインscrollable.jsを使ってみました。 配布サイト（jQuery TOOLS）が英語で、ダウンロード方法に少し迷ったので、メモしておきます。 2011年5月時点のダウンロード方法です。 グローバルナビのDownloadを開く UI toolsから必要なプラグインだけを選択 デフォルトでは全てにチェックが入っているので、Scrollableだけにします。 「Download Now」ボタンを押すと、jquery.tools.min.jsというファイルがダウンロードされる 基本的な使い方は、配布サイトのDemoに丁寧に書いてあります。 解説は英語ですが、ソースをそのままコピーするだけでした。 今回、ある案件で利用する際に、下記の3点についてコードを書き加えたので、ソースをメモしておきます。 Demoはこちら 一覧で使用する画像が、オンライン