示警網頁元件
何謂示警元件?
示警元件是以JAVSCRIPT元件庫的方式進行設計,可提供網站開發者、網站管理者於網站首頁掛載,以顯示示警平台所提供的最新示警訊息。
使用方式
建立一個網頁資源檔案(.htm、.html),  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔),然後在  <body> </body>網頁區塊內建立一個 <div> </div>區塊,給予該div的一個有命名規則的ID,此ID將影響你在網頁上呈現的大小以及的示警類類別的選擇
樣式說明
  • 版面說明 示警元件提供寬高版面格式有下列5種、分別為300 X 100、300 X 250、180 X 110、180 X 155、180 X 350 等樣式。
  • 類型說明 "共通示警協議標準"中定義嚴重代碼程度 <severity>區分為5種嚴重程度等級,包括 Extreme(非常嚴重的威脅)、Severe(嚴重的威脅)、Moderate(有威脅)、Minor(很小的威脅)、Unknown(未知) 示警元件由這5大類的代碼程度區分為2種類型,再由此2種類型劃分成2種不同地域性質的示警訊息(全台灣)、(各縣市)。
    1. 一般示警
      全台灣:
      包含嚴重代碼為Extreme、Severe、Moderate、Minor、Unknown等全台灣的示警訊息。
      縣市別:
      包含嚴重代碼為Extreme、Severe、Moderate、Minor、Unknown等各縣市別的示警訊息。
    2. 高嚴重示警
      全台灣:
      包含嚴重代碼為Extreme等全台灣的示警訊息。
      縣市別:
      包含嚴重代碼為Extreme等各縣市別的示警訊息。
  • 版面、類型命名規則 不同的版面指派給 <div> </div>區塊的ID也不一樣,參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則也不一樣,請參照以下規則:
    1. 一般示警(全台灣):
      <div> </div>區塊的ID命名規則為capInfo300250,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CAP300250_CapInfo.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。
    2. 高嚴重示警(全台灣):
      <div> </div>區塊的ID命名規則為capInfo300250_Extreme,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoExtreme_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。
    3. 一般示警(縣市別):
      <div> </div>區塊的ID命名規則為capInfo300250_Normal_66,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoNormal_66_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。66為縣市代碼(代碼說明表)
    4. 高嚴重示警(縣市別):
      <div> </div>區塊的ID命名規則為capInfo300250_Extreme_66,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoExtreme_66_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。66為縣市代碼(代碼說明表)
範例
  • 一般示警(全台灣)元件介接範例
    一般示警(全台灣)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CAP300250_CapInfo.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CAP300250_CapInfo.js"></script>
      </head>
      <body>
       <div id="capInfo300250" >
       </div>
      </body>
    </html>

    DEMO 畫面

    • 現無示警
      2017-04-24,05:31│更新
      現在沒有示警。
  • 高嚴重示警(全台灣)元件介接範例
    高嚴重示警(全台灣)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme180110.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_180110.js"></script>
      </head>
      <body>
       <div id="capInfo180110_Extreme" >
       </div>
      </body>
    </html>

    DEMO 畫面

  • 一般示警(縣市別)元件介接範例
    一般示警(縣市別)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoNormal_66_180155.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoNormal_66_180155.js"></script>
      </head>
      <body>
       <div id="capInfo180155_Normal_66" >
       </div>
      </body>
    </html>

    DEMO 畫面

  • 高嚴重示警(縣市別)元件介接範例
    高嚴重示警(縣市別)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_66_300100.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_66_300100.js"></script>
      </head>
      <body>
       <div id="capInfo300100_Extreme_66" >
       </div>
      </body>
    </html>

    DEMO 畫面

    • 現無示警
      現在沒有示警。 more...
      2017-04-24,05:31 │ 更新