0

Вот демо, вот код.
Как заменить слайдер на форму с полями ввода?

    /// Copyright 2011, Ian Gilman
    /// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
    ///
    /// <reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js" />
    /// <reference path="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.min.js" />
    /// <reference path="Scripts/jquery.ui.touch-punch.min.js" />
    /// <reference path="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js" />
    
    // ----------
    $(document).ready(function () {
      Main.init();
    });
    
    // ----------
    window.Main = {
      nextBoxIndex: 0, 
      offset: 0,
      $slider: null,
      $selectedBox: null, 
      
      // ----------
      init: function() {
        var self = this;
        
        if (!Modernizr.localstorage) {
          alert("This browser does not support local storage.");
          return;
        }
        
        if (!Modernizr.hsla) {
          alert("This browser does not support hsl.");
          return;
        }
        
        if (!window.JSON) {
          alert("This browser does not support JSON.");
          return;
        }
        
        $("#new")
          .button()
          .click(function() {
            var $box = self.createBox();
            self.saveBox($box);
          });
    
        $("#clear")
          .button()
          .click(function() {
            self.clearAll();
          });
    
        $(window)
          .bind("storage", function() {
            setTimeout(function() { // this slight delay is necessary on IE
              self.loadAll();
            }, 1);
          });
    
        this.initDialog();
        this.loadAll();
      }, 
      
      // ----------
      initDialog: function() {
        var self = this;
        
        this.$slider = $("#hue")
          .slider({
            min: 0, 
            max: 360, 
            slide: function(event, ui) {
              self.setHue(self.$selectedBox, ui.value);
            },
            change: function(event, ui) {
              self.setHue(self.$selectedBox, ui.value);
              self.saveBox(self.$selectedBox);
            }
          });
      },
      
      // ----------
      loadAll: function() {
        var ids = [];
        for (var i = 0; i < localStorage.length; i++) {
          var key = localStorage.key(i);
          if (key.indexOf("box-") !== 0)
            continue;
            
          var data = localStorage[key];
          var box = JSON.parse(data);
          var id = "#" + key;
          ids.push(id);
          
          var $box = $(id);
          if (!$box.length)
            $box = this.createBox(key);
    
          $box
            .css({
              left: box.left, 
              top: box.top
            }); 
            
          this.setHue($box, box.hue);
        }
        
        var found = ids.join(", ");
        $(".box").not(found).remove();
      },
      
      // ----------  
      clearAll: function() {
        $(".box").remove();
        localStorage.clear();
      },
      
      // ----------
      createBox: function(key) {
        var self = this;
        
        var index;
        if (key) {
          var parts = key.split("-");
          index = parseInt(parts[1], 10);
          this.nextBoxIndex = Math.max(index, this.nextBoxIndex) + 1;
        } else {
          index = this.nextBoxIndex;
          key = "box-" + index;
          this.nextBoxIndex++;
          this.offset += 20;
        }
        
        var html = "<div class='box box-shadow box-round'>"
          + "Drag me<br>"
          + "or <button class='change-color'>change color</button><br>"
          + "or <button class='remove'>remove</button>"
          + "</div>";
        
        var $box = $(html)
          .attr("id", key)
          .css({
            left: this.offset, 
            top: this.offset, 
            "z-index": index
          })
          .appendTo("body")
          .draggable({
            stop: function(event, ui) {
              self.saveBox($box);
            }
          });
          
        this.setHue($box, this.offset);
    
        $box.find(".change-color")
          .button()
          .click(function() {
            self.startDialogFor($box);
          });
          
        $box.find(".remove")
          .button()
          .click(function() {
            self.removeBox($box);
          });
          
        return $box;
      },
      
      // ----------
      saveBox: function($box) {
        var position = $box.position();
        localStorage[$box.attr("id")] = JSON.stringify({
          left: position.left, 
          top: position.top,
          hue: $box.data("hue")
        });
      }, 
      
      // ----------
      removeBox: function($box) {
        $box.remove();
        localStorage.removeItem($box.attr("id"));
      },
    
      // ----------
      startDialogFor: function($box) {
        var $dialog = $("#dialog")
          .dialog({
            resizable: false
          });
          
        var $colorButton = $box.find(".change-color")
        var buttonPosition = $colorButton.offset(); 
        $dialog.dialog("option", "position", [
          buttonPosition.left + (($colorButton.outerWidth() - $dialog.outerWidth()) / 2), 
          buttonPosition.top + ($colorButton.outerHeight() * 1.5)
        ]);
    
        this.$selectedBox = $box;
        this.$slider.slider("value", this.$selectedBox.data("hue")); 
      },
      
      // ----------
      setHue: function($box, hue) {
        $box.data("hue", hue);
        $box.css({
          "background-color": "hsl(" + hue + ", 100%, 75%)"
        });
      }
    };
    <!DOCTYPE html>
    <html>
    <head>
      <title>Local Storage</title>
      <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"     type="text/javascript"></script>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>
      <script src="Scripts/jquery.ui.touch-punch.min.js"></script>
      <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
      <link     href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
      <link href="Styles/site.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div id="dialog" title="Choose Hue">
        <div id="hue"></div>
      </div>
      <button id="new">New</button>
      <button id="clear">Clear</button>
      <aside id="info">
        <p>This is a demo of the HTML5 <a href="http://www.joelennon.ie/2011/02/11/basics-of-html5-localstorage/"     target="_blank">localStorage API</a> (with a little <a href="http://jqueryui.com/" target="_blank">jQuery UI</a> thrown in for good measure).</p>
        <p>Create some boxes, move them around, change their colors, then refresh the page to see that everything is remembered. Open this page in a second window and see that both windows stay in sync.</p>
    <p>Written by <a href="http://iangilman.com/" target="_blank">Ian Gilman</a> as part of a <a href="../index.html">series of demos</a> for the book <a href="http://www.manning.com/jackson/" target="_blank">HTML5 for .NET Developers</a>, co-authored by <a href="https://twitter.com/axshon" target="_blank">Jim Jackson II</a>; code <a href="https://github.com/axshon/HTML-5-Ellipse-Tours/blob/master/demos/storage/Scripts/main.js" target="_blank">available on Github</a>.</p>
      </aside>
      <script src="Scripts/main.js" type="text/javascript"></script>
    </body>
    </html>

2
  • Процитируйте свой код сюда, в SO.
    – mix
    6 мар 2016 в 19:23
  • @mix, у меня почему-то при нажатии на "Выполнить код" появляется алерт о том, что браузер не поддерживает Local Storage, но я в Хроме смотрю, и в консоли main.js и др. файлы не загружены. (s017.radikal.ru/i412/1603/44/73a090a37e44.png) (s015.radikal.ru/i332/1603/ba/3c6c94af434e.png) 6 мар 2016 в 21:42

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.