忍者ブログ

メモ的な日記

プログラミングについての個人的メモ日記。PHPとかjQueryとかがメイン。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ドロップダウン型メニューを垂直に並べる

前回のドロップダウン型メニューのコードを、ちょっと変更するだけでメニューを垂直に出来るみたいなので、やってみました。

使用するファイルは前回と同じく以下の5つです。
jquery.jdMenu.css
jquery.bgiframe.js
jquery.dimensions.js
jquery.jdMenu.js
jquery.positionBy.js


使い方

ソースコードは前回やった水平のドロップダウン型メニューとほとんど同じです。

jQuery本体とjdMenu一式を組み込む


ul/li要素を使ってメニューを作る。


前回のドロップダウンメニューとほぼ同じソースです。
異なる部分は、最上位のulタグの[class="jd_menu"]の部分が、[class="jd_menu jd_menu_vertical"]となっている点。

つまり、class要素を[class="jd_menu"]とすると水平に
[class="jd_menu jd_menu_vertical"]とすると垂直にメニューが並びます。

サンプルはこちら 水平/垂直の変更も簡単にできますね。

おわり。
PR

水平ドロップダウン型メニューの表示

水平方向のドロップダウン型メニュー表示が出来るプラグインを試してみました。

サンプルコード&ダウンロードは以下から。
jdMenu公式ページ

使用するファイルは
jquery.jdMenu.css
jquery.bgiframe.js
jquery.dimensions.js
jquery.jdMenu.js
jquery.positionBy.js
以上の5つです。


使い方

jQuery本体とjdMenu一式を組み込む


後はHTML部分でul/liを使ってメニューを作るだけです。
最上位のul要素には[class="jd_menu"]を記述します。


サンプルはこちら
簡単にドロップダウンメニューが作れて便利です。

おわり。

validateでフォーム入力チェック

簡単にフォームの入力チェックができるjquery.validate.jsプラグインです。

コードのダウンロードは下記サイトから。

bassistance.de » jQuery plugin: Validation

使うファイルは
jquery.validate.min.js
messages_ja.js
の2つ。


使い方

jQueryとダウンロードしたjquery.validateを組み込む


HTML部分はこんな風に

必須項目にはclass="required"
URLとして入力させたいならclass="url"
E-Mailとし入力させたいならclass="email"
E-Mailで必須入力ならclass="required email"
という風に記述するだけです。

また、minlenght="4"で最小値設定
rangelength="5 10"で入力文字数設定など、細かい設定もできます。

で、スクリプト部分でIDを指定。

簡単に入力チェックが出来て便利です。
サンプルはこんな感じ

おわり。

モーダルダイアログの表示

モーダルダイアログを表示するjqModalを使ってみました。
ソースコードのダウンロードはこちら

使い方
まずはjQueryとjqModalを組み込む


JavaScriptの記述

HTML部分の記述


「ダイアログ」のリンクをクリックすると、id属性が"dialog"のdiv要素の内容がモーダルダイアログで表示されます。

サンプルはこちら

おわり。

PowerTipでツールチップを実装

簡単にツールチップを実装できるらしいPowerTipを使ってみました。
オプションでいろいろ弄れるようなので、自分好みのものを作れるみたいです。

ソースのダウンロードはこちら

使い方
まずはjQueryと上記サイトからダウンロードしたPowerTipのjsとcssを読み込む。

JavaScriptの記述

HTML部分はこんな感じ。titleにツールチップで表示させるテキストを記述します。

こんな感じになります→サンプル

最初のほうで触れたオプションを設定する場合は以下のような感じ。

そのままでも十分使えますが、いろいろ弄ってみるのも面白いかもしれません。

おわり。

カレンダー

10 2017/11 12
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30

カテゴリー

フリーエリア

最新CM

プロフィール

HN:
nate
性別:
非公開

バーコード

ブログ内検索

P R