2012年1月アーカイブ


jQuery チェックボックスとラジオボタンに「checked」を設定する

| コメント(0) | トラックバック(0)
入力フォームでチェックボックスとラジオボタンをこんとろーるする場合のメモです。


チェックボックスは、「neme」でコントロールできますが、ラジオボタンは、「neme」が複数あるのでIDでコントロール。

チェックボックス
$("input[name=testname]").attr('checked','checked');



ラジオボタン
$("input#testid").attr('checked','checked');

ラジオボタンは、選択枠にIDも設定しておきましょう。



jQueryは、これを見ながら特訓中です。

【送料無料】 Jquery本格入門 / 沖林正紀 【単行本】

価格:3,465円
(2012/1/22 21:55時点)
感想(0件)




jqueryのテストサーバとしても、さくらVPS使ってますよ。!!

 





jQuery始めました。12(SyntaxHighlighter)

| コメント(0) | トラックバック(0)
ブログでプログラムのソースを張り付けることが多くなってきたのですが・・・


見ずらい。見ずらい。見ずらい。

3回ぐらい書いてしまうほど見ずらいです。

jQueryの件で調べごとをしていると、なんかカッコイイ画面に遭遇。

知れべてみると、SyntaxHighlighter というやつ。

いろいろな言語のソースを気持ちイイ感じで表現してくれます。
こんな感じで、使っちゃう。


<pre class="brush: js"> 

javaスクリプトのソース

</pre> 





無線LAN が壊れました。

| コメント(0) | トラックバック(0)

先週の土曜日から無線LANの調子が悪く、再接続が頻発していたのでおかしいなと思っていたのですが、
3日前から殆ど接続ができない状態に・・・

そんなこんなで、近くのケーズデンキで下記商品(WZR-HP-AG300H)を衝動買いしてしまった。
やっぱりBUFFALO

だって、今のもおんなじだから問題も出ないでしょう。ってことで。


認証方式もいままで「WEP」だったので、「WPA2 PSK」になって安全になったかな?

暇なときに簡易NAS機能も使ってみたいと思います。


jqueryでメモ

| コメント(0) | トラックバック(0)
このサイトが分かりやすかったのでメモです。





jqueryでテーブルのソート

テーブルの並び替えがしたい!!!!!



Queryでテーブル(table)を操作する小回り系コード5種
テーブルをゼブラにしたり、連番を振ったりするのに役立つリンク。



jQuery UI Datepicker-土・日・祝日・非営業日対応

カレンダーをカスタマイズしたいので・・・


jQueryでローディング処理 -load()編-

なんとなく。





onloadイベントとjQueryのreadyメソッドの違い

| コメント(0) | トラックバック(0)
表題にある通り、onloadイベントとjQueryのreadyメソッドの違いについて忘れないようにリンクを書いておきます。





jQuery始めました。11(テーブル操作 順序の入れ替え)

| コメント(0) | トラックバック(0)
テーブル操作 順序の入れ替えを行います。
function update_row_index() {
    $("#test-list li").each(function (i) {
        var data_input = $('input[name="data"]', this);
        var vals = data_input.val().split(":");
        data_input.val((i + 1) + ":" + vals[1]);
    });
}

$(document).ready(function() {
	$("#test-list .up-control").click(function (e) {
        e.preventDefault();
        var row = $(this).parent();
        if (row.not(":first")) {
            row.insertBefore(row.prev());
            update_row_index();
        }
    });
	$("#test-list .down-control").click(function (e) {
        e.preventDefault();
        var row = $(this).parent();
        if (row.not(":last")) {
            row.insertAfter(row.next());
            update_row_index();
        }
    });
});



<ul id="test-list">
  <li class="test-row">
    <input type="hidden" name="data" value="1:id1" />
    <span class="title">データ1</span>
    <a href="#" class="control up-control">上へ</a>
    <a href="#" class="control down-control">下へ</a>
  </li>
  <li class="test-row">
    <input type="hidden" name="data" value="2:id2" />
    <span class="title">データ2</span>
    <a href="#" class="control up-control">上へ</a>
    <a href="#" class="control down-control">下へ</a>
  </li>
  <li class="test-row">
    <input type="hidden" name="data" value="3:id3" />
    <span class="title">データ3</span>
    <a href="#" class="control up-control">上へ</a>
    <a href="#" class="control down-control">下へ</a>
  </li>
</ul>







サンプル
引用元: jQueryでリスト・テーブル操作 - 行の上下移動

jQuery始めました。9(ラジオボタンで表示項目の変更)

| コメント(0) | トラックバック(0)
ラジオボタンで表示項目の変更



コード:



	function entryChange1(){
		radio = document.getElementsByName('entryPlan') 
		if(radio[0].checked) {
			//フォーム
			document.getElementById('firstBox').style.display = "";
			document.getElementById('secondBox').style.display = "none";
			//特典
			document.getElementById('firstNotice').style.display = "";
		}else if(radio[1].checked) {
			//フォーム
			document.getElementById('firstBox').style.display = "none";
			document.getElementById('secondBox').style.display = "";
			//特典
			document.getElementById('firstNotice').style.display = "none";
		}
	}
	
	//オンロードさせ、リロード時に選択を保持
	window.onload = entryChange1;

HTML:

<form>
<table border="0" cellspacing="0" cellpadding="0">
	<tbody><tr>
		<th>利用方法</th>
		<td>
			<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />初めて申し込む</label>
			<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />2度目以降の利用</label>
		</td>
	</tr>

	<!-- 表示非表示切り替え -->
	<tr id="firstBox">
		<th>紹介者</th>
		<td><input type="text" />
		<p>紹介された方のお名前を入力してください。</p></td>
	</tr>
	
	<!-- 表示非表示切り替え -->
	<tr id="secondBox">
		<th>会員番号</th>
		<td><input type="text" />
		<p>会員番号を入力してください。</p></td>
	</tr>
</tbody></table>
</form>


<!-- 表示非表示切り替え -->
<div id="firstNotice">
	特典:初めての方は30%オフ!
</div>



サンプルは、こちら。

引用元: JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト



jQuery始めました。8(チェックボックスと入力項目を連動させる)

| コメント(0) | トラックバック(0)
checkボックスのチェックをはずすして表示項目を減らす。
チェックボックスと入力項目を連動させる



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="/jquery/jquery.js"></script>

<title>jQueryテスト7</title>


</head>
<body>


<script type="text/javascript"><!--

$(document).ready(function(){
	$(':checkbox').click(function(){
	    var idname = this.value;
	    $("#hoge01").each(function(){
	    	$(this).toggle();
		});
	});
});


//-->
</script>


<input type="checkbox" value="hoge" checked="checked" />
チェックをはずすと「あああ」を非表示にする。
<div id ="hoge01">あああ</div>
<div id ="hoge02">いいい</div>
<div id ="hoge03">ううう</div>



</body>
</html>





サンプルは、こちら。

引用元: チェックボックスで複数項目の表示/非表示切り換え

jQuery始めました。7(ロールオーバすると注意事項を表示する)

| コメント(0) | トラックバック(0)
ファイルアップロードの際に、ロールオーバすると注意事項を表示する。

<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="/jquery/jquery.js"></script>

<title>jQueryテスト7</title>


</head>
<body>


<script type="text/javascript"><!--

$(function(){
	$(":file").mouseover(function(){
		$(this).after("<p>アップロードできるファイルは300kbまでです</p>")
	}).mouseout(function(){
		$("p").remove()
	})
})


//-->
</script>


写真:<input type="file">



</body>
</html>

サンプルは、こちら。


引用元: ファイル選択フォームを選択する

jQuery始めました。6(チェックボックスをすべて選択する)

| コメント(0) | トラックバック(0)
チェックボックスをすべて選択する。



<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="/jquery/jquery.js"></script>

<title>jQueryテスト6</title>


</head>
<body>


<script type="text/javascript"><!--

$(function(){
    $("button").click(function(){
        $(":checkbox").attr("checked","checked")
    })
}) 

//-->
</script>


スキル:

<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />

<label for="xhtml">XHTML</label>

<input type="checkbox" name="css" value="CSS" id="css" />

<label for="css">CSS</label>

<input type="checkbox" name="javascript" value="JavaScript" id="javascript" />

<label for="javascript">JavaScript</label>

<input type="checkbox" name="php" value="PHP" id="php" />

<label for="php">PHP</label>

<p><button>すべてにチェックを付ける</button></p>


</body>
</html>


サンプルは、こちら。


引用元: jQueryによるフォームのデザインの基礎(後編)

jQuery始めました。5(クリックした際の値を取得するの2)

| コメント(0) | トラックバック(0)
クリックした際の値を取得するの2です。






<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="/jquery/jquery.js"></script>

<title>jQueryテスト4</title>

<style type="text/css">
div{
  width:50px;
  height:50px;
}

#redbox{
  background-color:#800000;
}

#bluebox{
  background-color:#ffa500;
}

</style>
</head>
<body>


<script type="text/javascript"><!--

$(function() {
  $("#redBtn").click(function() {
    var prop = {
      "background-color":"#ff0000",
      "color":"#ffffff",
      "border":"2px solid #800000"
    }

    $("p").css(prop);
  });

  $("#blueBtn").click(function() {
    var prop = {
      backgroundColor:"#0000ff",
      color:"#ffffff",
      border:"2px solid #000080"
    }

    $("p").css(prop);
  });
});

//-->
</script>


<button id="redBtn">RED</button>
<button id="blueBtn">BLUE</button>

<p>
紅葉の季節になりました。
</p>

<p>
週末はきっと多くの人が紅葉狩りに出かけることでしょう。
</p>


</body>
</html>






サンプルは、こちら。

引用元: プロパティの値を取得

jQuery始めました。4(ボタンをクリックしてCSSの設定を変更する)

| コメント(0) | トラックバック(0)
ボタンをクリックしてCSSの設定を変更するです。



    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="/jquery/jquery.js"></script>

<title>jQueryテスト4</title>

<style type="text/css">
div{
  width:50px;
  height:50px;
}

#redbox{
  background-color:#800000;
}

#bluebox{
  background-color:#ffa500;
}

</style>
</head>
<body>


<script type="text/javascript"><!--

$(function() {
  $("#solidBtn").click(function() {
    $("p").css("border", "3px solid #ff0000"); 
  });

  $("#dottedBtn").click(function() {
    $("p").css("border", "3px dotted #ff0000"); 
  });

});

//-->
</script>


<button id="solidBtn">solid</button>
<button id="dottedBtn">dotted</button>

<p>
紅葉の季節になりました。
</p>

<p>
週末はきっと多くの人が紅葉狩りに出かけることでしょう。
</p>


</body>
</html>






サンプルは、こちら。

jQuery始めました。3(クリックした際に値を取得するの2)

| コメント(0) | トラックバック(0)
クリックした際に値を取得するの2です。


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="/jquery/jquery.js"></script>

<title>jQueryテスト3</title>

<style type="text/css">
div{
  width:50px;
  height:50px;
}

#redbox{
  background-color:#800000;
}

#bluebox{
  background-color:#ffa500;
}

</style>
</head>
<body>


<script type="text/javascript"><!--

$(function() {
  $("div").click(function() {
    var bgcolor = $(this).css("background-color"); 
    alert(bgcolor);
  });
});

//-->
</script>


<div id="redbox" style="background-color:#ff0000;">
</div>

<div id="bluebox" style="background-color:#0000ff;">
</div>

</body>
</html>





サンプルは、こちら。



jQuery始めました。2(クリックした際の値を取得する)

| コメント(0) | トラックバック(0)
クリックした際の値を取得する。





<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="/jquery/jquery.js"></script>

<title>jQueryテスト</title>

<style type="text/css">
div{
  width:50px;
  height:50px;
}
</style>
</head>
<body>


<script type="text/javascript"><!--

$(function() {
  $("div").click(function() {
    var bgcolor = $(this).css("background-color"); 
    alert(bgcolor);
  });
});

//-->
</script>


<div id="redbox" style="background-color:#ff0000;">
</div>

<div id="bluebox" style="background-color:#0000ff;">
</div>

</body>
</html>







サンプルは、こちら。



jQuery始めました。1(halo world)

| コメント(0) | トラックバック(0)

必要に迫られてjQuery始めました。



  • とにかく始めることに
   最初は、やっぱりhalo worldから。
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
script type="text/javascript" src="/jquery/jquery.js"></script>


<title>jquery test1</title>
</head>
<body>
 
</div>
<script type="text/javascript"><!--
$(function() {
  $("#hoge").html("<p>halo worldp>");

});

//-->
</script>
 

<div id="hoge"></div>

</body>






こんな感じで サンプル




LINK

このサーバは、↑で運用してます。

このアーカイブについて

このページには、2012年1月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2011年12月です。

次のアーカイブは2012年2月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

カテゴリ

ウェブページ