Как реализовать веб-страницу, которая масштабируется, когда окно браузера изменено?

Question

Как реализовать веб-страницу, которая масштабируется, когда окно браузера изменено?

Вы можете восстановить свой словарь так легко, как показано ниже

>>> result = {}
>>> for lst in df.values:
...     leaf = result
...     for path in lst[:-2]:
...        leaf = leaf.setdefault(path, {})
...     leaf.setdefault(lst[-2], list()).append(lst[-1])
...
>>> result
{'A': {'A1': {'A11': [1]}, 'A2': {'A21': [6], 'A12': [2]}}, 'C': {'C1': {'C11': [4]}}, 'B':  {'B1': {'B12': [3]}, 'B2': {'B21': [5]}}}

Если вы уверены, что ваши листья не будут перекрываться, замените последнюю строку

...     leaf.setdefault(lst[-2], list()).append(lst[-1])

на

...     leaf[lst[-2]] = lst[-1]

, чтобы получить желаемый результат:

>>> result
{'A': {'A1': {'A11': 1}, 'A2': {'A21': 6, 'A12': 2}}, 'C': {'C1': {'C11': 4}}, 'B': {'B1': {'B12': 3}, 'B2': {'B21': 5}}}

Пример данных, используемых для тестов:

import pandas as pd
data = {'name': ['A','A','B','C','B','A'],
          'v1': ['A1','A2','B1','C1','B2','A2'],
          'v2': ['A11','A12','B12','C11','B21','A21'],
          'v3': [1,2,3,4,5,6]}
df = pd.DataFrame.from_dict(data)

5

ajax css html javascript

задан Steven A. Lowe 13 November 2008 в 05:32

11 ответов

Если у Вас нет некоторого конкретного требования здесь, я не уверен, почему JS необходим здесь. Табличные разметки являются легким (и архаичный) способ сделать жидкие разметки в HTML, но разметки отделения с CSS допускают жидкие разметки также, см. http://www.glish.com/css/2.asp

7

ответ дан 18 December 2019 в 05:20

Да кажитесь, что Вы хотите посмотреть на жидкое расположение CSS. Для ресурсов на этом, просто жидкость Google расположение CSS, должен дать Вам много вещей проверить. Также взгляните на этот предыдущий вопрос для некоторых хороших указателей.

5

ответ дан 18 December 2019 в 05:20

Это действительно зависит от веб-страницы, которую Вы реализуете. Как правило Вы собираетесь хотеть 100% CSS. Когда калибровка элементов, которые будут содержать текст, не забывает гравитировать к ориентированным размерам текста, таким как они, исключая, и не пкс.

Плавания опасны, если Вы плохо знакомы с CSS. Я не являюсь новым, и они являются все еще несколько экранирующими мне. Избегайте их, если это возможно. Обычно, просто необходимо изменить свойство дисплея отделения или элемента, Вы продолжаете работать так или иначе.

Если Вы будете делать все это и будете обыскивать сеть, где Вы испытываете дополнительные затруднения, у Вас не только будут страницы, которые изменяют размер, когда браузер делает так, но также и страницы, которые могут быть увеличены и уменьшены масштаб путем изменения размеров текста. В основном сделайте правильно, это и дизайн является небьющимся. Я видел сделанный на сложных макетах, но это - большая работа, столько же усилия сколько программирование веб-страницы в определенных экземплярах.

Я не уверен, для кого Вы делаете этот сайт (забава, прибыль, оба), но я рекомендовал бы хорошо подумать о том, как Вы балансируете чистоту CSS с несколькими взломами тут и там, чтобы помочь увеличить Вашу эффективность. Ваш веб-сайт имеет бизнес-потребность, чтобы быть на 100% доступным? Нет? Затем завинтите его. Сделайте то, что необходимо сделать для создания денег сначала, затем пойдите пожиратель ресурсов вне себя от страсти и сделайте что-либо дополнительное, для которого у Вас есть время.

5

ответ дан 18 December 2019 в 05:20

Что-то еще для рассмотрения - то, что JavaScript не будет обновлять непрерывно, в то время как окно изменяется, таким образом, будет значимая задержка/зыбь. С жидким расположением CSS экранные элементы обновят почти немедленно для бесшовного перехода.

4

ответ дан 18 December 2019 в 05:20

Лучший способ, которым я видел, чтобы сделать, это должно использовать Инструменты CSS YUI и затем использовать проценты для всего. Сетки YUI допускают различную фиксированную ширину или жидкие разметки с размерами столбца, указанными как части свободного места. Существует Разработчик Сеток YUI, чтобы помочь разметить вещи. Шрифты YUI дают Вам хорошие средства управления размером шрифта. Существуют некоторые хорошие шпаргалки, доступные, которые показывают Вам, как разметить вещи и полезные вещи как какой процент указать для размера шрифта такого количества пикселей.

Это получает Вас масштабирование расположения, но масштабирование всего сайта, включая размеры шрифта, когда окно браузера изменяет размер, немного более хитро. Я думаю, что Вы оказываетесь перед необходимостью писать своего рода плагин браузера для этого, что означает, что Ваше решение будет не портативным. Если Вы находитесь на интранет, это не слишком плохо, поскольку можно управлять браузером на каждом клиенте, но если Вы желаете сайт, который доступен в Интернете затем, Вы, возможно, должны заново продумать свой UI.

2

ответ дан 18 December 2019 в 05:20

После попытки решения книгой я застрял с несовместимостью или в Firefox или в IE. Таким образом, я сделал некоторое лужение и придумал этот CSS. Как Вы видите, поля являются половиной желаемого размера и отрицательный.

<head><title>Centered</title>
<style type="text/css">
body { 
        background-position: center center;
        border: thin solid #000000;
        height: 300px;
        width: 600px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -150px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: -300px;
    }
</style></head>

Надежда, которая помогает

1

ответ дан 18 December 2019 в 05:20

Используйте проценты! Скажите, что у Вас есть "основная область", на которой находится содержание всей Вашей страницы. Вы хотите, чтобы это центрировалось в окне, всегда, и 80% ширины окна.

Просто сделайте это:
#centerpane {поле: автоматический; ширина: 80%;}

Tada!

1

ответ дан 18 December 2019 в 05:20

используйте Эмс. jontangerine.com и simplebits.com являются оба удивительными примерами. Дополнительные материалы для чтения - Невероятное Их и Эластичные Разметки с CSS Jon Tan

1

ответ дан 18 December 2019 в 05:20

Спасибо за все предложения! Это похоже на ужасный материал, который я должен был сделать, было необходимо. Следующие работы (на моей машине, так или иначе) в IE и FireFox. Я могу сделать статью из этого для CodeProject.com позже ;-)

Этот JavaScript входит в раздел <head>:

<script type="text/javascript">
var tmout = null;
var mustReload = false;

function Resizing()
{
    if (tmout != null)
    {
        clearTimeout(tmout);
    }
    tmout = setTimeout(RefreshAll,300);
}
function Reload()
{
    document.location.href = document.location.href;
}
//IE fires the window's onresize event when the client area 
//expands or contracts, which causes an infinite loop.
//the way around this is a hidden div set to 100% of 
//height and width, with a guard around the resize event 
//handler to see if the _window_ size really changed
var windowHeight;
var windowWidth;
window.onresize = null;
window.onresize = function()
{
    var backdropDiv = document.getElementById("divBackdrop");
    if (windowHeight != backdropDiv.offsetHeight ||
        windowWidth != backdropDiv.offsetWidth)
    {
        //if screen is shrinking, must reload to get correct sizes
        if (windowHeight != backdropDiv.offsetHeight ||
            windowWidth != backdropDiv.offsetWidth)
        {
            mustReload = true;
        }
        else
        {
            mustReload = mustReload || false;
        }
        windowHeight = backdropDiv.offsetHeight;
        windowWidth = backdropDiv.offsetWidth;
        Resizing();
    }
}
</script>

<тело> начинается как это:

<body onload="RefreshAll();">
    <div id="divBackdrop" 
        style="width:100%; clear:both; height: 100%; margin: 0; 
            padding: 0; position:absolute; top:0px; left:0px; 
            visibility:hidden; z-index:0;">
    </div>

плавание ОТДЕЛЕНИЙ уехало в расположение. Я должен был установить высоту и ширину к процентам, просто застенчивым из полного объема (например, 99,99%, 59,99%, 39,99%), чтобы помешать плаваниям переноситься, вероятно, из-за границ на ОТДЕЛЕНИЯХ.

Наконец, после довольного раздел, другой блок JavaScript для управления обновлением:

var isWorking = false;
var currentEntity = <%=currentEntityId %>;

//try to detect a bad back-button usage;
//if the current entity id does not match the querystring 
//parameter entityid=###
if (location.search != null && location.search.indexOf("&entityid=") > 0)
{
    var urlId = location.search.substring(
        location.search.indexOf("&entityid=")+10);
    if (urlId.indexOf("&") > 0)
    {
        urlId = urlId.substring(0,urlId.indexOf("&"));
    }
    if (currentEntity != urlId)
    {
        mustReload = true;
    }
}
//a friendly please wait... hidden div
var pleaseWaitDiv = document.getElementById("divPleaseWait");
//an example content div being refreshed via AJAX PRO
var contentDiv = document.getElementById("contentDiv");

//synchronous refresh of content
function RefreshAll()
{
    if (isWorking) { return; }  //no infinite recursion please!

    isWorking = true;
    pleaseWaitDiv.style.visibility = "visible";

    if (mustReload)
    {
        Reload();
    }
    else
    {
        contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
            (currentEntity, contentDiv.offsetWidth, 
             contentDiv.offsetHeight).value;
    }

    pleaseWaitDiv.style.visibility = "hidden";
    isWorking = false;
    if (tmout != null)
    {
        clearTimeout(tmout);
    }
}

var tmout2 = null;
var refreshInterval = 60000;

//periodic synchronous refresh of all content
function Refreshing()
{
    RefreshAll();
    if (tmout2 != null)
    {
        clearTimeout(tmout2);
        tmout2 = setTimeout(Refreshing,refreshInterval);
    }
}

//start periodic refresh of content
tmout2 = setTimeout(Refreshing,refreshInterval);

//clean up
window.onunload = function() 
{
    isWorking = true;
    if (tmout != null)
    {
        clearTimeout(tmout);
        tmout = null;
    }
    if (tmout2 != null)
    {
        clearTimeout(tmout2);
        tmout2 = null;
    }

ужасный, но это работает - который я предполагаю это, что действительно имеет значение ;-)

1

ответ дан 18 December 2019 в 05:20

< body onresize="resizeWindow()" onload="resizeWindow()" > ПОЖАЛУЙСТА < /тело >

    /**** Page Rescaling Function ****/

    function resizeWindow() 
    {
        var windowHeight = getWindowHeight();
        var windowWidth = getWindowWidth();

        document.getElementById("content").style.height = (windowHeight - 4) + "px";
    }

    function getWindowHeight() 
    {
        var windowHeight=0;
        if (typeof(window.innerHeight)=='number') 
        {
            windowHeight = window.innerHeight;
        }
        else {
            if (document.documentElement && document.documentElement.clientHeight) 
            {
                windowHeight = document.documentElement.clientHeight;
            }
            else 
            {
                if (document.body && document.body.clientHeight) 
                {
                    windowHeight = document.body.clientHeight;
                }
            }
        }
        return windowHeight;
    }

Решение, над которым я сейчас работаю, нуждается в нескольких изменениях в отношении ширины, в противном случае высота пока работает нормально ^^

-Ozaki

.

0

ответ дан 18 December 2019 в 05:20

Другие вопросы по тегам:

ajax css html javascript

Как реализовать веб-страницу, которая масштабируется, когда окно браузера изменено?

11 ответов

Похожие вопросы: