yjxf8285@qq.com

HTML/CSS

给TR加边框的问题

Posted By 刘晓帆 | 3,190 views

遇到需要给TR加边框的需求,一定很头疼,因为目前还没发现有什么完美的方法解决这个问题,为了兼容性最后我只能选择给TD上下加边框,然后用JS判断第一个TD和最后一个TD的左右边框。
如果不考虑IE6和IE7的话用下面的最简单方法也可以,只是谷歌和火狐有点区别,还有一点小闪动现象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给tr加边框</title>
<style type="text/css">
body{ padding: 10px; }
.tablewarp{ border:solid 1px #ccc;padding: 2px; }
.otable{ width: 100%; border:none; border-collapse:collapse; }
.otable tr{border-top:solid 1px transparent; }
.otable tr:hover{ border:solid 1px blue; background: #eee; }
.otable tr td{ border:none;

Read More

HTML/CSS

行级元素和块级元素

Posted By 刘晓帆 | 1,646 views

整理一下:
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素”a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。
块元素(block element)
* address – 地址
* blockquote – 块引用
* center – 举中对齐块
* dir – 目录列表
* div – 常用块级容易,也是css layout的主要标签
* dl – 定义列表
* fieldset – form控制组
* form – 交互表单
* h1 – 大标题
Read More

JavaScript

数字英文长度记为1,中文记为2

Posted By 刘晓帆 | 4,630 views

你早晚会用到的,用CSS来控制文字长度毕竟不是什么需求都能满足,现在后台也不管字符长度截取了,只能用JS来截取字符串了。

/**
* 返回字符的字节长度(汉字算2个字节)
* @param {string}
* @returns {number}
*/

var getByteLen = function (val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
Read More

Plugins/Tools

webstorm快捷键大全(亲自整理)

Posted By 刘晓帆 | 47,322 views

webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目。
今天整理了一些webstorm比较实用的快捷键:

Ctrl+/ 或 Ctrl+Shift+/
注释(// 或者/*…*/ )

Shift+F6
重构-重命名

Ctrl+X
删除行

Ctrl+D
复制行

Ctrl+G
查找行

Ctrl+Shift+Up/Down
代码向上/下移动。

F2 或Shift+F2
高亮错误或警告快速定位

写代码,按Tab
生成代码

选中文本,按Ctrl+Shift+F7
高亮显示所有该文本,按Esc高亮消失。(因为这个功能我就可以发放心的放弃sublime了)

Ctrl+B或Ctrl+鼠标左键单击
快速打开光标处的类或方法,(NB的功能)

Read More

HTML/CSS

火狐浏览器图片加载失败不显示占位符的解决方法

Posted By 刘晓帆 | 2,407 views

很多web开发人员都喜欢使用火狐浏览器来调式页面,也包括我,当然我也喜欢chrome调css更舒服,firefox调js比chrome舒服(看断点和json界面好一些)。还有各自的控制台信息也有不同,报错的时候可以同时看一下有时候不一定哪个浏览器的错误信息更定位准确一些。
废话说了不少,接下来是重点了,firefox最不爽的一个地方就是图片加载失败不显示占位符这让我们这些做布局的人情何以堪,不明白浏览器的开发人员为什么要这样做,而且还不能设置。
解决办法就是自己定义一个样式文件放到配置目录下面。
1. 新建一个userContent.css。内容如下:
[css]/*
*显示缺失图像占位符
*/
@-moz-document url-prefix(http),url-prefix(file)
{
img:-moz-broken
{
-moz-force-broken-image-icon: 1 !important;
width: 24px;
height: 24px;
}
}[/css]
2.把这个css文件放到你的配置目录下面
xp用户路径地址:C:\Documents and Settings\用户名\Application Data\Mozilla\Firefox\Profiles\不固定字符串.default\chrome
win7用户路径地址: C:\Users\用户名\AppData\Roaming\Mozilla\Firefox\Profiles\不固定字符串.default \chrome
PS:如果你的路径里面没有chrome这个文件夹就自己手动新建一个,我的电脑就没有,最后重启浏览器就OK了。

Read More
  • 火狐浏览器图片加载失败不显示占位符的解决方法已关闭评论
  • over 3 years ago

JavaScript

jQuery对象和DOM对象的相互转换

Posted By 刘晓帆 | 801 views

在讨论jQuery对象和DOM对象的相互交换之前,先约定好定义变量的风格。如果获取的对象是jQuery对象,那么在变量前加上$,例如:
var $variable = jQuery对象;
如果获取的是DOM对象,则定义如下:
var variable = DOM对象;
1.jQuery对象转成DOM对象
jQuery对象不能使用DOM中的方法,但是如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不实用DOM对象的时候,有以下两种处理方法。jQuery提供了两种方法将一个jQuery对象转换成DOm对象,即[index]和get(index).
(1)jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象。
jQuery代码如下:
[js]var $cr = $("#cr"); //jQuery对象
var cr = $cr[0] //DOM对象
alert(cr.checked) //检测这个checkbox是否选中了[/js]
(2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。
jQuery代码如下:
[js]var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked)[/js]
2.DOM对象转换成jQuery对象
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,方式为$(DOM对象)。
jQuery代码如下:
[js]var cr = document.getElementByID("cr"); //DOM对象
Read More

JavaScript

jQuery的on()方法支持的所有事件

Posted By 刘晓帆 | 1,018 views

自从jQuery添加了on()和off()方法之后,基本跟事件有关的操作我不会再使用其他诸如$(‘xxx’).click(function(){});之类的了。
不过jQuery的api里面没有说on里面到底可以绑定多少个事件,今天看jQuery1.8.3的源码无意间发现了这些,很开心~
下面就把on里面支持的事件列出来,共享给大家:
blur
focus
focusin
focusout
load
resize
scroll
unload
click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter
mouseleave
change
select
submit
keydown
keypress
keyup
error
contextmenu

Read More

JavaScript

JS主流的“类”的写法

Posted By 刘晓帆 | 1,014 views

js其实没有类的概念,不过业界人士一般都使用构造函数来写JS的“类”(潜规则)。
[js]/**
* 定义一个MyClass的类(首字母大写)
* @param opts
* @constructor
**/
var MyClass = function(opts) {
opts = $.extend({
"element": null, //容器
"listPath": "/attach_html/getAttachImgFilesOfIReceive" //路径地址
}, opts);
this.opts = opts; //定义属性
this.init(); //执行初始化方法
};
//方法放在原型下面,私有方法命名加下划线
$.extend(MyClass.prototype, {
//初始化
"init": function() {
var

Read More

Plugins/Tools

Sublime Text 3 目前支持的插件列表

Posted By 刘晓帆 | 4,098 views

以下是截止到今天 2013年8月2日 Sublime Text 3 目前支持的插件列表:
(为了避免将来有人搜到这篇文章,看到的结果不是最新的,所以特别说明一下~)

ADBView
AdvancedNewFile

Plan to add some enhancements to the ST3 branch, though master is compatible with both ST2 and ST3.

Andrew
AngularJS
AutoBackups
Better CoffeeScript
Case Conversion
CheckBounce
CodeFormatter
ColorPicker
CompleteSharp

Project Discontinued
Read More