忍者ブログ

メモ的な日記

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

[PR]

×

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

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

ウェブサイトによくあるアコーディオン型のスライダーを使ってみる。
ソース配布先はこちら。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を編集すればいろいろアレンジ出来そう?

おわり。
PR

テキストエリアにヘルプ表示

テキストエリアにヘルプを表示してみます。
すかし文字で表示して、フォーカスを取得したら消える感じ。
こちらを参考にしました。

外部ファイルは以下
jquery.watermarkinput.js

<head>にjQuery呼び出し記述




<body>部分


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


おわり。

キーボードからの時刻入力

前回がカレンダーで日付入力だったので、今回は時刻入力を。
キーボードからの時刻を入力出来るようにします。

外部ファイルは以下
jquery.timeentry.js

まずは<head>部分にjQueryの呼び出しを記述。




<body>部分



$("#[name属性]").timeEntryのshow24Hoursをtrueに設定すると24時間表示、flaseだとAM/PM表示になる模様。

こんな感じになります → サンプル
キーボードの数字、矢印キーで時刻が入力出来ます。

時刻を入力すると、分(minute)に現在時刻が自動入力されるみたい。
この辺りは使い方によっては邪魔になるかもしれないですねー。

あとは全角で数字入力すると動かない点。
入力制御もちゃんとしたほうがよさそう。


おわり。

datepickerで日付入力

トップにあるように、jQueryメインでメモがてら書いていこうと思います。
便利そう、面白そうと思ったものをとりあえず作ってみる感じ。

今回はjQueryを使い、テキストボックスからカレンダー表示し、日付選択ができるスクリプトです。
外部ファイルとして配置しているのは以下の3つ。
ui.datepicker.js
ui.datepicker-ja.js
flora.datepicker.css

<head>部分にjQueryの呼び出しを記述。




<body>部分はこんな感じで。


かなり簡素だけど一応サンプル

カレンダー

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