2012-02-01 51 views
8

Bây giờ tôi chắc chắn một số bạn đã nghe về sự cố xảy ra tại Byron Nuclear Plant (Tôi sống gần đây) Cũng như một lượng lớn động đất đang diễn ra trong Hoa Kỳ và Canada. (BTW: Tôi tìm thấy this mở rộng nơi bạn có thể theo dõi trận động đất trên toàn thế giới)Chrome Extension Popup đơn giản sẽ không còn ở trạng thái cuối cùng

Dù sao với tất cả những vấn đề này xảy ra tôi muốn xem các nhà máy hạt nhân tốt hơn, và tôi đã biết về Radiation Network Vì vậy, tôi đã thực hiện một phần mở rộng chrome có tên là Radiation Map được cung cấp bởi Mạng lưới bức xạ (Mặc dù tôi không có cách nào liên kết với Mạng lưới bức xạ)

Tôi không chỉ làm bản thân mình mà mọi người có thể theo dõi mức độ bức xạ ở Mỹ, Nhật Bản, Nam Mỹ và Châu Âu. (Tôi biết tôi không làm nhiều việc, nhưng bạn thấy lý do)

Tuy nhiên tôi có 1 vấn đề mà tôi không thể tìm ra. Khi tôi mở cửa sổ bật lên, và tôi đang xem mức độ bức xạ của Nhật Bản, và khi tôi đóng cửa sổ bật lên, nó sẽ trở lại để hiển thị các mức độ bức xạ của Hoa Kỳ. Làm thế nào để làm cho nó để nó ở tại nơi người dùng rời khỏi nó, nói trong trường hợp của tôi Nhật Bản trong ví dụ này? (Tôi đã thử kịch bản nội dung, nhưng css, và jquery không tải)

Manifest

{ 
    "name": "Radiation Map", 
    "version": "1.0.1", 
    "description": "See what radiation levels are anywhere in the United States, South America, Japan, and Europe! Updated in real time every minute.", 

    "browser_action": { 
     "default_icon": "images/logo.png", 
     "default_title": "Radiation Map", 
     "popup": "index.html" 
    }, 

    "icons": { 
     "48": "images/48x48.png", 
     "128": "images/128x128.png", 
     "256": "images/logo.png" 
    } 
} 

Popup

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/rmd.js"></script> 
</head> 
<body id="radiationmap"> 
    <div id="rmlbbg"></div> 

    <div id="topnavradiation"> 
     <ul id="menu"> 
      <div id="themedrop"> 
       <table> 
        <tr><td> 
         <button id="cus">Contiguous United States</button> 
        </tr></td> 
        <tr><td> 
         <button id="hawaii">Hawaii</button> 
        </tr></td> 
        <tr><td> 
         <button id="alaska">Alaska</button> 
        </tr></td> 
        <tr><td> 
         <button id="sa">South America</button> 
        </tr></td> 
        <tr><td> 
         <button id="japan">Japan</button> 
        </tr></td> 
        <tr><td> 
         <button id="europe">Europe</button> 
        </tr></td> 
       </table> 
      </div> 
      <li><button id="about">About</button></li> 
      <li><button id="home">Home</button></li> 
      <li><button id="location">Location</button></li> 
     </ul> 
    </div> 

    <div id="radiationmap"> 
     <div id="cusmap"> 
      <img src="http://www.radiationnetwork.com/GGFTPMap.jpg" width="752" height="478"> 
     </div> 
     <div id="alaskamap"> 
      <img src="http://www.radiationnetwork.com/Alaska.JPG" width="752" height="478"> 
     </div> 
     <div id="hawaiimap"> 
      <img src="http://www.radiationnetwork.com/Hawaii.JPG" width="752" height="478"> 
     </div> 
     <div id="samap"> 
      <img src="http://www.radiationnetwork.com/Paraguay.JPG" width="752" height="478"> 
     </div> 
     <div id="japanmap"> 
      <img src="http://www.radiationnetwork.com/Japan.JPG" width="752" height="478"> 
     </div> 
     <div id="europemap"> 
      <img src="http://www.radiationnetwork.com/Europe.JPG" width="752" height="478"> 
     </div> 

     <table width="752"> 
      <td><img src="images/LegendWeb.bmp"></td> 
      <td><img src="images/Nuclear.bmp"> Nuclear Site</td> 
      <td>Alert Level = 100 CPM</td> 
     </table> 
    </div> 

    <div id="aboutradiationmap"> 
     Radiation Map is powered by the <a href="http://radiationnetwork.com/" target="_blank">Radiation Network</a>, and without them this extension couldn't be possible. 

     <p><a href="http://www.youtube.com/mikethedj4" target="_blank">Michael</a> created this extension for obvious reasons, and is in no way affiliated with the Radiation Network.</p> 
     <hr> 
     <center>Take control over your life, and stay safe!<br /> 
     <em>Much Love!</em> 

     <p><a href="http://swagbucks.com/refer/mikethedj4" target="_blank"><img src="images/swagbucks.jpg"></a></p> 

     </center> 
    </div> 
</body> 
</html> 

RMD.JS (hiệu ứng để ẩn và hiển thị các bản đồ khác theo dõi mức độ bức xạ)

$(document).ready(function() { 
    $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap, div#themedrop, div#aboutradiationmap, div#rmlbbg').hide(); 

    $('button#home').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeOut(400); 
     $('div#themedrop').slideUp(400); 
    }); 

    $('button#about').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeToggle(400); 
     $('div#themedrop').slideUp(400); 
    }); 

    $('button#location').click(function() { 
     $('div#themedrop').slideToggle(400); 
    }); 

    $('button#cus').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#cusmap').delay(400).slideDown(400); 
    }); 

    $('button#europe').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#cusmap').slideUp(400); 
     $('div#europemap').delay(400).slideDown(400); 
    }); 

    $('button#japan').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#cusmap, div#europemap').slideUp(400); 
     $('div#japanmap').delay(400).slideDown(400); 
    }); 

    $('button#sa').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#cusmap, div#japanmap, div#europemap').slideUp(400); 
     $('div#samap').delay(400).slideDown(400); 
    }); 

    $('button#alaska').click(function() { 
     $('div#cusmap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#alaskamap').delay(400).slideDown(400); 
    }); 

    $('button#hawaii').click(function() { 
     $('div#alaskamap, div#cusmap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#hawaiimap').delay(400).slideDown(400); 
    }); 

    $('div#rmlbbg').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeOut(400); 
    }); 

}); 

Trả lời

7

Trang được tải lại mỗi lần cửa sổ bật lên mở ra, có nghĩa là trạng thái đó sẽ không tự động tiếp tục. Bạn có thể sử dụng sessionStorage để nhớ cài đặt cho phiên hiện tại (hoặc thậm chí localStorage nếu bạn muốn nó tồn tại khi khởi động lại trình duyệt). Một cái gì đó như thế này:

$(document).ready(function() { 

    ... 

    $('button#cus').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#cusmap').delay(400).slideDown(400); 
     sessionStorage.selectedMap = "cus"; 
    }); 

    ... 

    // "Click" the button corresponding to the map previously selected 
    var selectedMap = sessionStorage.selectedMap || "cus"; 
    $('button#' + selectedMap).click(); 
}); 
+0

Người dùng mở tiện ích mở rộng, nhấp vào Alaska, đóng tiện ích mở rộng, mở lại và tôi muốn giữ nguyên cách người dùng rời khỏi nó. Xin lỗi vì sự nhầm lẫn, nhưng cách khắc phục sự cố này? –

+1

@ mikethedj4: Có lẽ tôi nên rõ ràng hơn - những gì bạn đang yêu cầu sẽ không xảy ra tự động. Trang được tải lại mỗi khi cửa sổ bật lên mở ra. Vì vậy, bạn phải khởi tạo trang theo cách mà sự lựa chọn trước đó của người dùng được tôn trọng. Đó là những gì mã của tôi minh họa. –

+0

Chỉ cần làm rõ một chút về câu trả lời này. Sử dụng localStorage duy trì trạng thái của phần mở rộng khi bạn mở và đóng phần mở rộng trong khi sessionStorage thì không. Tôi đoán việc mở và đóng phần mở rộng sẽ mở lại các cửa sổ bật lên trong cửa sổ/tab mới để sessionStorage bị xóa. –

Các vấn đề liên quan