VPF::Созранение состояния страницы

Karta

Дата 6.3.2013, 13:23 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

Добрый день,
я сделала простой js в представлении, который меняет цвет фона по нажатию на checkbox, а как мне сделать на той же странице кнопку сохранить, при нажатии на которую, изменения на страницы будут сохраняться??
Например, я запускаю свое представление, открывается страница с белым фоном и 3 флажка: синий, желтый, красный.
Выбираю флажек с красным цветом, фон становится красным. Нажимаю сохранить... и при следующем запуске представления у меня отрывается страница с красным фоном..?

Как реализовать сохранение состояния?

Спасибо

Это сообщение отредактировал(а) Karta - 6.3.2013, 13:29

JAYBE

Дата 6.3.2013, 14:07 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 220
Регистрация: 27.3.2008

Репутация: нет
Всего: 0

Сохранять эти настройки в куки и при открытии страницы проверять, какой флажок был отмечен. В зависимости от флажка прорисовывать страницу.

Это сообщение отредактировал(а) JAYBE - 6.3.2013, 14:07

Karta

Дата 6.3.2013, 14:11 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

Проблема решена, решение прилагаю:

Код


<!DOCTYPE HTML>
<html>
<body>   
  <select id = "saveMe">
    <option value="0"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <script>

    window.onload = function() {
      if(localStorage.optionValue) {
        document.getElementById("saveMe").selectedIndex = +localStorage.optionValue;
      }
    }
    
    window.onunload = function() {
      localStorage.optionValue = document.getElementById("saveMe").selectedIndex;
    }

  </script>
  
</body>
</html>

Может кому понадобится

Это сообщение отредактировал(а) Karta - 6.3.2013, 14:12

Karta

Дата 6.3.2013, 15:09 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

"Сохранять эти настройки в куки и при открытии страницы проверять, какой флажок был отмечен. В зависимости от флажка прорисовывать страницу."

а можно по подробнее как делются такие вещи? Я не слышала о таком...

Aliance

Дата 6.3.2013, 17:51 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата(Karta @ 6.3.2013, 16:09

)

а можно по подробнее как делются такие вещи? Я не слышала о таком...

в общем-то именно так, как вы написали постом выше. разве что вместо кук вы использовали localStorage, которое далеко не всеми браузерами поддерживается.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Karta

Дата 6.3.2013, 20:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

Дело то в том, что у меня к каждому состоянию прикркплен стиль...
И вот, когда я выбираю скажем красный (стиль 2) у меня то страница будет красного цвета, а когда перезагружаю страницу, у меня снова фон белый а стиль остался "стиль 3", т.е в выпадающем списке то остался последняя выбранная настнойка, а результат остался первоночальный...
Как с этим быть?

Karta

Дата 6.3.2013, 22:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

Вот мой код...
Как здесь сделать куки...?

Код


<input id="update" type="submit" value="Update">
    </h3>
          
     <div style="clear:both;"></div>
       <p> Image Size : <input id="img_width" type="text" style="width: 50px"><br></p>
           <p>
        <a id="tooltip" href="#">Enable/disable toolTips.</a> [<span id="tooltip_state">disabled</span>]<br />
        </p>
        <p><h1>Selection Styles</h1></p>
         <table style="height: 77px; width: 400px">
             <tr><th><div class="label" style="width: 100px">Stroke:</div></th>
                 <th><div class="label" style="width: 100px">Stroke width</div> </th>
                 <th><div class="label" style="width: 100px">Stroke opacity</div></th>
                 <th><div class="label" style="width: 100px">Fill opacity</div></th>
                 </tr><br />
            <tr>
            <td  valign="top"> <div class="input"> <input id="stroke_select" type="checkbox"style="width: 70px" /> </td><br />
            <td  valign="top"><div class="input"><input id="strokewidth_select" type="text" style="width: 70px"></td><br />
            <td  valign="top"> <div class="input"> <input id="strokeopacity_select" type="text" style="width: 70px"></td><br />
            <td  valign="top"><div class="input"><input id="fill_select" type="text" style="width: 70px"></td><br />
        </tr>
        </table>       
                    
        <div class="label" style="width: 100px"><h1>Selection fill:</h1></div> <p> <select id="select_style">
              <option value="0" selected>Normal</option>
               <option value="1">Style 1</option>
               <option value="2">Style 2</option>
               <option value="3">Style 3</option>
               <option value="4">Style 4</option>
               <option value="5">Style 5</option>
        </select>
        </p>
    </div>

Aliance

Дата 7.3.2013, 12:00 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата(Karta @ 6.3.2013, 21:48

)

И вот, когда я выбираю скажем красный (стиль 2) у меня то страница будет красного цвета, а когда перезагружаю страницу, у меня снова фон белый а стиль остался "стиль 3", т.е в выпадающем списке то остался последняя выбранная настнойка, а результат остался первоночальный...

ну так вы не обрабатываете никак выбранный стиль. только как его обрабатывать из ваших постов не понятно. у вас нет ни css, ни каких-либо других правил.
если написать что-то типа такого:

Код


window.onload = function() {
      // ...
     alert('ID выбранного стиля:' + document.getElementById("select_style").selectedIndex);
}

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Karta

Дата 7.3.2013, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

Цитата(Aliance @ 7.3.2013, 12:00

)

window.onload = function() {
// ...
alert('ID выбранного стиля:' + document.getElementById("select_style").selectedIndex);
}

Это мне для каждого стиля так прописывать надо?

Прилагаю свой рабочий скрипт

Код


var OptionsList = document.getElementById('select_style');
    var strField = OptionsList.options[OptionsList.selectedIndex].text;

    $(document).ready(function () {
        var $statelist, $map, ratio,
            mapsterConfigured = function () {
                // set html settings values
                var opts = $map.mapster('get_options', null, true);
                if (!ratio) {
                    ratio = $map.width() / $map.height();
                }
                $('#stroke_highlight').prop("checked", opts.render_highlight.stroke);
                $('#strokewidth_highlight').val(opts.render_highlight.strokeWidth);
                $('#fill_highlight').val(opts.render_highlight.fillOpacity);
                $('#strokeopacity_highlight').val(opts.render_highlight.strokeOpacity);
                $('#stroke_select').prop("checked", opts.render_select.stroke);
                $('#strokewidth_select').val(opts.render_select.strokeWidth);
                $('#fill_select').val(opts.render_select.fillOpacity);
                $('#strokeopacity_select').val(opts.render_select.strokeOpacity);
                $('#img_width').val($map.width());
            },
            default_options =
            {
                fillOpacity: 0.5,
                render_highlight: {
                    fillColor: '2aff00',
                    stroke: true,
                    altImage: '../../Images/map_720_alt_1.jpg'
                },
                render_select: {
                    fillColor: 'ff000c',
                    stroke: false,
                    altImage: '../../Images/map_720_alt_1.jpg'
                },
                //render_zoom: {
                //    altImage: 'map_huge.jpg'
                //},
                fadeInterval: 50,
                isSelectable: true,
                singleSelect: false,
                mapKey: 'data-state',
                mapValue: 'data-full',
                listKey: 'name',
                listSelectedAttribute: 'checked',
               

                onGetList: addCheckBoxes,
                onClick: function (e) {
                    styleCheckbox(e.selected, e.listTarget);
                    if (!utils.isScrolledIntoView(e.listTarget, false, $statelist)) {
                        utils.centerOn($statelist, e.listTarget);
                    }
                    //if (e.key==='OH') {
                    //    $map.mapster('zoom','OH');
                    //     return false;
                    //}
                },
                onConfigured: mapsterConfigured,
                showToolTip: false,
                toolTipClose: ["area-mouseout"],
                areas: [
                    {
                        key: "one",
                         

                        toolTip: "1111",
                                                   
                    }
                ]
            };


        function addCheckBoxes(items) {
            var item, selected;
            $statelist.children().remove();
            for (var i = 0; i < items.length; i++) {
                selected = items[i].isSelected();
                item = $('<div><input type="checkbox" name="' + items[i].key + '"' + (selected ? "checked" : "") + '><span class="sel" key="' + items[i].key + '">' + items[i].value + '</span></div>');

                $statelist.append(item);
            }
            $statelist.find('span.sel').unbind('click').bind('click', function (e) {
                var key = $(this).attr('key');
                $map.mapster('highlight', true, key);
            });
            // return the list to mapster so it can bind to it
            return $statelist.find('input:checkbox').unbind('click').click(function (e) {
                var selected = $(this).is(':checked');
                $map.mapster('set', selected, $(this).attr('name'));
                styleCheckbox(selected, $(this));
            });
        }
        function styleCheckbox(selected, $checkbox) {
            nowWeight = selected ? "bold" : "normal";
            $checkbox.closest('div').css("font-weight", nowWeight);
        }

        $statelist = $('#statelist');
        $map = $('#skeleton_image');
        function bindlinks() {
            $('*').unbind();
                        
            $("#tooltip").bind("click", function (e) {
                e.preventDefault();
                var state = !$map.mapster('get_options').showToolTip;
                $('#tooltip_state').text(state ? "enabled" : "disabled");
                $map.mapster("set_options", { showToolTip: state });
            });
            $("#show_selected").bind("click", function (e) {
                e.preventDefault();
                $('#selections').text($("#skeleton_image").mapster("get"));
            });
            
            
            function getSelected(sel) {
                var item = $();
                sel.each(function () {
                    if (this.selected) {
                        item = item.add(this);
                        return false;
                    }
                });
                return item;
            }

            function getFillOptions(el) {
                var new_options,
                        val = getSelected($(el).find("option")).val();

                if (val > "0") {
                    new_options = {
                        altImage: '../../Images/map_720_alt_' + val + '.jpg',
                        stroke: true
                    }
                } else {
                    new_options = {
                        altImage: null,
                        stroke: false
                    }
                }
                return new_options;
            }

            function getNewOptions() {
                var options,
                       
                        render_select = getFillOptions($('#select_style'));

                options = $.extend({},
                        default_options,
                        {
                            render_select: render_select,
                            
                        });

                return options;

            }
            $("#select_style").bind("change", function (e) {
                e.preventDefault();
                $statelist.children().remove();

                $map.mapster(getNewOptions());

            });


            $("#update").click(function (e) {
                var newOpts = {};
                function setOption(base, opt, value) {
                    if (value !== '' && value !== null) {
                        base[opt] = value;
                    }
                }
                e.preventDefault();

               

                newOpts.render_select = {};
                setOption(newOpts.render_select, "stroke", $('#stroke_select').prop("checked"));
                setOption(newOpts.render_select, "strokeWidth", $('#strokewidth_select').val());
                setOption(newOpts.render_select, "fillOpacity", $('#fill_select').val());
                setOption(newOpts.render_select, "altImageOpacity", $('#fill_select').val());
                setOption(newOpts.render_select, "strokeOpacity", $('#strokeopacity_select').val());

                var width = parseInt($('#img_width').val(), 10);

                if ($map.width() != width) {
                    var height = width / ratio;
                    var keys = $map.mapster('get');
                    $map.mapster('resize', width, null, 1000);
                } else {
                    $map.mapster('set_options', newOpts);
                }

            });
        };

        bindlinks();
        $.mapster.impl.init();
        $map.mapster(default_options);


    });


    // Utility functions
    // If you are copying code you probably won't need these.


    var utils = {};
    // Tells if an element is completely visible. if the 2nd parm is true, it only looks at the top.

    utils.isScrolledIntoView = function (elem, topOnly, container) {
        var useWindow = false, docViewTop, docViewBottom, elemTop, elemBottom;

        if (!container) {
            container = window;
            useWindow = true;
        }


        if (useWindow) {
            docViewTop = $(container).scrollTop();
            elemTop = elem.offset().top;
        } else {
            docViewTop = 0;
            elemTop = elem.position().top;
        }
        docViewBottom = docViewTop + $(container).height();
        elemBottom = elemTop + elem.height();


        if (topOnly) {
            return elemTop >= docViewTop && elemTop <= docViewBottom;
        } else {
            return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
        }
    };

    utils.centerOn = function ($container, $element) {
        $container.animate({
            scrollTop: $element.position().top - ($container.height() / 2)
        }, 'slow');
    };

Это сообщение отредактировал(а) Aliance - 7.3.2013, 16:08

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »