HTML5和CSS3实例教程总结(推荐)


Posted in HTML / CSS onJuly 18, 2016

关于onclick的行为与内容分离

1.通过链接触发弹出窗口方式 (不推荐使用此方法!!!)

XML/HTML Code复制内容到剪贴板
  1. <a href='#'    
  2.     onclcik = "window.open('holiday_pay.html',WinName,'width=300, height = 300');">  
  3. Holiday Pay    
  4. </a>  

如果JS被禁用链接无法引导用户进入对应页面,不要为href属性赋"#"及类似的值

2.普通情况

XML/HTML Code复制内容到剪贴板
  1. <a href='holiday_pay.html'    
  2.     onclcik = "window.open(this.href,WinName,'width=300, height = 300');">  
  3. Holiday Pay    
  4. </a>  

3.0  大量重复链接,为每个链接分配可识别类名,通过使用jQuery为每个click事件分别添加监听器

XML/HTML Code复制内容到剪贴板
  1. <a href="holiday_pay" class="popup">Holiday pay</a>  
  2.   
  3. var links = $("a.popup");   
  4.   
  5. links.clcik(function(event){   
  6.    event.preventDefault();   
  7.    window.open($(this).attr('href'));      
  8. });  

3.1  通多自定义数据类型设置弹出窗口尺寸大小 

XML/HTML Code复制内容到剪贴板
  1. <a href ="holiday_pay.html"  
  2.     data-width="600"  
  3.     data-heigth = "400"  
  4.     title = "Holiday Pay"  
  5.     class = "popup"> Holiday pay </a>   
JavaScript Code复制内容到剪贴板
  1. $(function(){   
  2.    $(".popup").click(function(event){   
  3.        event.preventDefault();   
  4.        var href=$(this).attr("href");   
  5.        var width = $(this).attr("data-width");   
  6.        var height = $(this).attr("data-height");   
  7.        var popup = window.open(href,"popup","height="+height+",width="+width+"");   
  8. }) ;   
  9. });  

以上这篇HTML5和CSS3实例教程总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/liul0703/p/5677644.html

HTML / CSS 相关文章推荐
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 #HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 #HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 #HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 #HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 #HTML / CSS
HTML5之语义标签介绍
Jul 07 #HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 #HTML / CSS
You might like
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
一则python3的简单爬虫代码
2014/05/26 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
pytorch forward两个参数实例
2020/01/17 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Django缓存Cache使用详解
2020/11/30 Python
linux面试题参考答案(2)
2015/12/06 面试题
学生请假条
2014/04/11 职场文书
2015年元旦标语大全
2014/12/09 职场文书
青年文明号汇报材料
2014/12/23 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Golang中异常处理机制详解
2021/06/08 Golang
Python利用FlashText算法实现替换字符串
2022/03/31 Python
Python学习之迭代器详解
2022/04/01 Python