css三自定义弹出窗口功效,获取html5的data属性实现方式

本文实例为我们享用了js自定义弹出窗口功能展现的有血有肉代码,供大家参谋,具体内容如下

自己原先一向以为只好用jquery的data()来博取

使用 data-* 属性来松开自定义数据,data-自定义

  1. Html 实例

    • Owl
    • Salmon
    • Tarantula

贰.浏览器扶助
 IE    Firefox   Chrome     Safari          Opera
支持   支持        支持           支持             支持

三.概念和用法
data-* 属性用于存款和储蓄页面或应用程序的私人民居房自定义数据。
data-* 属性赋予大家在享有 HTML 成分上安置自定义 data 属性的力量。
累积的(自定义)数据可见被页面包车型客车 JavaScript
中行使,以创设越来越好的用户体验(不举办 Ajax 调用或劳动器端数据库查询)。
data-* 属性包括两有的:
属性名不应当包涵别的大写字母,并且在前缀 “data-”
之后必须有起码2个字符
属性值能够是自便字符串
讲授:用户代理会完全忽视前缀为 “data-” 的自定义属性。

语法
<element data-*=”somevalue”>
属性值
值 描述
somevalue 规定属性的值(以字符串)。

HTML adta-*属性

肆.增大消息
HTML标签能够加多自定义属性来积攒和操作数据。但诸如此类做会产生html语法上不合乎Html标准。

HTML五号正楷字式里扩大了两个自定义data属性,自定义data属性的用法极其的简短,就能够往HTML标签上加上放4以
“data-“发轫的属性,那个属性页面上是不显示的,它不会潜移默化到您的页面布局和风骨,但它却是可读可写的。

上边包车型地铁一个代码片段是二个有效的HTML五符号: 
<div id=”item” data-id=’123′>11111</div>
而是,怎么来读取这一个多少吧?你当然能够遍历页面成分来读取你想要的性质,但jquery已经停放了点子来操作这个属性。使用jQuery的.data()方法来拜会那几个”data-*”
属性。个中三个方法正是 .data(obj),那么些格局是在
jQuery一.四.3本子前边世的,它能再次回到相应的data属性。
譬如,你能够用上面包车型大巴写法读取 data-id属性值–1二3: 
var myid= jQuery(“#item”).data(‘id’);
你还能在”data-*” 属性里采用json语法,
<div id=”item” data-id='{“game”:”on”}’></div>
您能够经过js直接待上访问那几个数额,通过json的key值,你能获得相应的value: 
var gameStatus= jQuery(“#item”).data(‘id’).game;
您也能够经过.data(key,value)方法直接给”data-*”
属性赋值。3个重中之重的您要留意的思想政治工作是,这几个”data-*”
属性应该和它所在的成分有必然的关联,不要把它当成存放放肆东西的仓库储存工具。就算”data-*”
是HTML5才面世的习性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你依然能够使用.data(obj)方法来操作”data-*”
数据。

data-* 属性来放置自定义数据,data-自定义 一.
Html 实例 ulli data-animal-type=”bird”Owl/lili
data-animal-type=”fish”Salmon/lili
data-animal-type=”spider”Tarant…

效果图:

哈哈 是小编太弱了

图片 1

<!DOCTYPE html>
<html>

<head>
  <title>dataset</title>
  <meta charset="utf-8">
</head>

<body>
  <div id='div' data-index='demo'>
  </div>
</body>
<script type="text/javascript">
var a = document.getElementById('div');
console.log(a)
console.log(a.dataset.index)//demo
</script>

</html>

源码:

一向用dataset就可以收获到DOM成分的data属性

1.demo.jsp

好呢,还足以 用js的获得属性的章程getAttribute()

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>自定义弹出窗口</title>
  <script type="text/javascript" src="js/myLayer.js"></script>
  <style type="text/css">
    button{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      background-color: blue;
      color: red;
      border-radius: 5px;
      -webkit-box-shadow: 2px 2px 2px gray;
      -moz-box-shadow: 2px 2px 2px gray ;
      box-shadow: 2px 2px 2px gray ;
    }
    button:hover{
      background-color: green;
      cursor: pointer;
    }
  </style>
  <script type="text/javascript">
    function openWindow() {
      new MyLayer({
        top:"10%",
        left:"10%",
        width:"80%",
        height:"80%",
        title:"我的标题",
        content:"操作成功"
      }).openLayer();
    }
  </script>
</head>
<body>
  <button type="button" onclick="openWindow()">打开弹窗</button>
</body>
</html> 
a.getAttribute('data-index')

==>"demo"

2.myLayer.js

上述那篇js
获取html5的data属性完成方式就是笔者分享给大家的全部内容了,希望能给大家贰个参照,也冀望我们多多协助脚本之家。

/**
 * Created by zhuwenqi on 2017/6/16.
 */
/**
 * @param options 弹窗基本配置信息
 * @constructor 构造方法
 */
function MyLayer(options) {
  this.options = options ;
}
/**
 * 打开弹窗
 */
MyLayer.prototype.openLayer = function () {
  var background_layer = document.createElement("div");
  background_layer.style.display = "none";
  background_layer.style.position = "absolute";
  background_layer.style.top = "0px";
  background_layer.style.left = "0px";
  background_layer.style.width = "100%";
  background_layer.style.height = "100%";
  background_layer.style.backgroundColor = "gray";
  background_layer.style.zIndex = "1001";
  background_layer.style.opacity = "0.8" ;
  var open_layer = document.createElement("div");
  open_layer.style.display = "none";
  open_layer.style.position = "absolute";
  open_layer.style.top = this.options.top === undefined ? "10%" : this.options.top;
  open_layer.style.left = this.options.left === undefined ? "10%" :this.options.left;
  open_layer.style.width = this.options.width === undefined ? "80%" : this.options.width;
  open_layer.style.height = this.options.height === undefined ? "80%" : this.options.height;
  open_layer.style.border = "1px solid lightblue";
  open_layer.style.borderRadius = "15px" ;
  open_layer.style.boxShadow = "4px 4px 10px #171414";
  open_layer.style.backgroundColor = "white";
  open_layer.style.zIndex = "1002";
  open_layer.style.overflow = "auto";
  var div_toolBar = document.createElement("div");
  div_toolBar.style.textAlign = "right";
  div_toolBar.style.paddingTop = "10px" ;
  div_toolBar.style.backgroundColor = "aliceblue";
  div_toolBar.style.height = "40px";
  var span_title = document.createElement("span");
  span_title.style.fontSize = "18px";
  span_title.style.color = "blue" ;
  span_title.style.float = "left";
  span_title.style.marginLeft = "20px";
  var span_title_content = document.createTextNode(this.options.title === undefined ? "" : this.options.title);
  span_title.appendChild(span_title_content);
  div_toolBar.appendChild(span_title);
  var span_close = document.createElement("span");
  span_close.style.fontSize = "16px";
  span_close.style.color = "blue" ;
  span_close.style.cursor = "pointer";
  span_close.style.marginRight = "20px";
  span_close.onclick = function () {
    open_layer.style.display = "none";
    background_layer.style.display = "none";
  };
  var span_close_content = document.createTextNode("关闭");
  span_close.appendChild(span_close_content);
  div_toolBar.appendChild(span_close);
  open_layer.appendChild(div_toolBar);
  var div_content = document.createElement("div");
  div_content.style.textAlign = "center";
  var content_area = document.createTextNode(this.options.content === undefined ? "" : this.options.content);
  div_content.appendChild(content_area);
  open_layer.appendChild(div_content);
  document.body.appendChild(open_layer);
  document.body.appendChild(background_layer);
  open_layer.style.display = "block" ;
  background_layer.style.display = "block";
};

您可能感兴趣的稿子:

  • html五的自定义data-*个性和jquery的data()方法的选择示例
  • jQuery中利用data()方法读取HTML伍自定义属性data-*实例
  • jquery操作HTML5
    的data-*的用法实例分享

上述就是本文的全体内容,希望对大家的就学抱有帮衬,也冀望我们多多帮忙脚本之家。

你也许感兴趣的篇章:

  • 多个不普及的 HTML伍实用新特色简要介绍
  • jQuery中应用data()方法读取HTML伍自定义属性data-*实例
  • html5的自定义data-*品质和jquery的data()方法的行使示例
  • 关于HTML5的data-*自定义属性的总括

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注