使用YUI3创建Popup弹出层

简介: YUI3是一个非常好的开源框架,但是学习曲线稍微有些陡峭,这个系列将记录下我使用YUI3过程中的一些心得点滴,希望对大家能够有帮助。 很多互联网的项目应用中,弹出层出现的越来越多,使用YUI3可以快速的实现制作弹出层的效果。

YUI3是一个非常好的开源框架,但是学习曲线稍微有些陡峭,这个系列将记录下我使用YUI3过程中的一些心得点滴,希望对大家能够有帮助。

很多互联网的项目应用中,弹出层出现的越来越多,使用YUI3可以快速的实现制作弹出层的效果。

YUI3提供了Overlay这个组件来实现可定位、可叠加的弹出层效果,这个弹出层同时还包含标准的布局模块。

首先是包含YUI的基础文件,因为Overlay组件使用中要用到WidgetPosition、WidgetStack、WidgetPositionAlign、WidgetPositionConstrain等组件,简单的方法是只引用YUI的种子文件,他会根据情况自动加载需要的组件。

<script type="text/javascript" charset="utf-8"
        src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js">
</script>

之后,我们就可以创建YUI的实例了。

YUI().use(“overlay”, function(Y){

});

传给use最后的一个参数是一个回调函数。该回调函数在YUI实例完成了页面中缺少的文件加载后开始执行。

Overlay组件继承自Widget类,所以初始化方式同Widget一样,可以接受一个配置对象来设置初始的环境变量。Overlay初始的方式有很多种,即支持基于已有的HTML生成的方式,也支持代码动态创建的方式生成。我们可以根据自己的需求选择不同的方式。个人认为基于已有HTML的方式,比较容易控制HTML的结构和样式,方便后期的修改,对于包含复杂弹出层内容的应用比较合适。而代码动态创建的方式,则适合显示简单信息的场景。

使用HTML的方式,需要准备的HTML为(Markup):

<div id="myContent">
    <div class="yui3-widget-hd">Overlay Header</div>
    <div class="yui3-widget-bd">Overlay Body</div>
    <div class="yui3-widget-ft">Overlay Footer</div>
</div>
在实例化的时候,需要在配置对象中指定一个到HTML的引用。引用可以是元素的ID\可以是YUI对象,也可以是一个选择器,如果选择到了多个符合的元素,则默认使用第一个。
来看一下基本的例子:

YUI().use('overlay', function(Y){
    var popup = new Y.Overlay({
        srcNode:"#myContent",
        visible:false,
        width:'650px',
        height:'650px'
    }).render();

});

也可以完全使用动态的方式来创建弹出,在脚本中指定要弹出的内容。

仅仅有上面这些还不够,我们还需要未弹出层设计位置和样式,光秃秃的弹出几句话来只会引起用户的奇怪。YUI提供了丰富的选项允许我们对Overlay进行定制,下面是参数列表:

image 我觉得 x,y\zIndex\align\centered 都是非常常用也非常有用的属性,具体的使用可以参考YUI的官方说明。

弹出层一般会绑定在一个事件上,比如鼠标单击按钮后,出现弹出层,那么首先需要绑定事件的函数:

Y.on(event, fn, selector);

这个函数还可以接受其他的一些参数,具体的可以参考 YUI Development。

相关文章
|
安全 数据安全/隐私保护
2022 年推荐免费在线接收短信平台(国内、国外)
现代社会中大多数人容易忘记密码,因此,为了方便,各大网站或者 APP 就相继出现以手机号码进行短信验证来注册和登录等操作。但此时,大多个人手机号码都已经是实名认证的,就非常怕存在个人信息泄露的情况。近几年网络平台用户数据泄露事件层出不穷,勿论一般平台,甚至一些全球知名企业也曾被曝出用户数据泄露问题,那基于此我们用户又能做点什么呢?
48582 0
2022 年推荐免费在线接收短信平台(国内、国外)
|
10月前
|
NoSQL 网络协议 架构师
|
测试技术 数据安全/隐私保护 开发者
PM - 软件版本命名规范及各阶段说明
PM - 软件版本命名规范及各阶段说明
435 0
PM - 软件版本命名规范及各阶段说明
|
消息中间件 网络安全 数据安全/隐私保护
使用docker 镜像拉取Rabbit MQ
使用docker 镜像拉取Rabbit MQ
288 0
|
存储 NoSQL MongoDB
mongodb搭建Replica Set
mongodb搭建Replica Set 简单高效
256 0
|
JSON 自然语言处理 算法
工业组态 + LLM : 大模型技术引领传统工业软件创新与实践(下)
工业组态 + LLM : 大模型技术引领传统工业软件创新与实践(下)
798 0
|
移动开发 API
阿里云域名注册优惠口令(优惠口令大全)
域名优惠口令是阿里云官方推出的针对域名产品注册、转入、续费的优惠码。使用域名优惠口令,可享受一定的促销优惠。本文为您介绍域名优惠口令的使用规则、获取途径及使用方法。
2345 0
阿里云域名注册优惠口令(优惠口令大全)
【AutoSAR实战订阅系列】Handle-ID分配和 PDU之间的链接关系
【AutoSAR实战订阅系列】Handle-ID分配和 PDU之间的链接关系
【AutoSAR实战订阅系列】Handle-ID分配和 PDU之间的链接关系
|
Windows
成功解决http error 503.the service is unavailable错误
成功解决http error 503.the service is unavailable错误
3511 0