- Oct 25 Fri 2019 10:50
-
網頁測速工具
- Oct 25 Fri 2019 10:33
-
圖片延遲載入套件 Lazyload 2.x
- Apr 11 Wed 2018 18:19
-
jquery 圖表 chart.js
網址:https://www.chartjs.org/
文檔:https://www.chartjs.org/docs/latest/general/interactions/modes.html
中文說明:https://ithelp.ithome.com.tw/articles/10188031
文檔:https://www.chartjs.org/docs/latest/general/interactions/modes.html
中文說明:https://ithelp.ithome.com.tw/articles/10188031
- Apr 11 Wed 2018 18:17
-
jquery跑馬燈套件
载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.kxbdmarquee.js"></script>
CSS 样式
/**
* 父容器需要设置溢出隐藏
* 如果是水平滚动，项目需要设置浮动
*/
#element_id{overflow:hidden;}
#element_id ul li{float:left;}
DOM 结构
<div id="element_id">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
JavaScript 调用方式
$('#element_id').kxbdMarquee();- Mar 21 Wed 2018 17:01
-
Jquery 頁籤
參考自男丁格爾
<script>
$(function(){
$('#recommendWork').each(function(){
var $tabList =$(this).find('.tabs-nav'), //Tab list
$tabAnchors =$tabList.find('a') //Tab (link)
$tabPanels =$(this).find('.tabs-panel') //Panel
//點擊Tab時的處理
//接收作為參數的事件物件
$tabList.on('click','a',function(event){
//取消點擊 Link 時的預設動作
event.preventDefault();
//將點擊的頁次jQuery物件化
var $this = $(this)
//如果是目前的頁次,則不做處理
if($this.hasClass('active')){
return;
}
//去除所有頁次選取狀態
//將被點擊的頁次附加點擊狀態
$tabAnchors.removeClass('active');
$this.addClass('active');
//將所有頁次設定不顯示
//顯示被點擊頁次所對應的面版
$tabPanels.hide();
$($this.attr('href')).show();
});
//設定初始顯示頁次的狀態
$tabAnchors.eq(0).trigger('click');
})
})
//Tabs
</script>
<script>
$(function(){
$('#recommendWork').each(function(){
var $tabList =$(this).find('.tabs-nav'), //Tab list
$tabAnchors =$tabList.find('a') //Tab (link)
$tabPanels =$(this).find('.tabs-panel') //Panel
//點擊Tab時的處理
//接收作為參數的事件物件
$tabList.on('click','a',function(event){
//取消點擊 Link 時的預設動作
event.preventDefault();
//將點擊的頁次jQuery物件化
var $this = $(this)
//如果是目前的頁次,則不做處理
if($this.hasClass('active')){
return;
}
//去除所有頁次選取狀態
//將被點擊的頁次附加點擊狀態
$tabAnchors.removeClass('active');
$this.addClass('active');
//將所有頁次設定不顯示
//顯示被點擊頁次所對應的面版
$tabPanels.hide();
$($this.attr('href')).show();
});
//設定初始顯示頁次的狀態
$tabAnchors.eq(0).trigger('click');
})
})
//Tabs
</script>
- Mar 08 Thu 2018 10:06
-
JQuery 取得視窗寬度
jQuery $(window).resize 視窗被調整過時，運行此函數，再使用$(window).width()取得目前遊覽器視窗寬度。
$(document).ready(function(){
$(window).resize(function() {
var wdth=$(window).width();
$("span").text(wdth);
});
});
$(document).ready(function(){
$(window).resize(function() {
var wdth=$(window).width();
$("span").text(wdth);
});
});
- Jan 26 Fri 2018 16:48
-
css 合併儲存格
橫向合併: <td colspan="要橫跨的列數">
<table border="1" cellpadding="5">
<tr>
<td colspan="2">使用了 colspan 的欄位
</td>
</tr>
<tr>
<td>表格欄位</td>
<td>表格欄位</td>
</tr>
</table>
- Jan 26 Fri 2018 14:27
-
bootstrap3 關閉響應式布局
據官方文件說明如下:
1.移除 此 CSS 文檔中提到的設置瀏覽器窗口（viewport）的標籤：<meta>。
2.通過為 .container 設置一個width 值從而覆蓋框架的默認任 width 設置，例如 width: 970px !important; 。請確保這些設置全部放在默認的 Bootstrap CSS 文件的後面。
注意，如果你把它放到媒體查詢中，也可以略去 !important 。
3.如果使用了導行列，需要移除所有導行列的摺疊和展開形為。
4.對於栅格布局，额外增加 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。 不要擔心，針對超小屏幕設備的栅格系统能夠在所有分辨率的環境下展开。
1.移除 此 CSS 文檔中提到的設置瀏覽器窗口（viewport）的標籤：<meta>。
2.通過為 .container 設置一個width 值從而覆蓋框架的默認任 width 設置，例如 width: 970px !important; 。請確保這些設置全部放在默認的 Bootstrap CSS 文件的後面。
注意，如果你把它放到媒體查詢中，也可以略去 !important 。
3.如果使用了導行列，需要移除所有導行列的摺疊和展開形為。
4.對於栅格布局，额外增加 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。 不要擔心，針對超小屏幕設備的栅格系统能夠在所有分辨率的環境下展开。
- Jan 12 Fri 2018 13:52
-
Bootstrap3 display:table 之間隙調整
上一篇說到使用 display:table 讓div達城等高，但使用之後無法用margin來調整div之間的間隙。
如需要調整間隙，需要在display:table-cell的父層，也就是display:table這層加上 border-collapse 跟 border-spacing 。
css:
如需要調整間隙，需要在display:table-cell的父層，也就是display:table這層加上 border-collapse 跟 border-spacing 。
css:
- Jan 12 Fri 2018 11:24
-
bootstrap3 使div等高
- Dec 13 Wed 2017 16:42
-
div 垂直置中
- Nov 28 Tue 2017 10:15
-
用clip-path繪製純CSS圖形
