Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Switch控件制作(ChromeOnly)

  在表单操作中经常会出现一些需要选项,但选项很少的场景。比如设置一个东西是否开启则有“开启”和“关闭”这两个选项,我们可以在前面放一个描述,然后用一个checkbox的状态来表示“开启”和“关闭”。但这种设计并不人性化,所以需要更加一目了然的Switch控件。
  实际上这就是一个按钮,点击后按钮上的文字或其它样式发生变化而已,并不是什么非常复杂的功能。由于这几天一直在做ChromeOnly的东西,所以这篇也继续使用ChromeOnly的做法。
<base href="http://www.web-tinker.com/files/" />
<script src="widget-switch.js"></script>
<style>
widget-switch {font:14px/1.25 微软雅黑;}
</style>
<widget-switch>
  <widget-option value="on">开启</widget-option>
  <widget-option value="off" selected>关闭</widget-option>
</widget-switch>
  其中widget-switch.js的代码在这里 var HTMLWidgetDatetime=document.registerElement("widget-switch",{
  prototype:{
    createdCallback:function(){
      var that=this;
      var root=this.webkitCreateShadowRoot();
      var input=document.createElement("input");
      input.type="button";
      root.appendChild(input);
      var cursor=0,children=this.children;
      var willChange,selected;
      //事件
      input.addEventListener("click",click);
      function click(e){
        if(selected)selected.removeAttribute("selected");
        selected=children[cursor++];
        selected.setAttribute("selected","selected");
        input.value=selected.textContent;
        if(cursor>=children.length)cursor=0;
        clearTimeout(willChange);
        willChange=setTimeout(function(){
          that.change();
        });
        if(e)e.stopPropagation();
      };
      this.addEventListener("click",function(){
        click();
      });
      //属性接口
      Object.defineProperty(this,"value",{
        get:function(){return selected.getAttribute("value");},
        set:function(e){
          for(var i=0;i<children.length;i++)
            if(children[i].getAttribute("value")==e)
              cursor=i,click(),i=0/0;
        }
      });
      //默认项
      (function(){
        var o=this.querySelector("[selected]");
        if(!o)return click();
        this.value=o.getAttribute("value");
      }).call(this);
      //样式
      this.style.display="inline-block";
      var style=document.createElement("style");
      style.textContent=(function(){/*
        input {
          margin:0px;vertical-align:top;font-size:14px;
          outline:none;font:inherit;
          width:inherit;height:inherit;
        }
      */}).toString().replace(/^.+?\/\*|\*\/\}\s*$/g,"");
      root.appendChild(style);
      clearTimeout(willChange);
    },__proto__:{
      get name(){return this.getAttribute("name");},
      set name(){this.setAttribute("name",e);},
      change:function(){
        var e=document.createEvent("Events");
        e.initEvent("change",true,true);
        this.dispatchEvent(e);
      },__proto__:HTMLElement.prototype
    }
  }
});
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^