PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

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

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

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 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) 人氣(0)

  • 個人分類：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月 15 週五 201712:13

  • google map api設定道路顏色、標示顏色、icon


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
//位置
var pinLocation = new google.maps.LatLng(23.563397,120.472856);
//設定
var ROADMAP ={
center: pinLocation,
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:15,
panControl:false, //不可水平移動
zoomControl:true, //有縮放鈕
zoomControlOptions:{
style:google.maps.ZoomControlStyle.SMALL,//小按鈕 可選LARGE
position:google.maps.ControlPosition.TOP_RIGHT //放右上方
},
mapTypeControl:true, //可以切換街道和衛星
mapTypeControlOptions:{
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU ,//下拉式選單
//可選：HORIZONTAL_BAR和DEFAULT
position:google.maps.ControlPosition.TOP_LEFT //放左上方
},
scaleControl:true,//顯示地圖刻度
scaleControlOptions:{
position:google.maps.ControlPosition.TOP_CENTER //上方中間
},
streetViewControl:false, //不可拖拉小橘人到地圖
overviewMapControl:false, //不顯示較大區域的縮圖
styles:[
{
stylers:[
{hue:'#00ff6f'}, //色相
{saturation:-50} //飽和度
]
},{
featureType:'road',//我要設定道路
elementType:'geometry',//幾何/線條的部分
stylers:[
{lightness:100},
{visibility:'simplified'} //道路細節精簡
]
},{
featureType:'transit',//我要設定大眾運輸
elementType:'geometry',//幾何/線條的部分
stylers:[
{hue:'#ff6600'},
{saturation:+80}
]
},{
featureType:'transit',//我要設定大眾運輸
elementType:'labels',//標示的部分
stylers:[
{hue:'#ff0066'},
{saturation:+80}
]
},{
featureType:'poi',//搜尋點
elementType:'labels',//標示的部分
stylers:[
{visibility: "off"}
]
},{
featureType:'poi.park',//搜尋點
elementType:'labels',//標示的部分
stylers:[
{visibility: "on"}
]
},{
featureType:'water',//搜尋點
elementType:'geometry',//幾何/線條的部分
stylers:[
{hue: "#c4f4f4"}
]
},{
featureType:'road',//道路
elementType:'labels',//標示的部分
stylers:[
{visibility: "off"}
]
}
]
};
//定位在畫面的哪裡，設定參考
var venueMap = new google.maps.Map(document.getElementById('map'),ROADMAP);
//定位點的標示
var startPosition= new google.maps.Marker({
position:pinLocation,
map:venueMap,
icon:'https://cdn3.iconfinder.com/data/icons/food-set-3/91/Food_C223-128.png'
});
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 15 週五 201712:13

  • google map api設定道路顏色、標示顏色、icon


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
//位置
var pinLocation = new google.maps.LatLng(23.563397,120.472856);
//設定
var ROADMAP ={
center: pinLocation,
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:15,
panControl:false, //不可水平移動
zoomControl:true, //有縮放鈕
zoomControlOptions:{
style:google.maps.ZoomControlStyle.SMALL,//小按鈕 可選LARGE
position:google.maps.ControlPosition.TOP_RIGHT //放右上方
},
mapTypeControl:true, //可以切換街道和衛星
mapTypeControlOptions:{
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU ,//下拉式選單
//可選：HORIZONTAL_BAR和DEFAULT
position:google.maps.ControlPosition.TOP_LEFT //放左上方
},
scaleControl:true,//顯示地圖刻度
scaleControlOptions:{
position:google.maps.ControlPosition.TOP_CENTER //上方中間
},
streetViewControl:false, //不可拖拉小橘人到地圖
overviewMapControl:false, //不顯示較大區域的縮圖
styles:[
{
stylers:[
{hue:'#00ff6f'}, //色相
{saturation:-50} //飽和度
]
},{
featureType:'road',//我要設定道路
elementType:'geometry',//幾何/線條的部分
stylers:[
{lightness:100},
{visibility:'simplified'} //道路細節精簡
]
},{
featureType:'transit',//我要設定大眾運輸
elementType:'geometry',//幾何/線條的部分
stylers:[
{hue:'#ff6600'},
{saturation:+80}
]
},{
featureType:'transit',//我要設定大眾運輸
elementType:'labels',//標示的部分
stylers:[
{hue:'#ff0066'},
{saturation:+80}
]
},{
featureType:'poi',//搜尋點
elementType:'labels',//標示的部分
stylers:[
{visibility: "off"}
]
},{
featureType:'poi.park',//搜尋點
elementType:'labels',//標示的部分
stylers:[
{visibility: "on"}
]
},{
featureType:'water',//搜尋點
elementType:'geometry',//幾何/線條的部分
stylers:[
{hue: "#c4f4f4"}
]
},{
featureType:'road',//道路
elementType:'labels',//標示的部分
stylers:[
{visibility: "off"}
]
}
]
};
//定位在畫面的哪裡，設定參考
var venueMap = new google.maps.Map(document.getElementById('map'),ROADMAP);
//定位點的標示
var startPosition= new google.maps.Marker({
position:pinLocation,
map:venueMap,
icon:'https://cdn3.iconfinder.com/data/icons/food-set-3/91/Food_C223-128.png'
});
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201723:52

  • google map api針對縮放、衛星、地圖刻度、小橘人、較大地區縮圖的設定（物件的值）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
var ROADMAP = new google.maps.Map(document.getElementById('map'),{
center: new google.maps.LatLng(23.563397,120.472856),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:13,
panControl:false, //不可水平移動
zoomControl:true, //有縮放鈕
zoomControlOptions:{
style:google.maps.ZoomControlStyle.SMALL,//小按鈕 可選LARGE
position:google.maps.ControlPosition.TOP_RIGHT //放右上方
},
mapTypeControl:true, //可以切換街道和衛星
mapTypeControlOptions:{
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU ,//下拉式選單
//可選：HORIZONTAL_BAR和DEFAULT
position:google.maps.ControlPosition.TOP_LEFT //放左上方
},
scaleControl:true,//顯示地圖刻度
scaleControlOptions:{
position:google.maps.ControlPosition.TOP_CENTER //上方中間
},
streetViewControl:false, //不可拖拉小橘人到地圖
overviewMapControl:false, //不顯示較大區域的縮圖
})
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201723:52

  • google map api針對縮放、衛星、地圖刻度、小橘人、較大地區縮圖的設定（物件的值）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
var ROADMAP = new google.maps.Map(document.getElementById('map'),{
center: new google.maps.LatLng(23.563397,120.472856),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:13,
panControl:false, //不可水平移動
zoomControl:true, //有縮放鈕
zoomControlOptions:{
style:google.maps.ZoomControlStyle.SMALL,//小按鈕 可選LARGE
position:google.maps.ControlPosition.TOP_RIGHT //放右上方
},
mapTypeControl:true, //可以切換街道和衛星
mapTypeControlOptions:{
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU ,//下拉式選單
//可選：HORIZONTAL_BAR和DEFAULT
position:google.maps.ControlPosition.TOP_LEFT //放左上方
},
scaleControl:true,//顯示地圖刻度
scaleControlOptions:{
position:google.maps.ControlPosition.TOP_CENTER //上方中間
},
streetViewControl:false, //不可拖拉小橘人到地圖
overviewMapControl:false, //不顯示較大區域的縮圖
})
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201723:36

  • 使用google.maps物件的MAP方法，傳入含有定位點、地圖類型、縮放尺寸等資訊的物件


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
var ROADMAP = new google.maps.Map(document.getElementById('map'),{
center: new google.maps.LatLng(23.563397,120.472856), //double latitude, double longitude
mapTypeId:google.maps.MapTypeId.ROADMAP,
// satellite：衛星 hybrid：混合
zoom:13
})
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201723:36

  • 使用google.maps物件的MAP方法，傳入含有定位點、地圖類型、縮放尺寸等資訊的物件


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
var ROADMAP = new google.maps.Map(document.getElementById('map'),{
center: new google.maps.LatLng(23.563397,120.472856), //double latitude, double longitude
mapTypeId:google.maps.MapTypeId.ROADMAP,
// satellite：衛星 hybrid：混合
zoom:13
})
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201723:11

  • Angular的ng-repeat與$http、get、success、error


<!-- 檔案：0914-16.html -->
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style type="text/css">
li{
list-style: none;
}
.meal{
display: inline-block;
border: 1px solid #aaa;
width: 200px;
}
</style>
</head>
<body>
<div ng-controller='getMeal'>
<div ng-repeat='meal in meals' class="meal">
<ul>
<li>主餐：{{meal.main}}</li>
<li>飲料：{{meal.beverage}}</li>
<li>價格：{{meal.price}}</li>
<li><img src="{{meal.pic}}"></li>
</ul>
</div>
</div>
<script type="text/javascript">
function getMeal($scope,$http){
$http.get('data/0914.json').success(function(data){
$scope.meals=data.meals;
}).error(function(data){
alert('沒資料');
});
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Angular.js
▲top
  • 9月 14 週四 201723:11

  • Angular的ng-repeat與$http、get、success、error


<!-- 檔案：0914-16.html -->
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style type="text/css">
li{
list-style: none;
}
.meal{
display: inline-block;
border: 1px solid #aaa;
width: 200px;
}
</style>
</head>
<body>
<div ng-controller='getMeal'>
<div ng-repeat='meal in meals' class="meal">
<ul>
<li>主餐：{{meal.main}}</li>
<li>飲料：{{meal.beverage}}</li>
<li>價格：{{meal.price}}</li>
<li><img src="{{meal.pic}}"></li>
</ul>
</div>
</div>
<script type="text/javascript">
function getMeal($scope,$http){
$http.get('data/0914.json').success(function(data){
$scope.meals=data.meals;
}).error(function(data){
alert('沒資料');
});
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Angular.js
▲top
«1...12131437»

文章搜尋

文章搜尋

文章分類

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寫購物車（小計、總計、數量計算）
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (9)面試會考：寫出5的倍數的乘法表
  • (8)counter-increment與counter-rest，文章分段可用
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (9)面試會考：寫出5的倍數的乘法表
  • (8)counter-increment與counter-rest，文章分段可用
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

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

      參觀人氣

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