月度归档:2013年09月

display box-阿里巴巴前端在线笔试题

下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

已知HTML结构是:
<div>
<div>column 1</div>
<div>column 2</div>
<div>column 3</div>
</div>

在网上找到如下一种写法:
<html lang=”en” >
<head>

<title>demo</title>

<style type=”text/css”>
*{
margin:0;
padding:0;
}

.box{
width:100%;

background:green;
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
overflow:hidden;
-webkit-box-orient:horizontal;
}

.item{
-moz-box-flex:1; /* Safari 和 Chrome */
-webkit-box-flex:1; /* Safari 和 Chrome */
box-flex:1; /* Safari 和 Chrome */
height:60px;
background:gray;
margin:10px 0 ;
}
.item:first-child{
width:200px;
-webkit-box-flex:0; /* Safari 和 Chrome */
margin:10px;

}
.item:last-child{
margin:10px;
}
</style>
</head>
<body >
<div class=”box”>
<div class=”item”>column 1</div>
<div class=”item”>column 2</div>
<div class=”item”>column 3</div>
</div>

</body>
</html>

效果如图:

关键点有两个:

1.css3的box-flex属性:

box-flex 属性规定框的子元素是否可伸缩其尺寸。它将规定框的子元素按比例划分。在这个例子里,column1划分的宽度为0,column2和column3划分的宽度都为1,所以column2和column3是等宽的。column1的宽度由固定宽度决定。

2.css3选择器

box里的三个div的class都是item,所以用了:first-child,:last_child选择器

 

 

PHP 时间处理

1.计算两个日期的时间差

2.获得某一天之后n天的日期

 

aaa云主机上部署一个演示网站步骤记录

项目进行一大半,需要演示给客户看,于是找了一个云主机,叫aaa云主机。我买的主机是centos系统,并已安装mysql-5.0.95,httpd-2.2.3,php-5.2.17。也就是环境已经配好,我只需把网站复杂上去,配置好apache就行了。

但是我应该把网站代码放到那个目录下呢?因为我没有域名用于演示只用,不能像云主机提供方建议的方式创建网站,所以只能另寻他路了。还好,云主机提供的phpmyAdmin服务就是一个web服务,而且是可用的,我需要的就是他的端口,我希望我的网站也可以通过这个端口访问。于是我将我的网站代码复制到phpmyAdmin的同级目录下。这个目录正是apache配置的DocumentRoot。

然后导入数据库,导入数据库的时候要注意,由于的我的网站使用的是utf-8编码,在sql文件开头应加一句“SET NAMES UTF8;”,这样就可以是数据库插入数据项时使用的编码是utf-8的,避免中文乱码现象。当然还有修改代码的数据库连接文件,至少数据库名和密码是需要修改的。

这样简单的操作之后,我发现我只能访问我们网站的登录首页,而不能进入用户界面,原因是我们用了url重写机制,所以我们还需修改apache的配置文件/etc/httpd/conf/http.conf,将AllowOverride设置为All,一共有两处,一处是<Directory>里,

最后我们需要把.htaccess放到codeigniter框架的application目录下,告诉apache重写规则。

以上是部署的过程,希望下次部署能用到。遇到问题还得边做边解决。

参考文章:.htaccess中的apache rewrite规则详解 http://logo32.iteye.com/blog/1312421

Apache2.2中文文档  http://www.phpchina.com/resource/manual/apache/mod/mod_rewrite.html

angularjs学习笔记(3)–i18n使用

项目中用到angular-ui-bootstrap插件中的datepicker,可是datepicker显示的星期和月份是英文的,我需要他们都显示成中文的,最简单的方法就是用angularjs的i18n(Internationalization, 简称i18n)。
官方文档告诉我们,我们只需引入相应的local文件就好了,例如我要引入中文的i18n文件,只需引入angular-locale_zh-ch.js。然后将ngLocal模块注入我的当前工作模块即可。

其中angular-locale_zh-ch.js如下所示:

ngLocal就是一个模块,支持日期,数字和货币的国际化和本地化。另外,AngularJS还通过ngPluralize指令支持本地多元化。看下面这个例子:

https://github.com/angular/angular.js/blob/master/i18n/e2e/localeTest_zh.html

localTest_cn.html:(很抱歉目前html代码只能贴图,一时没找在wordpress里贴html代码而html特殊符号显示正常的方法,因为尖括号就是典型的html特殊符号。)

 

还有一种方法就是自定义i18n,毕竟官方给的i18n支持的本地化仅作用于日期,数字和货币。看下面的例子。

http://jsfiddle.net/7zdpa/
index.html

app.js

效果如图

angularjs学习笔记(2)–directive 理解$apply $watch

directive是angularjs扩展html标签的方式,它通过自定义属性,元素名称,类或声明来触发一个html行为或者说是DOM的变化。
directive的运行机制是这样的:

该机制的详细描述见官方文档conceptual Overview http://docs.angularjs.org/guide/concepts
需要注意的是大多数情况下(如在控制器,服务中),$apply都已经被用来处理当前事件的相应指令执行过了。只有当你使用自定义的事件回调或者是使用第三方类库的回调时,才需要自己执行$apply。
看下面的例子。
index.html:

app.html

运行结果如下:

这个时候,我们的directive只有link函数。在link函数里,默认的,我们能获得scope,element和attrutes。但是我们还不能把active类应用于按钮。
如果用$watch来观测表达式的变换和$apply来将变换传播给view。
app.js改为如下:

结果如下:

我们看看这个例子里按钮的点击事件是怎样绑定到视图的:
1.在编译阶段:button上的ng-modelg给绑定一个keyup事件;{{options.xxx}}变量通过$watch来接受鼠标所选择按钮,并将options对应的值改变,并给按钮添加或移除active样式。
2.在执行阶段:点击一个按钮后释放,就会触发button的keyup事件;然后调用$apply(“options.xxx = ‘X’;”)来更新处于AngularJS执行上下文中的模型;AngularJS将 options.xxx=’X’应用到模型上;$digest 循环开始;$watch 列表检测到了options.xxx值的变化,然后通知 ngModel.$modelValue变量来获得改变的值,更新{{options.xxx}}和相应的选择状态。用function(modelValue)这个回调函数来改变相应button的样式;AngularJS退出执行上下文,然后退出Javascript上下文中的keyup事件;
浏览器以更新的文本重渲染视图。

参考文章:watch how the $apply runs a digest http://www.cnblogs.com/rubylouvre/p/3268238.html
angularjs 移除不必要的$watch http://www.cnblogs.com/whitewolf/p/angularjs-remove-unused-watch.html
Getting started with AngularJS Directive http://suhairhassan.com/2013/05/01/getting-started-with-angularjs-directive.html#.UjXcRdKmger
AngularJS开发指南04:核心概览: http://www.angularjs.cn/A00q
AngularJS文档 http://docs.angularjs.org/guide/scope http://docs.angularjs.org/guide/concepts
directive tutorial http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/