CodeSky 代码之空

随手记录自己的学习过程

分类：HTML

粗体的玄学：谈谈 b 与 strong

2018-10-02 11:20分类: HTML评论: 2

之前遇到了在一段提示中需要加粗的问题，我们都知道，加粗有几种写法：

  • font-weight
  • <b>
  • <strong>

但是，这三者到底有什么区别——

在大多数场景下，我都会选择使用 font-weight，众所周知的是，HTML 应该与语义结合，如果是一般的加粗，那么使用 font-weight 刚刚好。

阅读更多 →

HTML5 Drag &amp; Drop 入门

2016-12-20 23:23分类: HTML评论: 0

以前在面试的时候正好做过一道拖动方块的题，那个时候没有用 HTML5 的 Drag & Drop 来做，其实用 Drag 来做的话会简单很多，不过当时写的文件现在估计早就找不到了，这次业务正好有这个需求，而且又不用考虑兼容性，理所当然的用起了这个。

Drag 的使用门槛还是相当低的，基本上只要知道什么时候触发什么事件就行了，因此这篇主要也像是过一遍 API。

用原生 JS 实现了以下效果：

阅读更多 →

HTML 给后端传入数组与check默认值

2015-12-26 22:58分类: HTML评论: 0

在使用checkbox中，很多时候，我们其实是要传入数组的，实际上，在

HTML中，只要将name设置为check[]即可。

这样在PHP中获取到的check就是一个数组的形式。

此外，有些时候，即使不勾选，我们依旧需要check拥有一个不勾选的默认值，然而，check默认只有勾选项才会传入值，解决方法挺有意思的：

1<input type="hidden" value="0" name="check[{{$list->id}}]">
2

加入一个相同name的hidden，如果不勾选，就会传入此值，否则，checkbox中的值将会覆盖原值，相当有趣。

阅读更多 →

AngularJS 让contentEditable支持ng-model

2015-08-20 14:21分类: HTML评论: 0

以前在一个网站上看到一个可以修改的框，以为是input，结果没想到是div，顿时觉得这是黑科技啊！！

然而并不是，后来我才知道有个attr叫做contentEditable，介绍见:http://www.w3school.com.cn/tags/att_global_contenteditable.asp

换言之这个so easy啦。

那么问题来了，AngualarJS里，我们可以在input里用ng-model来进行双向绑定，那么contentEditable呢？AngularJS目前并没有直接提供支持，但我们可以自己写。

使用一个directive就能搞定这个：

1/* 注册contentEditable支持ngModel */
2app.directive('contenteditable', function() {
3  return {
4    require: 'ngModel',
5    link: function(scope, element, attrs, ctrl) {
6      // view -> model
7      element.bind('blur', function() {
8        scope.$apply(function() {
9          ctrl.$setViewValue(element.html());
10        });
11      });
12
13      // model -> view
14      ctrl.$render = function() {
15        element.html(ctrl.$viewValue);
16      };
17
18      // load init value from DOM
19      ctrl.$render();
20    }
21  };
22});
23
阅读更多 →

HTML5/javascript video fullScreen全屏实现方式

2015-02-10 22:43分类: HTML评论: 0

在html5中，全屏方法可以适用于很多html 元素，不仅仅是video

代码如下：

1<!doctype  html>
2<html>
3<head>
4<meta charset="utf-8" />
5<title>全屏问题</title>
6<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
7<meta http-equiv="imagetoolbar" content="no"/>
8<meta name="apple-mobile-web-app-capable" content="yes"/>
9<meta http-equiv="X-UA-Compatible" content="IE=Edge">
10<style type="text/css">
11*{
12    padding: 0px;
13    margin: 0px;
14}
15 
16body div.videobox{
17    width: 400px;
18    height: 320px;
19    margin: 100px auto;
20    background-color:#000;
21}
22 
23body div.videobox video.video
24{
25width: 100%;
26    height: 100%;
27}
28 
29:-webkit-full-screen {
30 
31}
32 
33:-moz-full-screen {
34 
35}
36 
37:-ms-fullscreen {
38   
39}
40 
41:-o-fullscreen {
42   
43}
44 
45:full-screen { 
46  
47}
48 
49:fullscreen {
50  
51}
52 
53:-webkit-full-screen video {
54  width: 100%;
55  height: 100%;
56}
57:-moz-full-screen video{
58    width: 100%;
59    height: 100%;
60}
61    </style>
62</head>
63<body>
64  
65 
66<div id="videobox">
67      
68    <video controls="controls" preload="preload" id="video" poster="poster.jpg">
69      <source src="./movie.ogg" type="video/ogg" />
70      <source src="./movie.mp4" type="video/mp4" />
71      <source src="./movie.webm" type="video/webm" />
72      <object data="./movie.mp4" width="100%" height="100%">
73        <embed width="100%" height="100%" src="./movie.swf" />
74      </object>
75 
76    </video>
77    <button id="fullScreenBtn">全屏</button>
78</div>
79  
80  
81<script type="text/javascript">
82  
83//反射調用
84var invokeFieldOrMethod = function(element, method) 
85{
86   var usablePrefixMethod;
87   ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
88       if (usablePrefixMethod) return;
89       if (prefix === "") {
90           // 无前缀，方法首字母小写
91           method = method.slice(0,1).toLowerCase() + method.slice(1);   
92       }
93       var typePrefixMethod = typeof element[prefix + method];
94       if (typePrefixMethod + "" !== "undefined") {
95           if (typePrefixMethod === "function") {
96               usablePrefixMethod = element[prefix + method]();
97           } else {
98               usablePrefixMethod = element[prefix + method];
99           }
100       }
101   });
102    
103       return usablePrefixMethod;
104};
105    
106//進入全屏
107 function launchFullscreen(element) 
108   {
109    //此方法不可以在異步任務中執行，否則火狐無法全屏
110     if(element.requestFullscreen) {
111       element.requestFullscreen();
112     } else if(element.mozRequestFullScreen) {
113       element.mozRequestFullScreen();
114     } else if(element.msRequestFullscreen){ 
115       element.msRequestFullscreen();  
116     } else if(element.oRequestFullscreen){
117        element.oRequestFullscreen();
118    }
119    else if(element.webkitRequestFullscreen)
120     {
121       element.webkitRequestFullScreen();
122     }else{
123      
124        var docHtml  = document.documentElement;
125        var docBody  = document.body;
126        var videobox  = document.getElementById('videobox');
127        var  cssText = 'width:100%;height:100%;overflow:hidden;';
128        docHtml.style.cssText = cssText;
129        docBody.style.cssText = cssText;
130        videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
131        document.IsFullScreen = true;
132 
133      }
134   }
135//退出全屏
136   function exitFullscreen()
137   {
138       if (document.exitFullscreen) {
139         document.exitFullscreen();
140       } else if (document.msExitFullscreen) {
141         document.msExitFullscreen();
142       } else if (document.mozCancelFullScreen) {
143         document.mozCancelFullScreen();
144       } else if(document.oRequestFullscreen){
145            document.oCancelFullScreen();
146        }else if (document.webkitExitFullscreen){
147         document.webkitExitFullscreen();
148       }else{
149        var docHtml  = document.documentElement;
150        var docBody  = document.body;
151        var videobox  = document.getElementById('videobox');
152        docHtml.style.cssText = "";
153        docBody.style.cssText = "";
154        videobox.style.cssText = "";
155        document.IsFullScreen = false;
156    }
157  }
158document.getElementById('fullScreenBtn').addEventListener('click',function(){
159    launchFullscreen(document.getElementById('video')); 
160    window.setTimeout(function exit(){
161//檢查瀏覽器是否處於全屏
162if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)
163{
164exitFullscreen();
165}
166   },5*1000);
167},false);
168 
169</script>
170</body>
171  
172</html>
173
阅读更多 →

jQuery HTML5播放器整合多段播放思路

2014-11-29 16:40分类: HTML评论: 1

最近由于工作需要在研究HTML5的播放器，HTML5其实自带的已经很全了，但是当我们需要把切割的视频整合播放的时候就遇到了麻烦，这里我想到了一个思路，正好发现网上也提到了很多这种思路：

首先多播放器窗口，除了一个以外display:none，一般需求中两个就足够了。然后监听是否结束（关于监听，稍后再发一篇讲讲Javascript的监听问题），监听本P播放结束之后将下一个的链接赋值到隐藏的那个，交替display，进度条当然需要重做，这里就需要统计总时长了。

关于HTML5 Video的事件可以参考：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

当然理论上很好想，实际在用的时候还是遇到了一些问题： 最近由于工作需要在研究HTML5的播放器，HTML5其实自带的已经很全了，但是当我们需要把切割的视频整合播放的时候就遇到了麻烦，这里我想到了一个思路，正好发现网上也提到了很多这种思路：

首先多播放器窗口，除了一个以外display:none，一般需求中两个就足够了。然后监听是否结束（关于监听，稍后再发一篇讲讲Javascript的监听问题），监听本P播放结束之后将下一个的链接赋值到隐藏的那个，交替display，进度条当然需要重做，这里就需要统计总时长了。

关于HTML5 Video的事件可以参考：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

当然理论上很好想，实际在用的时候还是遇到了一些问题：

阅读更多 →

bootstrap激活tooltip

2014-02-18 19:41分类: HTML评论: 0

bootstrap官方帮助说： 出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须自己初始化他们。

初始化 在需要使用tooltip的元素里加上：

1onMouseOver="$(this).tooltip('show')"
2

不然光靠进入js还是没办法的。然后设置上data-toggle="tooltip"，设置好title属性，就OK了

阅读更多 →

javascript 返回上一页

2014-02-18 17:56分类: HTML评论: 0

用到的时候就搜索系列：

1javascript:history.go(-1)
2

加在button上加点击时间就可以当传送门，实际上也就相当于浏览器的后退按钮：

1    <button type="button" onclick="javascript:history.go(-1)">返回</button>
2
阅读更多 →
共 16 篇文章，2 页