纺锤形分割线用于仿真纸中间被剪开时的阴影效果，也就是中间咧开而两边收拢的情况。简单讲就是两头小，中间大。如下所示（请忽略中间的wow图标）：使用CSS3来实现这种效果，可以使用border-radius和box-shadow两个属性。首先我们需要一个DIV来容纳分割线。<div class="mask"></div>接下来我们利用class=mask的div来生成框阴影：box-shadow: 0 0 8px black;对照box-shadow的语法：这条语句表示模糊距离为8px，颜色为黑的框阴影，如下所示：我们得到的是等高的阴影，现在需要想办法把它变成由中间向两边渐渐变窄。设置该元素的border-radius刚好可以得到这样的弧度：border-radius: 125px/12px;上面的代码以斜杠分开的两个尺寸，表示该元素转角处圆弧的水平半径为125px，垂直半径为12px。显然是一个扁长的椭圆形。我们观察下，这个椭圆元素的下半边部分和我们想要的纺锤形有点像，只是需要把其余地方挡住即可。我们把该元素放到一个容器中，设置容器隐藏溢出内容（overflow:hidden），高度比分割线元素小几个px，并细调两者的相对位置，使得容器刚好可以遮挡掉不需要的部分。但这样需要使用2个元素，而且其关联性不明显，代码可维护性不高。因此我们使用伪元 ...继续阅读 (79)

有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制，而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用。书本的3D模型是所有商品中最为简单的，因为其本质上就是一个立方体（cube），只是带有封面/封底和左侧封条。所以要构造一个3D书本展示，问题就被分解为构造一个立方体+旋转+图片背景。1. 构造一个立方体要创建一个立方体，首先我们需要创建一个虚拟的三维视觉空间，这可以通过设置包容器元素的perspective属性获得。.stage { width: 200px; height: 260px; perspective: 1000px; perspective-origin: center center;// 缺省值，可忽略 }上述代码把元素放在距离观察点1000px的地方（Z轴向），并且在X/Y轴向上居中。<div class="stage"> <div class="cube"> <figure class="back"></figure> <figure class="top"></fi ...继续阅读 (115)

日食现象是月亮挡在了地球和太阳之间，也就是月亮遮挡住了太阳。所以要构造日食，我们需要2个对象：一个代表月亮，一个代表太阳。<div class="eclipse sun"></div> <div class="eclipse moon"></div>我们把整个日食过程分解为3个阶段：1. 缓慢移入 2. 短暂停留 3. 缓慢移出。在此期间，会产生3个彼此关联的动画。首先是月亮的位置移动，我们通过改变月亮的X坐标（left或right属性值）来实现（注意把太阳和月亮均设置成绝对定位）。其次太阳会逐步呈现出圆晕的光线效果，我们使用框阴影（box-shadow）来实现。box-shadow: 0px 0px 10px 5px #FFAD00;最后与此同步的是，整个页面背景要呈现一个变暗的效果，这个比较简单，改变body的background-color即可。剩下的事情就是针对以上阶段编写关键帧（keyframes）的CSS规则即可。你可以自己试试看。by iefreer ...继续阅读 (101)

我们在读纸质书的时候，经常用笔划波浪线来突出重点内容，以强化视觉感受。而在Web页面上，没有CSS3之前，我们只能用背景图片来实现类似功能，这当然不是个高效的方式，且难于维护和调整。比如你只是想调整下颜色、线条大小和倾斜的角度，你都得打开作图软件来折腾一下。现在我们可以使用CSS3伪元素及其背景渐变（gradient）来实现这一有趣而实用的效果。波浪线特征我们观察下波浪线，有这么2个基本几何特征：1. 波折线是重复的，可以被分解为若干相连的“角”形状2. 这些“角”的连接点处是平滑过渡的，不能出现毛刺，所以需要对顶点处做平滑处理对于（1），我们可以首先创建一个尖角形状（由一撇一捺2条短直线组成），然后使用x方向的repeat来重复。对于（2），我们可以使用渐变色，模拟人手划线时，在转弯处力道减弱，我们在尖角相交处使用相对淡色，构造出圆角的视觉感受。CSS3线性渐变我们注意到每个“角”都有2条边，如果以默认渐变轴（从上往下的一条垂直线）来看，左边的呈现45°倾斜，而右边的呈现315°倾斜。那么如何创建一个45°的倾斜线呢？我们很容易想到用rotate变换，但是rotate是作用于整个元素上的，在这里并不适用。我们换个思路，CSS3中的线性渐变（linear-gradient）可以完成上述要求，线性渐变的核心是渐变轴、起点终点和颜色值分布。通过设置渐变轴的角度为45°，我们可以得到倾斜 ...继续阅读 (103)

我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果，以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。用CSS3的伪元素实现这个效果很容易。先给出一个实例，我们在WOW站点页面左边栏实现了如下的效果（红框内）：我们再来看看具体实现。首先创建一个div元素容纳文本信息（可以包含更多元素），class取名为“狗耳朵”也就是卷角的意思：<div class="dog-eared-tip">put your tips here</div>然后编写如下的CSS代码：.dog-eared-tip{     padding: 7.5px 5px 7.5px 20px;     background: #DEAA2F;     font-size: 13px;     position: absolute;     text-align: center;     width: 100%;     color: black; } .dog-eared_tip:before, .work_tip:after {     conten ...继续阅读 (91)

弹性项目可以按弹性容器当前行的cross axis来对齐，和justify-content类似，但在垂直方向上。其中align-items属性用于弹性容器，而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性，包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。 （对于匿名弹性项目，align-self总是匹配对应弹性容器的align-items的值。）如果弹性项的cross-axis外边距是auto，align-self属性没有效果。align-items和align-self的语法如下：align-self属性取值auto时，将计算为其父元素的align-items值，或者为stretch如果没有父元素的话。对齐属性的取值定义如下：flex-start弹性项的cross-start margin的边紧挨着该行的cross-start的边（一般来说，就是挨着弹性容器顶部）。flex-end弹性项的cross-end margin的边紧挨着该行的cross-end的边（一般来说，就是挨着弹性容器底部）。center弹性项的margin box在该行的cross axis上居中（垂直居中对齐）。（如果该弹性行的cross size小于弹性项，将在两个方向上同时溢出。）baseli ...继续阅读 (91)

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。注意：弹性布局中有两个基本术语main axis和cross axis，一般情况下，我们可以把它们各自看作是屏幕上的行向和列向（但是严格讲，这和写模式有关）。那么main-start和main-end就可以分别被看作是弹性容器的左右边。justify-content语法如下：justify-content: flex-start | flex-end | center | space-between | space-around参数说明如下：flex-start弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。flex-end弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。center弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。space-between弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于fl ...继续阅读 (74)

弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：flex-flow: <flex-direction> || <flex-wrap>flex-direction: row（初始值） | row-reverse | column | column-reverseflex-wrap: nowrap（初始值） | wrap | wrap-reverseflex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式，下面的例子很直观的说明了各个属性值的区别：.flex-container { display: flex; } .flex-container.first { flex-flow: row; } /* Initial value. Main-axis is inli ...继续阅读 (112)

我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单，并且可以结合渐变实现更为漂亮的效果。因此使用图片实现五角星已经毫无必要（图片占用额外的请求，且数据量大。除非要支持低版本的桌面IE浏览器）。首先我们创建一个三角形，这通常是使用带大尺寸边线而零内容尺寸的元素来实现，代码示范：.tri { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid red; }第二步，我们使用伪元素:after和:before来克隆2个同样大小的三角形。.tri:after,.tri:before { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid red; }然后，我们在上述2个伪元素上分别应用不同的旋转变换：.tri:before { transf ...继续阅读 (76)

有3个属性和布局以及box的创建有关：'display', 'position' 和 'float'，彼此交互作用如下：如果'display'值为'none'，则'position' 和 'float'无作用。这种情况下，不生成box。否则，如果'position'值为'absolute' 或 'fixed', box被绝对定位，'float'的计算值为'none'，而'display'的值按下表设定。box的位置将由'top', 'right', 'bottom' 和 'left' 属性及其包容块所确定。否则，如果'float'的值不是'none', box是浮动的并且'display'的值按下表设定。否则，如果元素为根元素，'display'的值按下表设定（除了list-item指定值，该值被计算为'block'还是'list-item'，在CSS2.1中未定义。）否则，其余情况下'display'属性值就是其指定的值。其中inline-flex是CSS3弹性布局模块引入的新属性值。参考链接：1. https://www.w3.org/TR/css3-flexbox/#flex-containers2. https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flobyiefreer ...继续阅读 (112)

GoAgent是最新版本3.2.3，通过代理连接访问目标网站时，出现405错误：405. That’s an error. The request method POST is inappropriate for the URL /_gh/. That’s all we know.原因可能是同一IP地址访问频次受限引起的，因为代理IP在分享后被很多人使用。解决方法是更新IP列表。 ...继续阅读 (346)

网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道，构成显式网格。 当网格项目定位在这些界限之外，网格容器通过增加隐式网格线生成隐式网格轨道。 这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。 隐式网格轨道的尺寸由网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）属性来确定。网格自动流（grid-auto-flow）属性用来控制无明确位置的网格项的自动定位（auto-placement）， 一旦显式网格被填满（或者如果没有显式的网格），auto-placement也将导致隐式网格轨道的生成。自动生成行和列的尺寸：grid-auto-rows 和 grid-auto-columns 属性如果一个网格项被放到一个未明确定义尺寸的行或列中，隐式网格轨道将被创建来容纳它。 这在两种情况下会发生：通过显式定位到一个超出范围的行或列中，或是由自动定位算法创建额外的行或列。 网格自动列和网格自动行属性用来指定这样的隐式创建的轨道的大小。我们仍然通过实例来学习这个属性的用法：#grid { display: grid; grid-template-columns: 20px; grid-templat ...继续阅读 (88)

网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。比如下面的CSS规则：grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);表示有4列，第一列100px固定尺寸，第三列 max-content 代表刚好包含元素不溢出不换行的尺寸，剩下的2列都是弹性尺寸。按照弹性尺寸的计算规则，两者将均分（这两列的弹性系数相等，均为1）剩下的可用空间。完整示范代码：#grid { display: grid; width: 100%; grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr); } #areaA { background-color: lime; } #areaB { background-color: yellow; } #areaC { background-color: lime; } #areaD { background-color: orang ...继续阅读 (86)

CSS3引入了新的网格布局（grid layout），以适应显示和设计技术的发展（尤其是移动设备优先的响应式设计）。主要目标是建立一个稳定可预料且语义正确的网页布局模式，用来替代过往表现不稳定且繁琐的table、flow以及JS脚本混合技术来实现的网页动态布局。本文将简单而准确的介绍网格布局属性的基本概念和使用方法（摘自踏得网在线HTML5教程）。1. 概述网格模板区域（grid-template-areas）、网格模板行（grid-template-rows）和网格模板列（grid-template-columns），这3个属性共同显式定义了一个网格容器。而网格模板（grid-template）属性是一个用来同时设置这3个属性的速写（shorthand）。 grid items内容可能会超出显式网格，这时网格容器会自动生成隐式轨道（implicit track），这些隐式轨道的尺寸由 grid-auto-rows 和 grid-auto-columns 属性所确定。显式网格的大小是由网格模板区域定义的行/列数以及在网格模板行/网格模板列属性定义了尺寸的行/列数中的较大者决定的。 任何由网格模板区域定义的行或列但没有在网格模板行/网格模板列中定义尺寸，则由grid-auto-rows或grid-auto-columns属性来确定大小。如果没有定义显式轨道，显式网格依然在每 ...继续阅读 (68)

CSS sizing level3规范中，和布局尺寸相关内容，经常会出现min-content size和max-content size等术语。这需要分为两类：一类是和块元素相关，一类是和行内元素相关。1. min-content inline size最小内容行内尺寸表示在尽可能使用软性（即非硬性指定）包含技术（比如自动换行）后，刚好包含了元素内容而不出现溢出的尺寸。2. max-content inline size和min-content inline size不同，最大内容行内尺寸表示在不使用任何软性包含技术时，在单行内（除非使用硬性换行）刚好包含了元素内容而不出现溢出的尺寸。3. max-content block size 和 min-content block size对于块元素而言，这两者是等同的。4. max-content contribution 和 min-content contribution最大内容贡献和最小内容贡献分别对应于max-content, min-content size，只不过在此之上，还需要计算入内外边距（margin/padding）以及边界（border）的尺寸。理解这些术语，对于掌握CSS3新引入的网格布局，弹性布局技术都是有帮助的。自己试一试 有一个直观的印象。by iefreer ...继续阅读 (68)

CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器（或称组合选择器），分为后代选择器（Descendant combinator/Child combinators）和同级选择器（Sibling combinators）：其中后代选择器分以下3个：1. 空格。div p: 表示p是div的后代元素, div是p的祖先。该选择器选择所有div下的p后代元素。2. 箭头（>）。表示直系关系。div > p 表示div的儿子辈的元素。3. 星号（*）。表示隔代关系。div * p表示div的孙子辈及之后的元素。在线实例：http://wow.techbrood.com/fiddle/15759同级选择器分为以下2个：1. 加号（+）。表示紧随关系。h1 + h2: 表示紧跟在h1后面的h2元素。2. 波浪号（~）。表示后续关系。h1 ~ h2: 表示和h1元素同在一个父元素下的后续h2元素（中间可以隔着其他元素）。在线实例：http://wow.techbrood.com/fiddle/15761关于CSS3选择器参考阅读：http://techbrood.com/Guide/h5b2a?p=css-selectorshttp://techbrood.com/Guide/h5b2a?p=css-pseudo-classesby iefree ...继续阅读 (99)

CSS中的类（class）是为了方便过滤（即选择）元素，以给这类元素添加样式，class是定义在HTML文档树中的。但是这在一些情况下是不够用的，比如用户的交互动作（悬停、激活等）会导致元素状态发生变化，class对这些动态变化无能为力。为此，CSS引入了伪类（pseudo-class）的概念用来支持根据文档树以外的信息来过滤元素的能力。伪类是一个抽象类，本质上还是一个类，因此其主要作用仍然是用来选择元素而后设定具体的样式。伪类的定义使用：单冒号加上名称，如 mydiv:hover。伪类的选择对象可能会随着用户操作文档而发生变化，比如当用户删除某些节点后，会影响子元素（nth-child）伪类的选择。伪类选择元素的依据不是名称、属性或内容，而是根据特征（比如状态或顺序）。（:lang除外）伪元素（pseudo-element）是另外一个概念，其设计意图和伪类一样，是为了能支持根据文档树以外的信息来进行格式化。伪元素本质上是一个元素，只是它一般需要依附在一个已有元素上，作为这个元素的“部分”或“补充”。比如::first-line或::after。CSS2.1规范中引入的新的伪元素语法是双冒号::，但为了和历史版本兼容，一些之前引入的伪元素仍然可以使用单冒号语法。和伪类用来过滤元素不同，伪元素用来过滤内容或创建补充内容，在这些内容外包装一个虚拟的容器，然后应用特定的样式。我们可以在伪 ...继续阅读 (81)

在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。1. 问题现象我们先给出一个在线实例：http://wow.techbrood.com/fiddle/15438我们可以看到当给中间的 inline-block 元素p添加overflow: hidden属性后，其左右相邻元素被奇怪的向下拉动了一定的距离。2. 解决方法常用的解决方法是为上述inline-block元素添加vertical-align: bottom。你可以在上面的例子中在线测试下。3. 问题原因W3的规范对此行为有明确规定：The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible ...继续阅读 (92)

TinyMCE是一款主流在线HTML/Text编辑器，特定情况下需要设置成只读状态（比如用户访问权限受控时）。有两种方法：一种是通过配置在控件初始化时设置，另外一种是运行时设置。1. 通过配置在控件初始化时设置tinyMCE.init({ ... theme : "advanced", readonly : 1 });2. 在运行时设置编辑器iframe body的contenteditable属性为falsetinymce.activeEditor.getBody().setAttribute('contenteditable', false);by iefreer ...继续阅读 (64)

使用Bootstrap3的时候，好处是有很多现有的控件可以使用，坏处是个性化起来会遇到不少麻烦，单独的静态页面显示正常的， 引入Bootstrap后，有些类/通用界面组件的样式会被覆盖。想去除默认风格或定制input输入框的边框风格，可以使用如下代码：input:focus { outline: none; border-color: #cfdc00; box-shadow: 0 0 5px rgba(207, 220, 0, 0.4); border-radius: 5px; }在线演示地址：http://wow.techbrood.com/fiddle/13097 ...继续阅读 (90)

getContext是用来获取画布上下文的，如果出现not a function错误，一般是由于获取Canvas元素的方法不正确引起的。在某些浏览器中，变量和类命名也会导致奇怪的问题，注意尽量不用使用screen/canvas来作为元素的类名或JS中的变量名，以免和特定浏览器的默认定义冲突。本例出现的错误代码实例在：http://wow.techbrood.com/fiddle/11770解决方法是把screen命名修改为canvasScreen即可。 ...继续阅读 (76)

1. 创建CDbCommand命令对象$sql = "select * from users where id=1";$connection=Yii::app()->db;$command=$connection->createCommand($sql);2. SQL语句的执行CDbCommand对象有两个（种）方法来执行SQL语句。2.1 execute()方法用于数据更新（非查询）操作（INSERT, UPDATE 和 DELETE），返回的是操作受影响的记录行数$rowCount=$command->execute();  2.2 query()和queryXXX()方法用于查询，对应于SELECT语句2.2.1 query()方法$dataReader=$command->query();返回CDbDataReader对象，注意这代表结果集而不是记录，可以通过以下方法来获取（遍历）记录：// CDbDataReader::read()可以一次获取一行数据，到末尾时返回falsewhile(($row=$dataReader->read())!==false) // CDbDataReader实现了迭代器接口因此可以使用foreach遍历foreach($dataReader as $row)// 一次性返 ...继续阅读 (85)

微信昵称中包含emoji表情标签，某些标签是使用了4字节编码的UTF8。而大多数MySQL数据库现在使用的是3字节UTF8编码，这样会导致保存为空，且不会提示失败。解决方法有2个，一个是升级到MySQL5.5+版本，支持utf8mb4编码格式，然后执行下面的变更语句：ALTER TABLE 表名 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;这样可以完整保存用户昵称，但系统升级风险较大，需要多方面测试。另外一个方法更容易，就是去除非3字节的特殊符号，$nickname = preg_replace('/[\x{10000}-\x{10FFFF}]/u', '', $nickname);缺点是这会导致读取显示的时候少了那些漂亮的图标。参考链接：http://dev.mysql.com/doc/refman/5.5/en/charset-unicode-utf8mb4.htmlhttp://stackoverflow.com/questions/7814293/how-to-insert-utf-8-mb4-characteremoji-in-ios5-in-mysqlby iefreer ...继续阅读 (102)

在表单提交按钮被点击时，触发提交函数，代码如下：....重选确定上面这样写submit函数，在手机浏览器和Chrome移动模拟器中都可以正常工作，但是在微信内置浏览器下会直接提交表单，而不会执行你自定义的submit函数。需要把函数名称改为submit_photo类似这样的名字。可能是微信内置浏览器的bug。记录下。 ...继续阅读 (168)

要在两个数据库实例（同一个server）上进行关联数据查询，纯SQL语句如下：select a.*,b.* from db1.user as a,db2.log as b where a.id=b.user_id;要在Yii1 Model中支持这个，需要修改下user模型类的getDbConnection和tableName方法如下：/** * @return CDbConnection database connection */ public function getDbConnection() { return Yii::app()->db_log; } /** * @return string the associated database table name */ public function tableName() { preg_match("/dbname=([^;]+)/i", $this->dbConnection->connectionString, $matches); return $matches[1].'.log'; }by iefreer ...继续阅读 (78)

页面评论功能，当评论较多时，有时需要滚动到评论头部。可以使用scrollTop方法，加上一点延时动画（animate），可访问在线演示，代码大体如下：$(document).ready(function (){ $("#scroll").click(function (){ $('html, body').animate({ scrollTop: $("#div1").offset().top }, 2000); }); });iefreer2015-07-17 16:38:45comment1iefreer2015-07-17 16:38:25comment2iefreer2015-07-17 16:38:02comment3Scroll meby iefreer ...继续阅读 (68)

本文演示3个从远程URL下载图片，并保存到本地文件中的方法，包括file_get_contents,curl和fopen。1. 使用file_get_contentsfunction dlfile($file_url, $save_to){$content = file_get_contents($file_url);file_put_contents($save_to, $content);}2.使用CURLfunction dlfile($file_url, $save_to){$ch = curl_init();curl_setopt($ch, CURLOPT_POST, 0); curl_setopt($ch,CURLOPT_URL,$file_url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $file_content = curl_exec($ch);curl_close($ch);$downloaded_file = fopen($save_to, 'w');fwrite($downloaded_file, $file_content);fclose($downloaded_file);}3.使用fopenfunction dlfile($file_url, $save_to){$in= fopen($file ...继续阅读 (82)

Yii使用rules来定义验证规则，一些常用的验证规则包括：required: CRequiredValidatorfilter: CFilterValidatormatch: CRegularExpressionValidatoremail: CEmailValidatorurl: CUrlValidatorunique: CUniqueValidatorcompare: CCompareValidatorlength: CStringValidatorin: CRangeValidatornumerical: CNumberValidatorcaptcha: CCaptchaValidatortype: CTypeValidatorfile: CFileValidatordefault: CDefaultValueValidatorexist: CExistValidatorboolean: CBooleanValidatordate: CDateValidatorsafe: CSafeValidatorunsafe: CUnsafeValidator缺省情况是在服务器端验证，如果想在客户端验证，那么需要给CActiveForm传递enableClientValidation参数。对于大部分情况上述规则就能满足需求，Yii会自动生成相应的客户端JS验证脚本。但对于一些自定义的界 ...继续阅读 (89)

使用Yii的CActiveForm默认使用服务器端模型（model）的rules规则验证数据。但这会导致无谓的请求提交，比较好的方式是为了用户体验在客户端也验证，而为了安全性，在服务器端和数据库也做验证和限制。要启用CActiveForm的客户端验证，可以使用enableClientValidation参数：php $form=$this-beginWidget('CActiveForm', array( 'enableClientValidation'=>true, 'clientOptions'=>array( 'validateOnSubmit'=>true, //提交时的验证 'validateOnChange'=>true, //输入框值改变时的验证 'validateOnType'=>false, //键入时验证 'afterValidate' => 'js:function(form, data, hasError){return exClientValidate();}' ), 'htmlOptions ...继续阅读 (92)

有两个方法来查看监控服务器流量，看是否有异常。1. 使用系统自带的命令： watch more /proc/net/dev可以查看每2秒的字节和数据包的变化。但不那么直观。2. 使用nload命令，需要自行安装1）# yum install flex byacc libpcap ncurses ncurses-devel libpcap-devel2）# wget http://www.roland-riegel.de/nload/nload-0.7.4.tar.gz3）# tar xvfz nload-0.7.4.tar.gz4）# cd nload-0.7.45）# ./configure6）# make && make install执行nload命令，结果比较直观，如下所示：by iefreer ...继续阅读 (73)