Простое всплывающее окно с расширением Chrome не останется в последнем состоянии - PullRequest
Новая
       35

Простое всплывающее окно с расширением Chrome не останется в последнем состоянии

8 голосов
/ 01 февраля 2012

Теперь я уверен, что некоторые из вас слышали об инциденте, произошедшем на Байронской атомной электростанции (рядом с которым я живу), а также о большом количестве землетрясений, происходящих в Соединенных Штатах.и Канада.( BTW : я нашел это расширение, где вы можете отслеживать землетрясения по всему миру)

В любом случае, учитывая все эти проблемы, я хотел бы лучше наблюдать за АЭСи я уже знал о Радиационной сети Так что я сделал хромированное расширение под названием Radiation Map , которое питается от Радиационной сети (хотя я никоим образом не связан с Радиационной сетью)

Я сделал это не только для себя, но и для каждого, кто может следить за уровнем радиации в США, Японии, Южной Америке и Европе.(Я знаю, что я мало работал, но вы видите причину)

Однако у меня есть одна проблема, которую я не могу понять.Когда я открываю всплывающее окно и смотрю уровни радиации в Японии, а когда закрываю всплывающее окно, оно возвращается к показу уровней радиации в Соединенных Штатах.Как мне сделать так, чтобы пользователь оставался там, где его оставил пользователь, скажем, в моем случае, в этом примере, в Японии?(Я пробовал скрипты контента, но css и jquery не загружались)

Манифест 

{
    "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"
    }
}

Всплывающее окно 

<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 (эффекты, чтобы скрыть и показать другие карты, которые контролируют уровни излучения) 

$(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);
    });

});

1 Ответ

7 голосов
/ 01 февраля 2012

Страница перезагружается при каждом открытии всплывающего окна, что означает, что состояние не будет сохраняться автоматически. Вы можете использовать sessionStorage , чтобы запомнить настройки для текущего сеанса (или даже localStorage, если вы хотите, чтобы он выдержал перезапуск браузера). Примерно так: 

$(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();
});
...