广外隧道口Web后台（1）

2015-06-10

Material Design

最近在学Node的知识，学没一个星期又有一个项目要做了。
哇新的Cmd Markdown更新了苹果的字体看起来好舒服。
关键字：全屏背景字体图标 data-* 颜色插件 kindeditor
项目页面：Submit Activity

全屏背景

设计图用了个全屏背景：
正常屏幕（1366768)

1080P宽屏 (19801080)
1080P屏幕
是的我买了个显示器！好爽！

全屏背景的话可以用backgroud-size: cover;只不过兼容性有点问题，只支持IE9+。
具体是切一张2K的背景图，使用的时候在主内容外面加上：

1
2
3

<div class="superbg">
	<img src="images/bg.jpg" alt="">
</div>

设置这个层为fixed，100%显示，然后里面图片的高度的话有不同情况：

这里面有两个高度：.superbg和img

高度如果写成百分比是按照父元素的高度来计算的，所以img写成100%会完整显示图片，高度为父层的高度；如果不写就是默认auto，显示区域会自动截取，好像是从中间开始截取，图片就不完整了。
由于外层用了定位，所以必须明确设置高度，我就一刀切650px了=。=所以最后背景图片会有一定变形，不过看不出来啦哈哈哈。
可以用JS来先获取到里层img的高度，然后设置到外层的高度中，这样图片就不会变形了。不过没有这么做

不过用fixed的话还有其他问题。在正常屏幕下，这个层真的就是fixed的了，内容滚动的时候这个层不滚动，背景不会滚动，达不到设计图想要的下面是纯色的效果，就把这个fixed改成absolute了。
还有一点就是设置z-index为负值，后面的内容才不会被遮住。

字体图标

阿里巴巴字体图标：iconfont
昨天用的时候好像还没有这个阿里巴巴，话说功能和排版和icomoon好像啊~
几步打造您自己的图标字体
照着这个教程一步步来就可以了。不过设计师用了开源的图标库，有SVG格式，直接导入网站生成字体文件就OK了。
其实想用字体图标是因为需要图标变色。本来是做成雪碧图的，改变颜色就不方便。用了字体图标可以加上各种CSS属性，最喜欢的是transition，颜色也有渐变效果了。大小通过font-size。我用的时候先转成inline-block，设置好宽高。

data-*属性

不知道为什么网上很多说这个是HTML5特性=。= W3C写着所有浏览器支持，自己在IE7下也成功了。
这次用在了字数限制：
<input type="text" data-listen="true" data-charlimit="16" placeholder="活动标题">

var charListen = {
	init: function () {
		_charListen = this;
		_charListen.config = $("input:text[data-listen='true']");
		_charListen.setup();
	},
	setup: function () {
		_charListen.config.each(function () {
			var $this = $(this);
			var currentlength = 0;
			$this.bind('keyup keydown', function () {
				var $this = $(this);
				var str = '';
				var $alerttag = $this.next()
				var limit = $this.data("charlimit");
				str = $this.val();
				//显示
				$alerttag.css("opacity","1");
				//超过长度进行字符串截取
				if (str.length > limit) {
					$this.val(str.substr(0,limit));
				} else {
				//正则匹配前面的数字（当前的输入字数）
					var temp = $alerttag.text().replace(/^\d{0,2}/,str.length);
					$alerttag.text(temp);
				}
			}).bind("blur", function () {
				$(this).next().css("opacity","0");
			})
		})
	}
}

初始化的时候把所有input都执行了一遍这个函数。在html里存储数据感觉写JS特别方便~而且可以随时更改。如果纯JS实现的话初始化得到JS里面设置参数，还要判断不同输入框不同限制。
字符限制自己想到的就是字符串截取了，网上查了资料也是一样的想法。不过有个bug：因为中文用拼音的关系，输入的时候例如这样：这是广外这是广外zheshiguangwai，其实用户只是想再输入四个汉字，但是因为拼音的关系，会先输入拼音，这样很有可能后面的拼音打不出来因为被截取了=。=
这里的正则截取弄了我好长时间=。=。=。=

1	<span class="limit" >0/16</span>

在input后面是这个标签，其实我完全可以把会改变的这个0给个标签套起来，不过还是想算了别套太多标签直接正则获取斜杠前面的数字吧。
然后是这样：/^\d{0,2}/以数字开头，获取0~2位。完全和斜杠没关系。。搜索的时候是按照截取某个字符前的内容，然后发现很复杂而且不能用。什么时候再学一下正则吧。

颜色选择器

这个果断找了插件来用：iColorPicker
翻了一下源码发现竟然很短。。100行不到。好多行都是写CSS样式。
主要思路：

在选中的输入框中创建新的div#iColorPicker，主要内容就是一个table，里面有预定好的颜色16*7个，然后再创建一个div#iColorPickerBg,这个是全屏的fixed的div，给这个div绑定点击事件，把创建的div都隐藏掉
接下来是给div#iColorPicker添加各种样式。以上这些在第一个颜色输入框中初始化完成
然后在颜色输入框中添加背景颜色，数值为选中的颜色，再创建a标签，内容是色板的icon，可以定义这个icon的图片路径，在输入框之后添加
第一步中的点击事件是一个函数，传入两个id，一个是输入框的id，一个是色板icon的id。
函数的内容：点击的时候显示div#iColorPicker和div#iColorPickerBg，获取输入框的内容，传入色板中显示的数值并修改背景色。
接下来遍历获取色板中的每个tr元素，绑定鼠标移过事件：每个tr标签都已经带有自己的颜色属性：hx='f00'代表红色，然后就给各个内容赋值改变背景色；再绑定点击事件：隐藏色板，给内容赋值，返回点击的结点jQuery对象。

当时用的时候发现有一些不方便的地方：默认点击后给输入框添加背景色，太丑了太丑了。把这句话去掉。
后来希望点击后旁边的icon图标也能变相应的颜色，所以修改了源码添加了一点东西。
这种把源码都搞一遍的感觉真好哈哈哈

kindEditor

这又是一个插件：kindEditor。
其实没啥好说的，多看看文档就知道怎么弄了：

KindEditor.ready(function(K) {
	var options = {
		items :
		[
			'fontsize', '|', 'image'
		],
		fontSizeTable :
		[
			'16px','14px'
		],
		resizeType : 0,
		//IE11下失效
		pasteType : 1,
		uploadJson : '../php/upload_json.php',
		fileManagerJson : '../php/file_manager_json.php',
		allowFileManager : true,
		afterChange : function () {
			this.sync();
			$('#contentShow').html($('#editor').val());
		}
	}
    window.editor = K.create('#editor',options);
    $('iframe').contents().find('.ke-content').css("background-color","#e6e6e6")
});

然后根据需求，插件里面的字体只显示：小标题和段落，又去翻了这个源码，直接搜索关键字font很快就定位到了，自己加了一点判断，就OK了。
对了这里有个jQuery获取不同iframe下的元素的方法：$('iframe').contents().find('.ke-content')
好像哪个面试题问过这个。
然后里面也有事件处理啦，就能同步显示输入的内容了。
粘贴这个东西，我在网易云音乐里面复制了一些歌词过去，发现自动加载各种样式了。
后面这个后台还要再改一下，要确定传过去的内容和图片路径等等东西。

Biousco

未分类