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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 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设计模式 Bridge (桥接模式)
2011/06/26 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
javascript判断office版本示例
2014/04/11 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
pandas重新生成索引的方法
2018/11/06 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
生产总经理岗位职责
2013/12/19 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
岗位职责风险点
2014/03/12 职场文书
毕业生入职感言
2015/07/31 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技