- 2013-11-19
「自社でのちょっとしたシステムをQHMで準備して利用しよう！」・・・という事で、簡単なプラグインを作成して、集計表などを画面に表示して利用しています。メニューを作成し、リンク先の画面でひとつの集計表という事にしています。集計は当期（会計年度の今期）や今月、そして今日といった日付入力が多くなります。jQueryではCSSのclass指定やID指定された部分に簡潔な記述（スクリプトで）にテキストボックスの値を変更できますので、この日付の入力を現在のパソコンの時計などを利用してある程度自動で入力することに挑戦してみます。簡単なjQueryの練習です。
まず基本事項の確認。テキストボックスの内容をjQueryで変更する時は、
$(セレクタ).val("変更後の値");
とします。
セレクタは、CSSでお馴染みですがidやclass指定の内容です。同じidの名称を同一のWeb画面上に複数設定してはいけません。複雑な一覧表では同じ種類の日付を設定するかもしれませんので、値を変更するテキストボックスの判別は、classで行うことにします。
$(".date_now0").val('2013-11-01');
$(".date_now1").val('2013-11-30');
$(".date_now2").val('2013-10-31');
$(".date_LastKessanStart").val('2012-06-01');
$(".date_LastKessanEnd").val('2013-05-31');
という雰囲気になります。Web上では、
<input type="text" name="__start__" class="date_now0">
表示した時には、次のようにする予定です。
classの複数指定
ここで、class内容の複数指定について確認します。
上記の様に、jQueryで制御する為に利用するclass名ですが、見栄えを指定する従来のCSSのclassとして共用すると、デザインの変更などの時に気を使わないといけない事があります。そこで、見栄えの為のクラス名はjQueryで使うクラス名とは別にします。つまり、同時に二つのクラス名を設定します。
設定は、簡単です。
class="1つ目のクラス名 2つ目のクラス名"
と半角空白で区切ってクラス名を指定します。
以下簡単なサンプル
テキストボックスの背景色がピンク色の部分は、クラス指定を二つ行い。regbgで色を指定しています。
QHMにした時のコードも示していますが、表示の関係で 半角の{が二つ続く部分は、間に半角スペースを1個入れています。"}"が二つ続く部分も同様です。
class指定はひとつのみ
class指定を複数指定した場合
ひとつは、値を自動で設定する為の識別名として「date_now」、もうひとつは書式の変更をする為の「redbg」。
例えば、前回決算期間
〜このサンプル部分のソースは、以下のような感じです。
function DateLastKessanStart() {
return "2012/06/01";
}
などは、計算も何もしていませんが、この様に関数にしておくことで将来これを計算などで求めるような時には計算式を設定します。QHMですが、内容の殆どは、htmlプラグインでHTMLを直接書いている形式となっています。
#html{ {
<style type="text/css">
.redbg { background-color: #FFDDDD; }
.bluebg { background-color: #DDDDFF; }
.greenbg { background-color: #DDFFDD; }
</style>
<link rel="stylesheet" href="./jquery/css/redmond/jquery-ui-1.10.3.custom.css">
<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript">
<!--
$(function() {
$(".date_now0").val(DateYYYMMDD(1));
$(".date_now1").val(DateYYYMMDD(1));
$(".date_now").val(DateYYYMMDD());
$(".date_now1").val(DateYYYMMDD(1));
$(".date_now2").val(DateYYYMMDD(2));
$(".date_LastKessanStart").val(DateLastKessanStart());
$(".date_LastKessanEnd").val(DateLastKessanEnd());
});
// typeno
// 0 : yyyy/mm/dd
// 1 : yyyy/mm/dd hh:mm:ss
function DateYYYMMDD(typeno) {
var now = new Date();
var year = now.getYear(); // 年
var month = now.getMonth(); // 月
var day = now.getDate(); // 日
var hour = now.getHours(); // 時
var min = now.getMinutes(); // 分
var sec = now.getSeconds(); // 秒
if (year < 2000) { year += 1900; }
month +=1;
// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
if (month < 10) { month = "0" + month; }
if (day < 10) { day = "0" + day; }
if (hour < 10) { hour = "0" + hour; }
if (min < 10) { min = "0" + min; }
if (sec < 10) { sec = "0" + sec; }
switch (typeno) {
case 1 : r = year+"/"+month+"/"+day;
break;
case 2 : r = year+"/"+month+"/"+day+" "+hour+":"+min+":"+sec;
break;
default :
r = year+"/"+month+"/"+day;
}
return r;
}
function DateLastKessanStart() {
return "2012/06/01";
}
function DateLastKessanEnd() {
return "2013/05/31";
}
// -->
</script>
} }
*** class指定はひとつのみ
#html{ {
<INPUT type="TEXT" name="date1" class="date_now" value="">
} }
*** class指定を複数指定した場合
ひとつは、値を自動で設定する為の識別名として「date_now」、もうひとつは書式の変更をする為の「redbg」。
#html{ {
<INPUT type="TEXT" name="date2" class="date_now redbg" value="">
<INPUT type="TEXT" name="date2" class="date_now0 redbg" value="">
<INPUT type="TEXT" name="date2" class="date_now1 redbg" value="">
<INPUT type="TEXT" name="date2" class="date_now2 redbg" value="">
} }
*** 例えば、前回決算期間
#html{ {
<INPUT type="TEXT" name="date3" class="date_LastKessanStart redbg" value=""> 〜 <INPUT type="TEXT" name="date4" class="date_LastKessanEnd bluebg" value="">
} }共通部分を別ファイルする
共通で使う部分をJavaScriptの別ファイルにしてみましょう。
PHPのプラグインを開発するのと同様に場合によってはFTPでファイル転送が必要となりますが、簡単ですね。