saber 酱的抱枕

Fly me to the moon

11/19
2016
学习

IE8的兼容性问题

浏览器份额

IE8无疑是个坑爹货,但XP上的IE最高只到IE8。根据百度统计流量研究院的数据,目前IE8在国内仍然占有15%的份额(不过这个图上的数据看得我怀疑人生)。

IE8的兼容性也是一个大坑。最近做一个网站,想要兼容IE8,于是翻出了许多遇到过和没遇到过的坑,略微整理一下。
Read More →

IE8的兼容性问题

11/17
2016
学习

sublime text3使用LiveReload插件热更新页面

sublime text3使用LiveReload插件热更新页面

前端在编辑页面时经常需要切换到浏览器里刷新页面来查看显示效果,不断地这个重复过程是非常坑爹的。sublime text3可以使用LiveReload插件来热更新页面,不过配置步骤就有点坑爹了,找了好几个教程才找到一个正确的的。

LiveReload插件是分两个部分的,需要在编辑器上和浏览器上分别安装(本文只讨论chrome浏览器)。只要能在浏览器里显示并且能用sublime text3编辑的本机文件都可以使用LiveReload插件来实现热更新。

LiveReload插件还有一个地方很强大,例如html里引用了外部的css、js文件,那么当你修改了这些外部文件后,浏览器里的这个html页面也会自动更新。这对于调整样式、调试js代码也是很方便的。

不过LiveReload插件似乎只能更新本机文件和本机url的文件,如果编辑一个www域名里的文件,并在浏览器里的该页面上启用热更新,能否生效呢(试了下不行。chrome上LiveReload的global.js里设置了ip为127.0.0.1,没法改。不过就算能改,也很可能遇到其他问题)。
Read More →

sublime text3使用LiveReload插件热更新页面

11/16
2016
学习

在低版本IE浏览器上实现getElementsByClassName()方法

javascript中的document.getElementsByClassName()方法是很实用也很常见的DOM选择器方法,然而IE8及以下版本的IE浏览器并不支持此方法(IE8都支持querySelector()方法了,却不支持getElementsByClassName()方法,实在匪夷所思)。

下面的代码可以在低版本IE浏览器中实现一个document.getElementsByClassName()方法。

if (!document.getElementsByClassName) {
	document.getElementsByClassName = function(className, element) {
		var children = (element || document).getElementsByTagName('*');
		var elements = new Array();
		for (var i = 0; i < children.length; i++) {
			var child = children[i];
			var classNames = child.className.split(' ');
			for (var j = 0; j < classNames.length; j++) {
				if (classNames[j] == className) {
					elements.push(child);
					break;
				}
			}
		}
		return elements;
	};
}

加入这份代码之后,就可以正常使用document.getElementsByClassName()方法了。

(也许遍历所有HTML标签开销比较大←_← 只要求兼容到IE8的话尽情的使用querySelector()方法和querySelectorAll()方法吧)

在低版本IE浏览器上实现getElementsByClassName()方法

11/15
2016
学习 软件

dedecms给文章增加自定义flag的办法

 dedecms给文章增加自定义flag的办法

dedecms的文章都可以设置flag,这样当我们调用时可以调用带有指定flag的文章。有时候我们可能需要添加自定义的flag(如上图的“显示到首页”就是自定义的)。

ps:虽然flag的说明文字可以写的比较长,但是在后台文章列表里只会显示每个flag的前两个字。

下面直接放百度经验的内容=。=
Read More →

dedecms给文章增加自定义flag的办法

11/14
2016
学习

在网页上添加百度分享功能

在网页上添加百度分享功能

如图,网站排版时做了分享按钮(图片、样式都是已经写好了的),之后需要加上功能,那我们使用百度分享的话应该怎么做呢?

首先可以参考百度的官方说明文档。这个文档也很好理解,只是在“自定义设置”部分容易让人迷糊。

其实像上图这样最简单、最常用的分享方式,不需要去管那么多设置项。以下是最小化的实现代码:

<div class="bdsharebuttonbox" data-tag="share_1">
	<a class="tsina" data-cmd="tsina"></a>
	<a class="tqq" data-cmd="tqq"></a>
	<a class="sqq" data-cmd="sqq"></a>
	<a class="renren" data-cmd="renren"></a>
</div>
<script>
	// 百度分享按钮设置
	window._bd_share_config = {
		"share": {} //如果样式已经自己写好了,那么只需要这一句即可
	}
	//加载百度分享js文件
	with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

html部分,外层容器的class="bdsharebuttonbox"是必须的。如果你页面上只有这一个分享区域,那么可以去掉data-tag="share_1"。
分享按钮必须是a标签,不然功能不会生效。
a标签的class属性不是必须的,可以不加或者设置成不同的。如果设置成百度分享允许的class的话,这个按钮会被自动加上一些样式。
a标签的data-cmd属性是必须的,它表示点击这个按钮后是要分享到哪里去。另外有了data-cmd属性后,这个a标签还会被自动加上title属性,如 title="分享到新浪微博" 。

剩下的是JavaScript部分,分享按钮设置里面只用写一句就行了(当然也可以按需要增加更多的设置)。底下“加载百度分享js文件”无需改动。

做完之后,分享按钮的功能就已经加上了。

ps:如果想知道自己分享的目标的代号是什么(a标签的data-cmd属性部分),可以查看分享媒体和标识对应表

在网页上添加百度分享功能

11/9
2016
学习

JavaScript捕获按键

在网页上,当按键被按下时,我们可以使用JavaScript来捕获到这个事件。

在JavaScript里,每个键都会有一个数字代码,我们可以使用JavaScript来查看按键对应的代码是什么。

document.onkeydown=function(event){
	var e = event || window.event;
	console.log(e.keyCode);
}

JavaScript捕获按键

10/29
2016
学习 软件

自动删除百度贴吧里的低粉丝数的粉丝

在百度贴吧里,有时候关注你的人里会有些无意义的小号或机器人账号(我就经常被机器人账号关注),通常他们的粉丝数很低(0或1),本工具可以通过这个条件来删除这些粉丝。

在greasyfork安装这个UserScript

你可修改setNum变量的值来修改设定数字。

本脚本自动执行,自动翻页,一直删除到最后一页为止。

删除完毕后请记得停用此脚本哦~

真正的粉丝……

自动删除百度贴吧里的低粉丝数的粉丝

10/22
2016
学习

修改 dedecms文件保存目录字段的长度

dedecms的栏目可以“文件保存目录”属性,这样栏目的ul就会使用这里设置的链接。这个字段在数据库里是dede_arctype表的typedir字段,但是它默认是char(60),这个长度对网址来说显然是太短了,如果网址超长就会被截断。如果需要,我们可以到数据库修改它的长度。
Read More →

修改 dedecms文件保存目录字段的长度

10/22
2016
学习

使用CSS3的user-select属性禁止选择元素

前段时间看到一个网站屏蔽了选择操作,禁用JavaScript也无效,后来终于发现是这个网页上设置了user-select属性,禁止了用户选取网页上的元素。

user-select是css3的属性,可以设置允许用户选择哪些元素以及是否允许选择等。现在要使用user-select属性,还需要加私有前缀,如下:

-ms-user-select
-moz-user-select
-webkit-user-select

-ms-user-select 可设置 4 个值:
auto – 如果该元素包含可编辑的文本(如输入元素或可编辑内容的元素),则可以选择文本。否则,元素内容是否可选择由父节点的值决定。
none – 不可以选择文本
text – 可以选择文本
element – 可以选择文本,但选择范围受元素边界的约束

-moz-user-select和-webkit-user-select:
auto   默认值,用户可以选中元素中的内容
none  用户不能选择元素中的任何内容
text   用户可以选择元素中的文本
element  文本可选,但仅限元素的边界内(只有IE和FF支持)
all   在编辑器内,如果双击/上下文点击发生在子元素上,改值的最高级祖先元素将被选中。

-moz-user-select还有个私有的值:-moz-none,它表示元素和子元素的文本将不可选,但是,子元素可以通过text重设回可选。

Read More →

使用CSS3的user-select属性禁止选择元素