formの同意確認をチェックしないとボタンが有効になりません。 - CodingMania
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
たった10行でできる！ドロワーメニューの作り方
今流行のドロワーメニュー。ハンバーガーマークを押したらニョキッと出てきてバッテンを押したらニョキッといなくなるやつです。 ソースはたくさん落ちていて、それ使っても良かったんですが軽量にしたかったのと、あまり機能もいらなかったので自分で書いてみました。 コンテンツ部分がグインっと動いたりしません。コンテンツにメニューがかぶさるだけです。 サンプルページ ソースダウンロード（ZIP） ※今回紹介するソースではWindowの右から出てきます。 スクリプト 使うのはこの10行。 ※jQueryを読み込んでおいてくださいね。 $(function($) { WindowHeight = $(window).height(); $('.drawr').css('height', WindowHeight); //メニューをwindowの高さいっぱいにする $(document).ready(funct
【jQuery】モーダルウィンドウによる年齢認証の作り方 ｜ KLUTCHE
以前紹介したCookieを使って、モーダルウィンドウの年齢認証を作成する方法の改良版です。 改良点 Javascript がぐっと短くなりました。 CSS によるレイアウト変更が容易になりました。 必要な機能をしぼって、軽量かつ汎用的にしてみました。 まずはデモ デモページ 五木川ダムの渋い魅力はアダルトな感じがするので、年齢認証を設置してみました。 モーダルウインドウは、シックに単色背景透明で作ってみましたが、見た目はCSSで自由に変更できます。 必要なもの Javascript を3つ使います。 ・jQuery ・jquery.cookie.js ・modalConfirm.js jQueryはGoogleライブラリから直接読み込みましょう。 のこり2つのファイルはアップロードしてヘッダ内で読み込みます。 <script type="text/javascript" src="http
Cat Speak – ヨガ＆Webデザイン – 札幌 | jquery.scrollable.jsで画像一覧をスクロールする
画像の一覧をスクロールするjQueryプラグインscrollable.jsを使ってみました。 配布サイト（jQuery TOOLS）が英語で、ダウンロード方法に少し迷ったので、メモしておきます。 2011年5月時点のダウンロード方法です。 グローバルナビのDownloadを開く UI toolsから必要なプラグインだけを選択 デフォルトでは全てにチェックが入っているので、Scrollableだけにします。 「Download Now」ボタンを押すと、jquery.tools.min.jsというファイルがダウンロードされる 基本的な使い方は、配布サイトのDemoに丁寧に書いてあります。 解説は英語ですが、ソースをそのままコピーするだけでした。 今回、ある案件で利用する際に、下記の3点についてコードを書き加えたので、ソースをメモしておきます。 Demoはこちら 一覧で使用する画像が、オンライン
カード型デザインのマウスホバーエフェクト – いつか誰かの役に立つかもしれないweb制作屋の備忘録
普通によく見かけるホバーエフェクトです。 HTML <div class="sample01"> <a href="#"> <img src="./image/sample01.jpg" /> <h2>サンプル 01</h2> </a> <p>サムネイルにマウスを重ねると半透明になり、タイトルにマウスを重ねると色を赤に変えてます</p> </div> CSS .sample01 { margin: 10px 8px; width: 300px; height: 400px; border-radius: 6px; box-shadow: 0px 2px 4px #aaa; display: inline-block; } .sample01 img { width: 300px; height: 200px; border-radius: 6px 6px 0 0; } .sample01
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインとまとめ社