「JavaScript」カテゴリーアーカイブ
datepicker.js 年月のみ選択
アニメーション
IE8以下のレイアウトずれなおる
jQuery UI Datepicker 日付選択
セレクトを選択し内容を変更
http://www.tagindex.com/javascript/form/comp2b.html
bootstrap.ctp
[php]
<!–bootstrap.ctp–>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
[/php]
View
[php]
<?php echo $this->BootstrapForm->input(‘lecture_id’,array(‘options’=>$lecture_id)); ?>
<div id="ajaxsnum"></div>
<?php
$this -> Html -> script( ‘jquery-1.7.2.min’, array( ‘inline’ => false ) );
?>
<?php
$this->Html->scriptStart(array(‘inline’=>false));
?>
$(function(){
$("#UserLectureId").change(function() {
$.post(
"<?php echo $this->html->url(‘/Users/ajaxsnum’) ?>",
{lecture_id : $(‘#UserLectureId option:selected’).val()}, //valを取る textも取れるよ
function(data){
$("#ajaxsnum").html(data);
}
);
});
});
<?php
$this->Html->scriptEnd();
?>
[/php]
View(ajaxsnum.ctp)
[php]
<?php
echo $this->BootstrapForm->input(‘Number’, array(‘label’ => ‘numbers’,’multiple’ => ‘checkbox’));
?>
<div>
<?php echo $this->BootstrapForm->submit(__(‘Submit’));?> //Submitをこっちにしたら保存出来たよ
</div>
[/php]
Controler
[php]
public $helpers = array(‘TwitterBootstrap.BootstrapHtml’, ‘TwitterBootstrap.BootstrapForm’, ‘TwitterBootstrap.BootstrapPaginator’,’Js’,’Html’);
//——————————————————————————–
// ajaxソースコード
//——————————————————————————–
public function ajaxsnum(){
$this->layout = ‘ajax’;
//debug($this->request);
$numbers = $this->User->Number->find(‘list’, array(
//’conditions’=>array(‘lecture_id’ => $this->request->data[‘lecture_id’]),
));
$this->set(compact(‘numbers’));
}
[/php]
edit.ctp
[php]
$data = $this->User->findById($id);
$numbers = $this->User->Number->find(‘list’, array(
‘conditions’=>array(‘Number.lecture_id =’ =>$data[‘User’][‘lecture_id’]),
));
$this->set(compact(‘numbers’));
[/php]
セレクトボックスの値が変更される度に、アイテムのテキストを表示
http://semooh.jp/jquery/api/events/change/fn/
[text]
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div class="test"></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$(".test").text(str);
}).change();
</script>[/text]
配列 : グループ化されたデータのこと
[text] <script>
// 配列 – グループ化されたデータ
var sales0 = 100;
var sales1 = 200;
var sales2 = 150;
var sales = [100, 200, 150];
sales[1] = 180;
console.log(sales[1]); // 添字
</script>[/text]
ローカル変数 : ローカル変数が外部からアクセスはできない
[text] <script>
// 関数
// ローカル変数
function getPrice(x) {
var rate = 0.82; // ローカル変数
return (x * rate);
}
console.log(getPrice(83));
console.log(rate);
</script>[/text]
関数の基本的な書き方。
[text]<script>
// 関数（複数の処理をまとめられる）
// aとbは「引数」
function sum(a, b) {
return (a + b);
}
var result = sum(50, 33);
alert(result);
</script>[/text]
for文の書き方。
[text]<script>
// ループ（for）
for (var i = 0; i < 10; i++) {
console.log(i);
}
</script>[/text]
while文の書き方。
[text]
<script>
// ループ（while）
var i = 0;
while (i < 10) {
console.log(i);
i++; // i = i + 1;
}
</script>
[/text]
switch文の書き方。
[text]
<script>
// 条件分岐（switch）
var direction = "right";
var x, y;
switch (direction) {
case "right":
x = x + 10;
break;
case "left":
x = x – 10;
break;
case "up":
y = y – 10;
break;
case "down":
y += 10; // y = y + 10
break;
default:
// 例外処理
break;
}
</script>[/text]
if… else if… else…文の書き方
[text]<script>
// 条件分岐（if）
var score = 20;
if (score >= 70) {
alert("合格！");
} else if (score >= 30) {
alert("不合格！");
} else {
alert("不合格だしお話になりません！");
}
</script>[/text]
条件分岐（if）
[text]<script>
// 条件分岐（if）
var score = 60;
// 比較演算子
// >= <= < >
// == !=
if (score >= 70) {
alert("合格！");
}
</script>[/text]
チェックボックス
チェックボックス制御2つ以上併記したい
http://oshiete.goo.ne.jp/qa/6906994.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html lang=”ja”>
<head><title>sample</title>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<script type=”text/javascript”>
<!–
function hoge(evt){
//それぞれのグループのチェック許容数最大値
var limit ={ “group1”:1, “group2”:2, “group3″:3 };
var t = evt.target || evt.srcElement;
var cnt=0, p = t.parentNode;
var elm, e, i, max;
if(t.nodeName!=”INPUT” || t.type!=”checkbox” ||
!t.checked || !(max=limit[p.id])) return;
elm = p.getElementsByTagName(“input”);
for(i=0; e=elm[i++];)
if(e.type==”checkbox” && e.checked) cnt++;
if(cnt>max){
t.checked = false;
alert(“チェックは” + max + “個まで”);
}
}
//–>
</script>
</head>
<body>
<form action=”#” onClick=”hoge(event)”>
<fieldset id=”group1″>
<legend>group1</legend>
<input type=”checkbox” value=”0″ name=”a_1″ checked>a_1
<input type=”checkbox” value=”1″ name=”a_2″>a_2
<input type=”checkbox” value=”2″ name=”a_3″>a_3
<input type=”checkbox” value=”3″ name=”a_4″>a_4
</fieldset>
<fieldset id=”group2″>
<legend>group2</legend>
<input type=”checkbox” value=”0″ name=”b_1″ checked>b_1
<input type=”checkbox” value=”1″ name=”b_2″>b_2
<input type=”checkbox” value=”2″ name=”b_3″>b_3
<input type=”checkbox” value=”3″ name=”b_4″>b_4
</fieldset>
<fieldset id=”group3″>
<legend>group3</legend>
<input type=”checkbox” value=”0″ name=”c_1″ checked>c_1
<input type=”checkbox” value=”1″ name=”c_2″>c_2
<input type=”checkbox” value=”2″ name=”c_3″>c_3
<input type=”checkbox” value=”3″ name=”c_4″>c_4
</fieldset>
</form>
</body>
</html>
＜その2＞
<html>
<head>
<script language=”javascript” type=”text/javascript”>
function autochk(p,name){
var f = p.form;
var el;
for(var prop in f){
if(prop.toString().substr(0,2)==name){//名前がname(‘ko’)で始まるもの
el=f.elements[prop];
if(el.type==”checkbox”){//このチェックは省略してもいいかも
el.disabled = !p.checked;
}
}
}
}
</script>
</head>
<body>
<form id=”query” name=”query”>
<input type=”checkbox” name=”oya” value=”1″ checked checked onclick=”autochk(this,’ko’);”>親
<input type=”checkbox” name=”ko1″ id=”ko1″ value=”1″ checked>子1
<input type=”checkbox” name=”ko2″ id=”ko2″ value=”1″ checked>子2
<input type=”checkbox” name=”ko3″ id=”ko3″ value=”1″ checked>子3
<input type=”checkbox” name=”ko4″ id=”ko4″ value=”1″ checked>子4
<input type=”text” name=”other” value=”その他”>
</form>
</body>
</html>
＜その2＞
<html>
<head>
<script language=”javascript” type=”text/javascript”>
function autochk(f){
for(var i=0;i<f.form.length;i++){
if (f.form.elements[i].className==”ko”){f.form.elements[i].disabled = !f.checked;}
}
}
</script>
</head>
<body>
<form>
<input type=”checkbox” name=”oya” value=”1″ checked onclick=”autochk(this);”>親
<input type=”checkbox” name=”ko1″ value=”1″ checked>子1
<input type=”checkbox” name=”ko2″ value=”1″ checked>子2
<input type=”checkbox” name=”ko3″ value=”1″ checked>子3
<input type=”checkbox” name=”ko4″ value=”1″ checked>子4
<input type=”checkbox” name=”other” value=”1″ checked>他
</form>
</body>
</html>