jQuery 即時單位轉換- 偵測鍵盤改變 (input輸入cm 轉成mm)
<script>
//jwu 2015/08/25
$(function(){
$("input#label_width").on('keyup blur change', function() {//即時換算- 偵測滑鼠
var num=parseFloat($("#label_width").val(),10);//轉成數字+可小數點(10進位)
//if(Math.floor(num) == num && $.isNumeric(num)){
if( $.isNumeric(num)){
$( "#width1" ).text( num * 10 );//cm換算成mm
}else{
<ul id="menu">
<li class="nav">
<a href="/13/7">
<h2>A</h2>
</a>
</li>
<li class="nav">
<a href="/14/7">
<h2>B</h2>
</a>
</li>
[jQuery] 閉包的運用 -以cookie存取為例
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
//2015/08/05 jwu註釋及視例
//This is not production quality, its just demo code.
var cookieList = function(cookieName) {
//When the cookie is saved the items will be a comma seperated string
//So we will split the cookie by comma to get the original array
var cookie = $.cookie(cookieName);
//Load the items or a new array if null.
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript'>
$(function(){
//2015/07/20 jwu
$("#show_other").hide();//先隱藏，等到選到其他後再打開
$("#provider_id").change(function(){
//if ($(this).val()=='[other]'){
// $("#show_other").show();
//}else{
// $("#show_other").hide();
index.htm
<script type="text/javascript" src="/js/plugins/jQuery/ColorBox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%" });
});
</script>
<input type="text" id="member_id" name="member_id" size="20" disabled="disabled">
<a class='iframe' href="value.html">選擇</a>
index.php
<html> <head> <title>jQuery Test</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function(){ $.ajax({ url: "text.php", type: "POST", data: { id: $("#id").val(), firstName: $("#firstName").val(), lastName: $("#lastName").val(), email: $("#email").val() }, dataType: "JSON", success: function (jsonStr) { var jwu = JSON.parse(JSON.stringify(jsonStr));//解析 if (jwu.json_sys =='1'){ $("#result").text(JSON.stringify(jsonStr)); }else{ alert(jwu.json_txt); } } }) .error(function() { alert("發生錯誤!"); }) //.complete(function() { alert("complete"); }); }); }); </script> </head> <body> <div id="result"></div> <form name="contact" id="contact" method="post"> Id : <input type="text" name="id" id="id"/><br/> firstName : <input type="text" name="firstName" id="firstName"/><br/> lastName : <input type="text" name="lastName" id="lastName"/><br/> email : <input type="text" name="email" id="email"/><br/> <input type="button" value="Get It!" name="submit" id="submit"/> </form> </body> </html>
text.php
<?php
header('Content-type: application/json');
$id =$_POST["id"];
$firstName=$_POST["firstName"];
$lastName =$_POST["lastName"];
$email =$_POST["email"];
if($id<0){
$data=array(
"json_sys"=> '0',//1表示回傳成功0表示作業失敗
"json_txt"=> '發生錯誤，無法存檔'
);
}else{
$data=array(
"json_sys"=> '1',//1表示回傳成功0表示作業失敗
);
}
echo json_encode($data);
?>
雖然iframe在目前網頁設計已經很少使用，
不過還是來看一下自動調整高度的iframe
1. iframe.htm
<iframe frameborder="0" src="source.htm" id="frame_id"></iframe>
2.source.htm(加在＜head＞….＜/head＞之間
<script language="javascript">
function reSize(){
parent.document.all.frame_id.height=document.body.scrollHeight;
}
window.onload=reSize;
Javascript刷新頁面的幾種方法：
history.go(0)
location.reload()
location=location
location.assign(location)
document.execCommand('Refresh')
window.navigate(location)
location.replace(location)
document.URL=location.href
自動刷新頁面的方法:
1.頁面自動刷新：把如下代碼加入<head>區域中
<meta http-equiv="refresh" content="20">
change color of checkbox when checked using jQuery
點選checkbox後讓底框變色 kinomelma
<script src="scripts/jquery.min.js" type="text/javascript"></script>
CSS語法：
<style type="text/css">
<!--
/* checkbox處理底框變色 */
td.highlight {
width: 100px;
判斷checkbox是否勾選完整版範例
2014/08/21
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<form>
<input name="agree" type="checkbox" value="" />已閱讀並同意 <span class="form-note">(勾選才能繼續註冊)
<div class="bn-area">
<input type="button" id="enter" class="bnstyle" value="註冊" />
</div>
</form>
<?
if($_GET['action']=='a'){
echo "ok";
echo $_POST['qq'];
exit;
}
?>
<form id="jwu" action="">
<input type="text" name="telephone" id="telephone" placeholder="請輸入連絡電話" />
<input type="button" name="send" id="send" class="bnstyle" value="查詢" />
</form>
<div class="main"> </div>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery庫 -->
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
//2014/8/9 jwu
//http://kinomelma.pixnet.net/
$("#send").click(function(){
var str_len=12;//輸入文字長度
username=$("input[name$='telephone']").val();
if (username.length<1){return false;}//沒有輸入
if (username.length>str_len){
$("#result").html('文字太長，限制長度: '+str_len);
return false;
}
$("#result").html('查詢中，請等待');
$.post("?action=a",{qq:username},function(result){
$("#result").html(result);
}).fail(function() {
$("#result").html('fail 失敗');//alert( "fail 失敗" );
});
});
/*
$("#send").click(function(){
$("#result").html('查詢中，請等待');
username=$("input[name$='telephone']").val();
$.ajax({url:"?action=a",
data: { telephone : username },
success:function(result){
if (result.substring(0, 2)==''){//判斷前2位
$("#result").html("查無資料："+username);
}else{
$("#result").html(result);
}
}});
});
*/
});
// ]]>
</script>
HTML
<ul id="sortlist">
<li class='ui-state-default' id='listfield_1'>t1 <span class="remove-button"></span></li>
<li class='ui-state-default' id='listfield_2'>t2 <span class="remove-button"></span></li>
<li class='ui-state-default' id='listfield_3'>t3 <span class="remove-button"></span></li>
</ul>
jQuery
<script>
$(function() {
$('.remove-button').on('click',function(){
排序首頁
<script type="text/javascript" src="jquery1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
<ul id="sortlist">
<?php
$conn=mysqli_connect('localhost','root','','test');
$result = mysqli_query($conn,"SELECT * FROM drag order by sorting asc");
while($row = mysqli_fetch_array($result)) {
$id=$row['id'];
$sorting=$row['sorting'];
$name=$row['name'];
echo <<<EOD
功能如下:
1.checkbox全選/取消
2.送出表單時(submit)判斷checkbox是否選取
瀏覽器支援：
完整程式碼
<!doctype html>
<head>
<title>列表</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
