bootstrap點彈跳視窗時，會出現element.style{padding-right:17px} 問題

問題：
bootstrap點彈跳視窗時，會出現element.style{padding-right:17px} 使整個頁面右邊會越來越往左偏移
說明：
遇到的專案是有使用sweetalert，所以使用方法5的方法有自訂了一下， 不然也可以參考該網址

https://stackoverflow.com/questions/32862394/bootstrap-modals-keep-adding-padding-right-to-body-after-closed

https://forums.oscommerce.com/topic/412058-modal-destination-and-modal-within-modal/

解決方法：

方法1

body {
padding-right: 0 !important;
overflow-y: scroll!important;
}


方法2

body,body.swal2-shown,body.modal-open {
overflow:inherit;
padding-right:inherit !important;
}


方法3

$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
$('body').css('padding-right', '0');
});


方法4

('.modal').on('hide.bs.modal', function (e) {
e.stopPropagation();
$('body').css('padding-right', '');
});


方法5

body, body.swal2-shown, body.modal-open {
padding-right: 0 !important;
overflow-y: scroll !important;
}


Selenium-安裝方式 (for C# MSTest)

l   相關套件下載：

n   Selenium.WebDriver

n   Selenium.Support

n   Selenium.WebDriver.ChromeDriver(Chrome瀏覽器使用)

l   安裝方式：使用C#，於NuGet進行下載安裝

n   步驟：ToolsàNuGet Package ManageràManage NuGet Packages for Solution

n   步驟：點選Browse，於search輸入Selenium

n   步驟：選擇Selenium.WebDriver安裝(版本：3.14.0 安裝時間：2018/10/08)
      安裝完畢後，再進行後續安裝。

n   步驟：選擇Selenium.Support安裝(版本：3.14.0 安裝時間：2018/10/08)
      安裝完畢後，再進行後續安裝。

n   步驟：選擇Selenium.Chrome.WebDriver安裝(使用Chrome 瀏覽器)
(版本：2.42.0 安裝時間：2018/10/08)安裝完畢後，再進行後續安裝。

(其他瀏覽器可安裝清單如下：
Selenium.Firefox.WebDriver：Firefox

Selenium.WebDriver.IEDriver：IE

l   安裝方式：使用C#，另外下載driver

n   步驟：下載的driver可存放於一個資料夾內

n   步驟：要使用時只要在宣告時在dirver後面填入路徑即可，參考如下：

driver = new InternetExplorerDriver(@"C:\temp\driver")

l   安裝方式：使用C#，開啟IE瀏覽器的方法

說明：要使用IE瀏覽器進行自動測試需完成以下步驟，不然會無法使用IE

n   步驟：可以使用NuGet或自行到相關網站下載，如上面說明方式

n   步驟：開啟IEà網際網路選項à安全性

將「網際網路」、「近端內部網路」、「信任的網站」、「限制的網站」

以上四個區域的「啟用受保護模式(需要重新啟動Internet Explorer)」，

都打勾或都不勾。

n   步驟：此處是使用Win10 X64環境下IE為11版本，有此選項，如未有此項目請自行參考Google有其他文章教學。

而「啟用加強的受保護模式」不要勾選，

當勾選時，一樣可以執行，但測試案例會一直失敗有時會成功。

不勾選時，畫面會出「This is the initial start page for the WebDriver server.」

但不是錯誤而是正在執行。

n   步驟：瀏覽器的縮放比例必須為100%，不然執行測試案例時會一直出現錯誤訊息！

n   步驟：網路上還教學修改登錄檔的部份，但實際測試不加也可以使用，所以此為補充內容：

32位Windows，key值為

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InternetExplorer\Main\FeatureControl\FEATURE_BFCACHE

64位Windows，key值為

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\InternetExplorer\Main\FeatureControl\FEATURE_BFCACHE

不存在請新增。之後在key建立一個iexplore.exe，DWORD類型，值為0。

jQuery簡化ready()寫法

方法1

$(document).ready(function () {
             code..
});

方法2

$().ready(function () {
             code..
});

方法3

$(function () {
             code..
});

在無障礙網頁中使用TAB鍵操作Menu

在無障礙網頁中使用TAB鍵操作Menu

參考語法：

<ul class="navbar">
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
</ul>

$('.navbar').on('mouseenter focusin', '.navbar-item > a', function (e) {

    $(this).parent('.navbar-item')
           .addClass('active')
           .siblings('.navbar-item')
           .removeClass('active')

});

另開視窗預覽列印

方法一：
        var printPage = window.open("", "Printing...", "");
        var value = document.getElementById('PrintArea').innerHTML;
        printPage.document.open();
        printPage.document.write("<HTML><head></head><BODY onload='window.print();window.close()'>");
        printPage.document.write("<PRE>");
        printPage.document.write(value);
        printPage.document.write("</PRE>");
        printPage.document.write("</BODY></HTML>");
        printPage.document.close();

方法二：(存成圖片，但是不支援IE，且open要注意彈跳視窗問題)

var printPage = window.open("", "Printing...", "");

 html2canvas(document.getElementById('PrintArea')).then(function (canvas) {

            printPage.document.open();

            printPage.document.write("<HTML><head><title>友善列印</title>");

            printPage.document.write("</head>");

            printPage.document.write("<body style='zoom:80%' onload='window.print();window.close()'>");

            printPage.document.write("<pre style='overflow-x: hidden'>"); //寫死沒有X軸Scroll功能

            printPage.document.write("<div'>");

            printPage.document.write("<img src='" + canvas.toDataURL() + "'/>");

            printPage.document.write("</div'>");

            printPage.document.write("</pre>");

            printPage.document.write("</body></HTML>");

            printPage.document.close();

        });

CSS重點清單

CSS重點

1.      需寫在以下語法內
<style type=”text/css”>
</style>
正常都會寫在<head>裡

2.      註解為/* */，並無單行註解

3.      選擇器的重類：

l   (Type選擇器)HTML的任何一個標籤

l   (Class選擇器)以.開頭的class

l   (id選擇器)以#開頭的id

l   階層的選擇器如

ü   p span 代表p 容器裡的 span

ü   .class1 p 代表class1類別容器裡的p

ü   #myId h1 代表id(myId)容裡面的h1

4.      Grouping方式

l   如有h1,h2,h3，可以使用h1,h2,h3{  }，不止type，id或class都可混合用使

5.      設定時強度比較，inline > id > class > type > inherit(繼承)，!important例外使用時都可以蓋

l   Inherit(繼承)
例如：body下有<p>、<div>、<span>，當設定body時，下面的type就會被繼承到

l   type
例如：body下有<p>、<div>、<span>，當設定body，此時<p>也有設定，會蓋掉body的設定。

l   class
例如：body下有<p>、<div>、<span>，當設定body、<p>，此時class也有設定，
而<p>的class是符合的，會蓋掉<p>。

l   id
例如：body下有<p>、<div>、<span>，當設定body、<p>、class，此時id也有設定，而<p>的id是符合的，會蓋掉<p>。

l   inline
例如：body下有<p>、<div>、<span>，當設定body、<p>、class、id，而<p>內有設定style=”color:yellow”時，會蓋掉最後是yellow。

6.      !important，強制使用(強度最大)，平常最好少用

7.      CSS的引入，讀外部css時要注意順序，避免設定又被覆蓋或沒有蓋

l   在<head>及</head>之間加入<link>的方式引入
<link href=”css/link.css” rel=”stylesheet” type=”text/css” />

8.      在製作CSS檔案時，副檔名為.css，檔案內開頭需打上，可以解決中文編碼問題
@charset “utf-8”;

9.      顏色參考

紅色：red 藍色：blue 灰色：gray 粉紅色：pink

綠色：green 青色：cyan 橘色：orange 亮綠：lightgreen

紫色：purple

10.  當不同選擇器有共同項目需要設定時，可以寫在一起，而不同的地方，則可以再另外自行編寫設定。

l   例如：.
div1 , .div2 , .div3{
(共同設定項目)
}

11.  Width/Height 尺寸

l   設定寬度 width:(auto,%,px..)

ü   補充說明：div會是整個視窗寬度，而span會只限制於自己區塊內

l   設定高度 height:(auto,%,px..)

l   設定最大允許寬度 max-width(none(預設),%,px..)

l   設定最小允許寬度 min-width(%,px..)

l   設定最大允許高度 max-height(none(預設),%,px..)

l   設定最小允許高度 min-height(%,px..)

ü   補充說明：設定最小或最大允許寬度或高度時，搭配width的%這樣才會顯示效果，不然就是固定大小，如果只設定%沒有最小最大就隨著視窗大小而去變動。

12.  Display 顯示

l   Inline 為行內元素，像span

l   Black 為區塊元素，像p

l   None 不顯示

13.