忍者ブログ

メモ的な日記

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

[PR]

×

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

テキストエリアでTabの有効化

テキストエリアでTabの入力を有効にする。
script書いてID指定するだけで出来るみたい。


フォルダツリー表示の時にも使った、interface.jsを使用します。

使い方

jQueryとファイルの組込み


scriptの記述


htmlの記述


サンプルはこちら

おわり。
PR

連動プルダウンを選択した状態で表示

ページ遷移時に、連動プルダウンを選択された状態で表示する。
前回の連動プルダウンの応用。


こちらのサイトのコメント欄を参考にさせていただきました。

前回使ったConnectedSelect.jsにスクリプトを追加するだけ。


使い方


以下のようにConnectedSelect.jsにスクリプトを追加します。

4行目あたり


関数を追加



プルダウン初期化前に追加した関数を呼び出す



おわり。

連動プルダウン

システムで連動プルダウンを使いたくなって、色々調べたので覚え書きを。

親カテゴリを選ぶと、対応した子カテゴリを表示し、さらに子カテゴリを選ぶと孫カテゴリが・・・
という風なプルダウン。

連動プルダウンのJavaScriptはいろいろあるようですが、個人的に使いやすそうなConnectedSelect.jsを使用します。

こちらのサイトを参考にさせていただきました。


使い方


jQueryとファイルの組込み




プルダウンメニューを作成
親カテゴリのoption valueと、子カテゴリのoptgroupのlabelを対応させておきます。

連動プルダウン初期化

サンプルはこちら
valueとlabelを対応させるだけなので、DBとの連携も楽ですねー

おわり。

フォルダツリーの表示

フォルダツリーの表示をやってみた。

使用するファイルは3つです。
interface.js
treeview.js
style.css


使い方

最初にjQueryとファイルの組込み


あとはul/liを使ってリストを作るだけです。


サンプルはこちら
ツリーの開閉も可能です。
組み込んでリスト構造を作るだけなので簡単。

おわり。

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

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

使用するファイルは前回と同じく以下の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"]とすると垂直にメニューが並びます。

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

おわり。

カレンダー

07 2017/08 09
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