Cygwin 的套件中並沒有 NodeJS 可以選用安裝,但 Windows 平台的 NodeJS 是可以直接在 Cygwin 內使用的,只需要先依照 Windows 的安裝流程完成後,在 Cygwin 內將安裝路徑 export 到 $PATH
就可以了。
Read more “在 Cygwin 中安裝 NodeJS 與 NPM”
Leave a commentCygwin 的套件中並沒有 NodeJS 可以選用安裝,但 Windows 平台的 NodeJS 是可以直接在 Cygwin 內使用的,只需要先依照 Windows 的安裝流程完成後,在 Cygwin 內將安裝路徑 export 到 $PATH
就可以了。
Read more “在 Cygwin 中安裝 NodeJS 與 NPM”
Leave a commentBootstrap 有個 modal 懸浮窗
如果裡面內容過多,bootstrap 並不會把內容限縮在 modal-body 裡
為了美觀,所以需要 CSS 的 max-height
屬性套用至 modal-body 上
如此一來內容過長造成溢出時,modal-body 會顯示捲動欄
同時 modal-header 與 modal-footer 的內容亦會固定在視窗上
網站上可能會用到多個 modal ,一個一個設定的話要自己去抓數字,很麻煩
所幸 bootstrap modal 有 shown.bs.modal
這個 event 可以使用
所以寫了一段全部 modal 都適用的 code
$('.modal').on('shown.bs.modal', function(){
var margin_vertical = parseInt( $(this).find('.modal-dialog').css('margin-top') ) + parseInt( $(this).find('.modal-dialog').css('margin-bottom') ) || 0;
var height_header = parseInt( $(this).find('.modal-header').css('height') ) || 0;
var height_footer = parseInt( $(this).find('.modal-footer').css('height') ) || 0;
var height_body = ( window.innerHeight - height_header - height_footer - margin_vertical - 10 ) + 'px';
$(this).find('.modal-body').css('max-height', height_body).css('overflow', 'auto');
});
關於多扣 10px 的部分,因為有其他誤差值,造成 body 的捲動欄會出現
個人猜想可能是因為其他部分 box-model 的關係導致 (border-width 等 blahblah)
不過我也抓不到就是了QQ,所以就偷懶多扣 10px 混過去 XD
至於為什麼會用 shown.bs.modal
這個event,而不是 show.bs.modal
是因為 modal 顯示前的的 css height 是 0
show.bs.modal
觸發的時機是顯示前,而 shown.bs.modal
則是顯示後
因此要等modal顯示時,偵測到的css height才是正確的
而這裡又有一個小小的缺點
就是當你使用 fade-in & fade-out 效果時
在動畫結束前,body 的捲動欄會出現
直到動畫結束後觸發了 shown.bs.modal
event
才會顯示成正常的樣子
小弟才疏學淺,這個問題還不知道要怎麼解決
或許加快 css animation speed 做為障眼法混過去勉強可行
不過因為這種情況只會在該 modal 第一次顯示時才會出現
之後只要 browser inner height 沒有變,都不會出現
所以就將就一下囉~
順帶一提,如果你想要能限制最大高度,又能固定佔滿版,只要將第六行的「max-height」改成「height」即可。如下所示
$(this).find('.modal-body').css('height', height_body).css('overflow', 'auto');
2 CommentsUpdate:
2017-05-10: 利用|| 0
預防取回高度值為 nan 的情況下出錯。
舊式做法是將selectedIndex設為0
自jQuery 1.6開始支援使用.prop()這支API來操作selectedIndex
HTML
<select id="name">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
jQuery
$('#name').prop('selectedIndex', 0);
Leave a comment
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>textarea auto height</title>
<style type="text/css">
textarea {
resize: none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("textarea.auto-height").css("overflow", "hidden").bind("keydown keyup", function() {
$(this).height('0px').height($(this).prop("scrollHeight") + 'px');
}).keydown();
});
</script>
</head>
<body>
<textarea class="auto-height"></textarea>
</body>
</html>
Leave a commentvar json_str = '{ "name": "Calos" }';
var data = $.parseJSON(json_str); //轉換成json object
alert(data.name); //讀取物件元素
Leave a comment