DOM読み込み時に動作させる $(document).ready

こんにちは山田です。

DOMという言葉を最近知りました。

■DOMとは　：XMLやHTMLで記述された文書をプログラムやスクリプトから参照あるいは操作するための方法を提供する仕組み（出典｜ASCII.jpデジタル用語辞典）

というわけで
DOMの読み込み完了時のみに処理をいれたい時に使う関数の紹介です。
フロントエンドだと、jQueryがやっぱり便利ですね。

■関数はこちら
JavaScript

jQuery(document).ready(function(){
　//実行したい関数
});

■実際に作ったソース

非表示にしたい要素を隠したり、
タブ付きメニューのタブ部分とパネル部分の初期化を行ってみました。

jQuery(document).ready(function(){
　 //閉じたい要素を閉じたり
 $("#placeCount").css("display","none");
 
 //タブ付きメニューの、タブとパネル部分の初期化
 $("#tab li:first").addClass("tabCurrent");
 $(".panel:not(:first)").hide();
});

Read More

任意の位置でタブメニューを開いておく

こんにちは山田です。

タブ付きのメニューってありますよね。
それを、初期状態で受け取った数字によって、
開始タブを任意に変えることをやりました。
その備忘録です。
タブとそれに紐づくパネルが同時操作されます。
タブの部分は、クラス名に"tabCurrent"があるもの
パネル部分は、目的のdivタブのみ表示をさせています。



HTML

　　
消防車
　　
救急車


　　

  　　　

　　　　　　
赤い
　　　　　　
大型車
　　　　
　　
　　

 　　　　

　　　　　　
白いい
　　　　　　
中型車
　　　　　
　　

JavaScript

$(function() {
 var num = "<%=ID %>";//サーバサイドから値渡し
 var $currentTab = $("#tab" + num);
 $currentTab.addClass("tabCurrent");
 //パネル側も同様にやる
 var $currentPanel = $("#panel" + num);
 $(".vehiclePropaty").hide();
 $currentPanel.fadeIn("fast");
});

Read More

CSSのDisplayプロパティ

こんにちは山田です。

JSの制御で、
データがない時は、丸ごと消しときたい時ってありますよね
その時の実装例です。

件数件

$(function() {
    $('button').click(function(){
        $('div').css('display', 'none');
    });
});

ちなみにjQueryの .hide()はこれと同様にdisplayプロパティのblock→noneの動作をさせることが出来ます。

Read More

三項演算子とは？

こんにちわ、開発者のⅠです。

山手線の新型車両が１１月３０日にデビューしたのですが、翌日から運転を取りやめているようです。いつ復帰するのかも現時点では不明とのことで、見切り発車だったとは思いたくないのですが、今後が気になる話です。

さて、今回は三項演算子についてのお話です。

この三項演算子の構造を簡潔に書いてみると、以下の様に表現できます。

"A 条件式 " ?  "B 真の場合の処理"  ：  "C 偽の場合の処理"

これは、ifを使った条件文

if ("A 条件式")
{
   "B 真の場合の処理"
}
else
{
   "C 偽の場合の処理"
}

と同じ構造になっています。

具体的に三項演算子を使って思います。
今回の例文では、変数ageを宣言しておき、その値によって表示される文言が切り替わります。

int age = 30;

void CheckAge(int age)
{
    printf("%s", (age >= 20)? "私は成人です" : "私は未成年です");
}

// 表示されるのは"私は成人です"

それでは、今日はこの辺りで失礼します。

Read More

jQueryでHTMLにテキストを表示させる方法

こんにちは山田です。

ｊQueryでHTML上にテキストを表示させる方法です。
使うのは以下の構文です。

.text(textString)

引数のtextStringはマッチした要素内に挿入するテキスト文字列です
実際に使ったソースは下のようになります。

勝手ながらスペースの問題で、格納した文字の0番目のみをテキストとして表示させて、2個目以上は「…他」と表示させてました。
実際に表示される位置はid名が ”plceText”の要素になります。
参考になりますでしょうか？

//表示させたいテキストを配列で用意する（disp_yourText）
if(disp_yourText.length > 0)
{
 if(disp_yourText.length > 1)
 {
  $('#placeText').text(disp_yourText[0] + "...他");
 }
 else{
  $('#plceText').text(disp_yourText[0]);
 }
}

Read More