Chinaunix首页 | 论坛 | 博客
  • 博客访问: 887504
  • 博文数量: 60
  • 博客积分: 1458
  • 博客等级: 中尉
  • 技术积分: 1373
  • 用 户 组: 普通用户
  • 注册时间: 2011-12-24 12:50
个人简介

不积硅步无以至千里

文章分类

全部博文(60)

分类: IT业界

2012-07-26 11:45:17


6 在域下面部署提示

1月10日更新

目录

1 演示

2 创建验证

3 部署

演示

窗体底端

创建你的验证

将验证保存为变量,这样你可以在稍后使用它


  1. var email = $("#email").required("Complete this field").and().email("Enter a valid address");

放置验证

使用Positioner组件改变Validation的位置


  1. email.position({

  2.      "points": "lt lb",

  3.      "offset": "0 10"

  4. });


7 在屏幕上放置一些东西

12月13日更新

目录

1 神奇的背后

2 逐步放置

2.1 第一步:设置HTML和CSS结构

2.2 第二步:创建配置对象

2.3 第三步:实例化Positioner组件

2.4 第四步:理解组件返回的控制对象

3 重新部署

神奇的背后

为了完成这个任务,我们需要使用Positioner组件。组件在这里的角色是放置任何内容相关的元素。

逐步部署

第一步:设置HTML和CSS结构

在这个例子中我们将在一个蓝色的相当于内容的div旁边放置一个红色的div元素。

Element

使用的代码片段如下:


  1. <div class="context">

  2. <div class="element">

使用CSS样式表进行修改:


  1. .context {

  2.     width: 100px;

  3.     height: 100px;

  4.     border: 1px solid blue;

  5. }

  6.  

  7. .element {

  8.     width: 25px;

  9.     height: 25px;

  10.     background-color: red;

  11. }

第二步:创建一个配置对象

首先,我们要创建一个将包含所用组件属性的对象。


  1. var configuration = {};

每一个我们想要创建的位置都能够接收一些参数。那么我们必须指定所有需要的参数,比如element参数。因此,我们将指定red element 作为元素参数(作为CSS选择器的查询字串)。


  1. configuration.element = ".element";

接下来,我们将指定content作为red element部署的参考元素。


  1. configuration.context = ".context";

最终,我们必须指定哪个位置作为content和element的连接器。这一步骤是通过points参数来进行指定的。在这个例子中,我们需要将red element的左上角相对于content的右上角来放置。


  1. configuration.points = "lt rt";

第三步:实例化Positioner组件

一旦建立了配置对象,我们可以引用Positioner组件。


  1. var example = ch.positioner(configuration);

最简单的方式是在组件被引用的同时使用JSON格式指定配置对象。


点击(此处)折叠或打开

  1. var example = ch.positioner({

  2.     element: ".element",

  3.     context: ".context",

  4.     points: "lt rt"

  5. });

第四步:理解组件返回的控制对象

在组件实例化完成并且结束在窗体上放置元素之后,将返回一个公共方法以允许控制位置。这个方法是position,它可以为实现以下三个目的而被使用:

· JSON一样获取当前位置配置

· 更新和重画element和content位置

· 设置一个新的位置 通过重置配置对象的参数

重新部署

为了改变当前position的points,我们可以使用公用的position方法,指定一个新的包含新的points配置对象。


点击(此处)折叠或打开

  1. example({
  2. "points": "lt lb"
  3. });

最终的结果将会如下所示:

阅读(1533) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~