PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 17 週日 201701:18

  • 使用變數存選取器，並與物件的屬性值連動，更改此變數時，物件屬性值跟著改變


<!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>
<style type="text/css">
span{
color:#a00;
}
</style>
</head>
<body>
<a href="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=A"><img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=A"></a>
<a href="https://api.fnkr.net/testimg/100x100/0a0/FFF/?text=B"><img src="https://api.fnkr.net/testimg/100x100/0a0/FFF/?text=B"></a>
<a href="https://api.fnkr.net/testimg/100x100/00a/FFF/?text=C"><img src="https://api.fnkr.net/testimg/100x100/00a/FFF/?text=C"></a>
<h2>cache[<span id="srcforindex"></span>].$img.attr('src')的值是<span id="src"></span></h2>
<script type="text/javascript">
var cache={};
$(document).on('click','a',function(e){
var $img;
var src = this.href;
e.preventDefault();
$img=$('<img/>');
cache[src]={
$img:$img,
isLoading:false
};
/*不用透過cache這個物件去定義，也可以影響到裡面的值*/
$img.attr({
'src':src
});
$('#srcforindex').text(src);
$('#src').text(cache[src].$img.attr('src'));
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(49)

  • 個人分類：jQuery
▲top
  • 9月 16 週六 201721:33

  • 自己做一個燈箱函式，輸入一個物件含有內容、寬高屬性，即可產生


<!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>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style:none;
}
body{
height: 100vh;
position: relative;
padding: 20px;
box-sizing: border-box;
}
.newBox{
position: fixed;
border: 1px solid #aaa;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<button id="btn">按我</button>
<div id="lightbox">
<img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=LightBox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, pariatur! Alias aspernatur, animi adipisci amet similique ipsam, incidunt laborum totam!</p>
</div>
<script type="text/javascript"> //定義
var myFunction=(function(){
//加錢字號避免撞名
var $window = $(window);
var $newBox=$('<div class="newBox"></div>');
var $newContent=$('<div class="newBoxContent"></div>');
var $newClose=$('<button class="newBoxClose">關掉</button>');
$newBox.append($newContent,$newClose);//一次加兩個孩子
$newClose.on('click',function(){
myFunction.close();
});
return{
center:function(){
//從兩數中選比較高者（避免負數） //含外距
var dtop = Math.max($window.height()-$newBox.outerHeight(),0)/2;
var dleft = Math.max($window.width()-$newBox.outerWidth(),0)/2;
$newBox.css({
top:dtop+$window.scrollTop(),
left:dleft+$window.scrollLeft()
});
},
open:function(data){
//刪掉所有兒子 //加上執行時輸入的物件的content屬性
$newContent.empty().append(data.content);
$newBox.css({
width:data.width || 'auto', //執行時沒輸入就代入auto
height:data.height || 'auto'
}).appendTo('body'); //當body的最後一個新兒子
myFunction.center(); //若resize事件發生，就執行剛剛定義好的center方法
$window.on('resize',myFunction.center);
},
close:function(){
$newContent.empty();
$newBox.detach();
$window.off('resize',myFunction.center);//監聽器關掉
}
}
}());
</script>
<script type="text/javascript"> //執行
(function(){
var $newContent=$('#lightbox').detach();
$('#btn').on('click',function(){
myFunction.open({
content:$newContent,
width:340,
height:300
})
});
}());
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(87)

  • 個人分類：jQuery
▲top
  • 9月 16 週六 201701:01

  • jQuery製作頁籤，在href放入id選擇器，this.hash取出href值


<!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>
<style type="text/css">
.tab-list li{
display: inline-block;
}
.tab-list li a{
display: block;
padding: 3px 10px;
}
.tab-panel{
display: none;
}
.tab-panel.active{
display: block;
}
</style>
</head>
<body>
<section class="page">
<div class="tabs">
<ul class="tab-list">
<li class="active">
<a href="#tab-1" class="tab-control">
<h3>第一籤</h3>
</a>
</li>
<li>
<a href="#tab-2" class="tab-control">
<h3>第二籤</h3>
</a>
</li>
<li>
<a href="#tab-3" class="tab-control">
<h3>第三籤</h3>
</a>
</li>
</ul>
<div class="tab-panel active" id="tab-1">
<p>第一籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni porro provident aliquam modi nemo officiis, qui obcaecati autem numquam nihil.</p>
</div>
<div class="tab-panel" id="tab-2">
<p>第二籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sunt laudantium tenetur distinctio dolorum illum necessitatibus iure voluptas ipsam error.</p>
</div>
<div class="tab-panel" id="tab-3">
<p>第三籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores consequatur facilis beatae ex dolore et velit omnis repellat quidem sunt!</p>
</div>
</div>
</section>
<script type="text/javascript">
/*類似迴圈效果*/
$('.tab-list').each(function(){
var tab = $(this).find('li.active');
var link = tab.find('a');
var panel = $(link.attr('href'));
/*#tab-1（又是href的屬性值，又是jQ的id選取方法）*/
$(this).on('click','.tab-control',function(e){
e.preventDefault();
var link2=$(this);
var id = this.hash;/*#tab-1、#tab-2...*/
/*id一定存在，所以是true*/
/*不是正在顯示的，被按下去的a，沒有active這個class，所以!false就是true*/
if(id && !link2.is('.active')){
panel.removeClass('active');/*div#tab-1拿掉*/
tab.removeClass('active');/*li拿掉*/
panel=$(id).addClass('active');/*被按下去的那一個div#tab-?*/
tab=link2.parent().addClass('active');/*被按下去的那一個a的爸爸li*/
}
})
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(905)

  • 個人分類：jQuery
▲top
  • 9月 16 週六 201700:22

  • jQuery摺疊面板，運用on、next、slideToggle


<!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>
<style type="text/css">
.accordion-panel {
display: none;
}
</style>
</head>
<body>
<section class="page">
<ul class="accordion">
<li>
<button class="accordion-control">第一摺</button>
<div class="accordion-panel">
<p>第一摺內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laudantium, molestiae, tempora eligendi qui saepe est voluptatum doloremque! Blanditiis, perferendis.</p>
</div>
</li>
<li>
<button class="accordion-control">第二摺</button>
<div class="accordion-panel">
<p>第二摺內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat voluptates maxime est, quisquam dolorem fugit laboriosam vel ullam cupiditate dolor.</p>
</div>
</li>
<li>
<button class="accordion-control">第三摺</button>
<div class="accordion-panel">
<p>第三摺內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque numquam, nostrum consectetur deleniti? Nemo totam saepe sed, repellendus, velit corporis?</p>
</div>
</li>
</ul>
</section>
<script type="text/javascript">
//事件，選擇器（總是能觸發）
$('.accordion').on('click','.accordion-control',function(e){
e.preventDefault();
/*被點到的東西他弟，沒有animated的全部（進行中不會受影響），展開或隱藏*/
$(this).next('.accordion-panel').not(':animated').slideToggle();
})
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(716)

  • 個人分類：jQuery
▲top
  • 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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(197)

  • 個人分類：jQuery
▲top
  • 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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(885)

  • 個人分類：jQuery
▲top
  • 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>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(1,261)

  • 個人分類：jQuery
▲top
  • 9月 14 週四 201717:31

  • 使用jQuery的$.ajax方法，實作載入中、載入成功、載入失敗等狀況


<!-- 檔案：0914-6a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
<ul>
<li><a href="0914-6a.html">第1頁</a></li>
<li><a href="0914-6b.html">第2頁</a></li>
<li><a href="0914-6c.html">第3頁</a></li>
</ul>
<div id="content">
<div id="container">
<img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=A">
</div>
</div>
<script type="text/javascript" src="0914-6.js"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(871)

  • 個人分類：jQuery
▲top
  • 9月 14 週四 201717:17

  • 使用jQuery的$.getJSON方法，配合done()、each()、fail()、always()因應各種資料載入狀況


<!-- 檔案：0914-5.html -->
<!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>
<style type="text/css">
a{
cursor: pointer;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="reloadbox"></div>
<script type="text/javascript">
function getData(){
var content='';
$.getJSON('data/0914-5.json').done(function(data){
$.each(data,function(index,value){
content+='<h2>'+index+'：'+value+'</h2>'
});
$('#content').html(content).hide().fadeIn();
}).fail(function(){
$('#content').text('沒有資料');
}).always(function(){
$('#reloadbox').html('<a id="reload">重新整理</a>');
$('#reload').on('click',function(e){
e.preventDefault();
getData();
});
});
}
getData();
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(385)

  • 個人分類：jQuery
▲top
  • 9月 14 週四 201716:49

  • 使用jQuery的$.post實作與php的Ajax，運用form的serialize()方法


<!-- 檔案：0914-4.html -->
<!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>
</head>
<body>
<form id="form">
會員帳號<input type="text" name="mem"><br>
會員密碼<input type="password" name="psw"><br>
email<input type="email" name="email">
<input type="submit" value="送出">
</form>
<div id="result"></div>
<script type="text/javascript">
$('#form').submit(function(e){
e.preventDefault();
$.post('0914-4.php',$('#form').serialize(),function(rs){
$('#form').hide();
$('#result').html(rs);
})
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(432)

  • 個人分類：jQuery
▲top
123»

文章搜尋

文章搜尋

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

文章精選

文章精選

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (1,029)google map api設定道路顏色、標示顏色、icon
  • (871)使用jQuery的$.ajax方法，實作載入中、載入成功、載入失敗等狀況
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (1,029)google map api設定道路顏色、標示顏色、icon
  • (871)使用jQuery的$.ajax方法，實作載入中、載入成功、載入失敗等狀況
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

      • 本日人氣：
      • 累積人氣：

      參觀人氣

      • 本日人氣：
      • 累積人氣：