jQueryクラシックケース
9511 ワード
例1:マウスで左側のメニューをクリックして、開閉機能を実現する:
htmlおよびcssコード部分:
jsコードは以下の通りです.
例2:全選択、逆選択、キャンセル機能を実現する:
htmlおよびcssコードは以下の通りです.
jsコードは以下の通りです.
例3:ポップアップ編集ダイアログと編集機能を実現する:
htmlおよびcssコードは以下の通りです.
jsコードは以下の通りです.
その他のリンク:http://www.cnblogs.com/wupeiqi/articles/4457274.html
htmlおよびcssコード部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*css */
<style>
/* */
.hide {
display: none;
}
</style>
</head>
<div>
<div onclick="Change(this);"> </div>
<div class="content hide">
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
<div>
<div onclick="Change(this);"> </div>
<div class="content hide">
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
<div>
<div onclick="Change(this);"> </div>
<div class="content hide">
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/tab.js"></script>
<script type="text/javascript">
</script>
</body>
</html>jsコードは以下の通りです.
function Change(arg){
// ：
/* ，
var t=$(arg).text();
$(arg)
*/
/*
：
1 ， hide 【 ：hide class 】
1）$(arg).next()
2）removeClass('hide')
2. ， ， hide
1） $(arg).parent()
2) $(arg).parent('content').siblings('hide') 【 ：content 】
*/
$(arg).next().removeClass('hide');
$(arg).parent().siblings().find('.content').addClass('hide');
}例2:全選択、逆選択、キャンセル機能を実現する:
htmlおよびcssコードは以下の通りです.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*CSS */
<style>
.subBorder {
position: fixed;
left: 50%;
right: 50%;
width: 400px;
height: 200px;
margin: 0 auto;
background: #999999;
}
.hide {
display: none;
}
#dialog form {
text-align: center;
}
</style>
</head>
<input type="button" onclick="CheckAll();" value=" " />
<input type="button" onclick="CheckReverse();" value=" " />
<input type="button" onclick="CheckCancel();" value=" " />
<table border="2">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td>mysql-001</td>
<td>10.10.8.10</td>
<td>15379</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>redis-001</td>
<td>10.10.9.10</td>
<td>16379</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>monitor-001</td>
<td>10.10.10.10</td>
<td>17379</td>
</tr>
</tbody>
</table>
<div id="dialog" class="subBorder hide">
<form action="" method="get">
<p> ：<input type="text" id="hostname"/></p>
<p>ip ：<input type="text" id="ip" /></p>
<p> ：<input type="text" id="port"/></p>
<input type="submit" onclick="return SubmitForm();" value=" "/>
<input type="button" onclick="Cancel();" value=" "/>
</form>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/checked.js"></script>
<script type="text/javascript">
</script>
</body>
</html>jsコードは以下の通りです.
//
function CheckAll(){
//$('#tb1').find(':checkbox').attr('checked','checked');
$('#tb1').find(':checkbox').prop('checked',true);
}
//
function CheckReverse(){
// ， ， ， ，
$('#tb1').find(':checkbox').each(function(){
//$(this)
//$(this).prop() ，true， false
//attr ，checked，checked=checked
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
function CheckCancel(){
//$('#tb1').find(':checkbox').removeAttr('checked'); <==>
$('#tb1').find(':checkbox').prop('checked',false);
}例3:ポップアップ編集ダイアログと編集機能を実現する:
htmlおよびcssコードは以下の通りです.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
/*css */
<style>
.subBorder {
position: fixed;
left: 50%;
right: 50%;
width: 400px;
height: 200px;
margin-left: -200px;
margin-bottom: -100px;
background: #999999;
}
.hide {
display: none;
}
#dialog form {
text-align: center;
}
</style>
</head>
<table border="2">
<thead></thead>
<tbody>
<tr>
<td>mysql-001</td>
<td>10.10.8.10</td>
<td>15379</td>
<td onclick="GetPrev(this);"> </td>
</tr>
<tr>
<td>redis-001</td>
<td>10.10.9.10</td>
<td>16379</td>
<td onclick="GetPrev(this);"> </td>
</tr>
<tr>
<td>monitor-001</td>
<td>10.10.10.10</td>
<td>17379</td>
<td onclick="GetPrev(this);"> </td>
</tr>
</tbody>
</table>
<div id="dialog" class="subBorder hide">
<form action="" method="get">
<p> ：<input type="text" id="hostname"/></p>
<p>ip ：<input type="text" id="ip" /></p>
<p> ：<input type="text" id="port"/></p>
<input type="submit" onclick="return SubmitForm();" value=" "/>
<input type="button" onclick="Cancel();" value=" "/>
</form>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/edit.js"></script>
<script type="text/javascript">
</script>
</body>
</html>jsコードは以下の通りです.
function GetPrev(getvalue){
var list = [];
$.each($(getvalue).prevAll(),function(i){
var item = $(getvalue).prevAll()[i];
var text = $(item).text();
list.push(text);
});
var new_list = list.reverse();
// hostname
$("#hostname").val(new_list[0]);
$("#ip").val(new_list[1]);
$("#port").val(new_list[2]);
$("#dialog").removeClass("hide");
}
function Cancel(){
$("#dialog").addClass("hide");
}
function SubmitForm(){
// input ，
var ret=true;
// input， ， ret false
//$("input[type='text']") <==> $(':text')
$(':text').each(function(){
//$(this)
var value=$(this).val();
if (value.trim().length==0){ // 0. ：<==> if (value.itrm()=="") //trim:
$(this).css('border-color','red'); // （ ： ， ）
ret=false // false
}else{
$(this).css('border-color','green') // ，
}
});
return ret;
}その他のリンク:http://www.cnblogs.com/wupeiqi/articles/4457274.html