Chico UI 1——使用Helper及其他元素

6 在域下面部署提示

1月10日更新

目录

1 演示

2 创建验证

3 部署

演示

窗体底端

创建你的验证

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

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

放置验证

使用Positioner组件改变Validation的位置

email.position({

     "points": "lt lb",

     "offset": "0 10"

});

7 在屏幕上放置一些东西

12月13日更新

目录

1 神奇的背后

2 逐步放置

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

2.2 第二步：创建配置对象

2.3 第三步：实例化Positioner组件

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

3 重新部署

神奇的背后

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

逐步部署

第一步：设置HTML和CSS结构

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

Element

使用的代码片段如下：

<div class="context">

<div class="element">

使用CSS样式表进行修改：

.context {

    width: 100px;

    height: 100px;

    border: 1px solid blue;

}



.element {

    width: 25px;

    height: 25px;

    background-color: red;

}

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

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

var configuration = {};

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

configuration.element = ".element";

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

configuration.context = ".context";

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

configuration.points = "lt rt";

第三步：实例化Positioner组件

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

var example = ch.positioner(configuration);

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

var example = ch.positioner({

    element: ".element",

    context: ".context",

    points: "lt rt"

});

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

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

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

· 更新和重画element和content位置

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

重新部署

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

example({

"points": "lt lb"

});

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