MVC：
1.Model：
- 9月 14 週四 201722:05
Angular的控制器，ng-controller、$scope、ng-model
MVC：
1.Model：
- 9月 14 週四 201722:05
Angular的控制器，ng-controller、$scope、ng-model
MVC：
1.Model：
- 9月 14 週四 201721:48
jQuery UI的datepicker、slider方法，實作價格範圍的調動軸，日期選擇的另一種介面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<form id="form">
<p id="price">
<label>
價錢範圍
<input type="text" id="amount">
</label>
</p>
<div id="priceRange"></div>
<p>
<label>
到貨時間
<input type="text" id="arrival">
</label>
</p>
</form>
<script type="text/javascript">
$('#arrival').datepicker();
$('#priceRange').slider({
range:true, //兩個端點
min:0,
max:400,
values:[175,300], //頁面載入時的兩端點值
slide:function(e,number){ //事件發生時，印出數字
$('#amount').val('$'+number.values[0]+' -$'+number.values[1]);
}
});
/*把上面設定好的兩個值放進去*/
$('#amount').val('$'+$('#priceRange').slider('values',0)+' -$'+$('#priceRange').slider('values',1));
</script>
</body>
</html>
- 9月 14 週四 201721:48
jQuery UI的datepicker、slider方法，實作價格範圍的調動軸，日期選擇的另一種介面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<form id="form">
<p id="price">
<label>
價錢範圍
<input type="text" id="amount">
</label>
</p>
<div id="priceRange"></div>
<p>
<label>
到貨時間
<input type="text" id="arrival">
</label>
</p>
</form>
<script type="text/javascript">
$('#arrival').datepicker();
$('#priceRange').slider({
range:true, //兩個端點
min:0,
max:400,
values:[175,300], //頁面載入時的兩端點值
slide:function(e,number){ //事件發生時，印出數字
$('#amount').val('$'+number.values[0]+' -$'+number.values[1]);
}
});
/*把上面設定好的兩個值放進去*/
$('#amount').val('$'+$('#priceRange').slider('values',0)+' -$'+$('#priceRange').slider('values',1));
</script>
</body>
</html>
- 9月 14 週四 201721:30
jQuery UI的頁籤效果，tabs()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="tab">
<ul>
<li><a href="#tab-1">第一籤</a></li>
<li><a href="#tab-2">第二籤</a></li>
<li><a href="#tab-3">第三籤</a></li>
</ul>
<div id="tab-1">
<p>第一籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia explicabo ipsam numquam repellendus aperiam nostrum nam nemo reprehenderit expedita sunt!</p>
</div>
<div id="tab-2">
<p>第二籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia explicabo ipsam numquam repellendus aperiam nostrum nam nemo reprehenderit expedita sunt!</p>
</div>
<div id="tab-3">
<p>第三籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia explicabo ipsam numquam repellendus aperiam nostrum nam nemo reprehenderit expedita sunt!</p>
</div>
</div>
<script type="text/javascript">
$('#tab').tabs();
</script>
</body>
</html>
- 9月 14 週四 201721:30
jQuery UI的頁籤效果，tabs()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="tab">
<ul>
<li><a href="#tab-1">第一籤</a></li>
<li><a href="#tab-2">第二籤</a></li>
<li><a href="#tab-3">第三籤</a></li>
</ul>
<div id="tab-1">
<p>第一籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia explicabo ipsam numquam repellendus aperiam nostrum nam nemo reprehenderit expedita sunt!</p>
</div>
<div id="tab-2">
<p>第二籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia explicabo ipsam numquam repellendus aperiam nostrum nam nemo reprehenderit expedita sunt!</p>
</div>
<div id="tab-3">
<p>第三籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia explicabo ipsam numquam repellendus aperiam nostrum nam nemo reprehenderit expedita sunt!</p>
</div>
</div>
<script type="text/javascript">
$('#tab').tabs();
</script>
</body>
</html>
- 9月 14 週四 201721:25
jQuery UI的accordion，手風琴效果，摺疊面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="accordion">
<h3>第一摺</h3>
<div>
<p>第一摺的內容Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, molestiae sit. Repudiandae eius sapiente in, quas soluta ex voluptatibus impedit.</p>
</div>
<h3>第二摺</h3>
<div>
<p>第二摺的內容Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, molestiae sit. Repudiandae eius sapiente in, quas soluta ex voluptatibus impedit.</p>
</div>
<h3>第三摺</h3>
<div>
<p>第三摺的內容Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, molestiae sit. Repudiandae eius sapiente in, quas soluta ex voluptatibus impedit.</p>
</div>
</div>
<script type="text/javascript">
$('#accordion').accordion();
</script>
</body>
</html>
- 9月 14 週四 201721:25
jQuery UI的accordion，手風琴效果，摺疊面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="accordion">
<h3>第一摺</h3>
<div>
<p>第一摺的內容Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, molestiae sit. Repudiandae eius sapiente in, quas soluta ex voluptatibus impedit.</p>
</div>
<h3>第二摺</h3>
<div>
<p>第二摺的內容Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, molestiae sit. Repudiandae eius sapiente in, quas soluta ex voluptatibus impedit.</p>
</div>
<h3>第三摺</h3>
<div>
<p>第三摺的內容Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, molestiae sit. Repudiandae eius sapiente in, quas soluta ex voluptatibus impedit.</p>
</div>
</div>
<script type="text/javascript">
$('#accordion').accordion();
</script>
</body>
</html>
- 9月 14 週四 201721:13
實作上一頁下一頁，history物件的back、forward方法、length屬性
<!-- 檔案：0914-10a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="0914-10b.html">去b</a>
<button id="back">上一頁</button>
<button id="forward">下一頁</button>
<h2>目前歷史紀錄共<span id="length"></span>筆</h2>
<script src="0914-10.js"></script>
</body>
</html>
- 9月 14 週四 201721:13
實作上一頁下一頁，history物件的back、forward方法、length屬性
<!-- 檔案：0914-10a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="0914-10b.html">去b</a>
<button id="back">上一頁</button>
<button id="forward">下一頁</button>
<h2>目前歷史紀錄共<span id="length"></span>筆</h2>
<script src="0914-10.js"></script>
</body>
</html>
伺服器架設 (1)