忍者ブログ

メモ的な日記

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

[PR]

×

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

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

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

サンプルコード&ダウンロードは以下から。
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"]を記述します。


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

おわり。
PR

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にツールチップで表示させるテキストを記述します。

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

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

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

おわり。

アコーディオン式スライダー

ウェブサイトによくあるアコーディオン型のスライダーを使ってみる。
ソース配布先はこちら。Click here to download the source code.からダウンロード出来ます。
サイト内のダウンロードリンクはこちら

基本的にはダウンロードしたaccordion.zipを解凍した中にあるindex.htmlと同じように組み込んでいけば同じように使えます。

<head>にjsファイルとcssファイルの呼び出しを記述


<body>部分にdiv,dl,dt,ddでリスト作成



最後にJavascriptの記述を。
記述の仕方でページを開いた時にリストを閉じておくか、どれかを開いた状態で表示するかを変更できます。

すべて閉じる場合


どれかを開いておく場合


slider1.initの第2引数にどこを開いておくかを記述します。
0だと1番目、1だと2番目を開く、といった感じ。
サンプルはこちら
cssを編集すればいろいろアレンジ出来そう?

おわり。

カレンダー

09 2017/10 11
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 31

カテゴリー

フリーエリア

最新CM

プロフィール

HN:
nate
性別:
非公開

バーコード

ブログ内検索

P R