Loading

HTML5 detail展开收缩,抛弃JS

作者:kevin   分类:前端乱炖   标签:HTML5    

目前只有Chrome版本12以上和Safari支持,IE,火狐,欧鹏都不支持。这个效果经常使用,但它总是用Javascript实现的。

代码结构如下:

<details open>
	<summary>展开/收缩</summary>
	这里是展开的内容
</details>

open表示默认展开

它允许我们在点击summary标签时显示和隐藏details里的其他内容。

不能嵌套使用。

summary标签会自动有个箭头,当你点击它时,下面的附加信息将会呈现,再次点击则隐藏。

FAQ页面中经常使用这个功能。

兼容 ie, firefox, chrome的复制内容到剪切板代码

作者:kevin   分类:前端乱炖   标签:兼容  剪切板    

此方法是从Discuz!里扒出来的。

原理:用 onmouseover 事件往 flash 中传递数据。

 

JS:

var clipboardswfdata; 
var setcopy_gettext=function(){ 
      clipboardswfdata=document.getElementById('data').value; 
      window.document.clipboardswf.SetVariable('str',clipboardswfdata); 
} 
var floatwin=function(){ 
      alert('copy success, '+clipboardswfdata); 
} 

阅读全文>>

常用css media

作者:kevin   分类:前端乱炖   标签:HTML5  CSS3    

/* 横屏 */
@media screen and (orientation:landscape){
      
}
/* 竖屏 */
@media screen and (orientation:portrait){
      
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
      
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
      
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
      
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
      
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
      
}
/* 打印 */
@media print{
      
}
1 2