使用YUI3创建Popup弹出层
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进行定制,下面是参数列表:
我觉得 x,y\zIndex\align\centered 都是非常常用也非常有用的属性,具体的使用可以参考YUI的官方说明。
弹出层一般会绑定在一个事件上,比如鼠标单击按钮后,出现弹出层,那么首先需要绑定事件的函数:
Y.on(event, fn, selector);
这个函数还可以接受其他的一些参数,具体的可以参考 YUI Development。
转载于:https://www.cnblogs.com/cocowool/articles/1772723.html
使用YUI3创建Popup弹出层相关推荐
- uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别!
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
- 小程序UI组件 Vant Weapp Popup弹出层和Picker选择器 组合使用按钮被遮盖恢复不了的问题
Vant Weapp Popup弹出层和Picker选择器 组合使用, 如果picker在popup上存在滚动条, 在开发者工具上鼠标可以滚动还原picker的确认和取消按钮位置, 但是在真机上,把p ...
- vue vant Popup 弹出层 与 Picker 选择器 的完美结合 实现多级列表选择
前言: 在写项目的时候,经常会碰到选择列表,为了更完美的实现效果,使用了vant里面的 Popup 弹出层 + Picker 选择器 效果图: 页面结构: van-field 是vant里面的输入框组 ...
- 个人中心 (二) 01-编辑资料-基础布局-Popup弹出层-底部弹出-头像男女时间 DatetimePicker时间选择转换-dayjs(value).format('YYYY-MM-DD')
个人中心-编辑资料-基础布局-Popup 弹出层-底部弹出模式-头像-男女-时间 & DatetimePicker 时间选择-年月日模式 & dayjs(value) 转换成日期对象, ...
- 微信小程序 - vant popup弹出层阻止底层页面滑动
前言 在小程序编写过程当中使用使用vant weapp的popup组件作小程序的弹出层,触屏致使底层页面跟着滑动.web 解决方法 使用touch事件阻止属性,@touchmove.stop.prev ...
- vanpopup 高度_Vant Popup 弹出层
介绍 弹出层容器,用于展示弹窗.信息提示等内容,支持多个弹出层叠加展示 引入import Vue from 'vue'; import { Popup } from 'vant'; Vue.use(P ...
- vant popup弹出层多选功能
一.效果图 二.代码块 <template><div><van-button @click="btn" size="mini"&g ...
- 利用React/anu编写一个弹出层
本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...
- uniapp - 弹出层的使用
目录 前言 报错原因分析 使用步骤 第二步 前言 最近在写 小程序的项目,前面的页面跳转.样式结构,写的都很流畅,奈何后面直接在小程序的popup弹出层卡死,就这一个功能,卡了老半天 报错原因分析 最 ...
- 弹出层控件popup
var popup = new Popup(4); popup.contentHtml('<!--内容确认-->' +'<div class="qrxx txt14&quo ...
最新文章
- TeamLab安装及使用
- sudo apt-get 和dpkg命令大全
- Java项目代码结构
- Android可输入的下拉框,android 可编辑的下拉框 Demo
- Android SQLite数据库的基本操作-SQLiteDatabase
- P3119 [USACO15JAN]草鉴定Grass Cownoisseur
- JDBC连接数据库经验集萃
- MyEclipse移动开发教程:移动Web模拟器指南(一)
- web Worker简介、web Worker报错分析、作用
- 跨网段加域的一个问题
- 什么样的架构师才是真正的架构师?
- 2021-06-20 表单详解
- pi币节虚拟服务器选哪种,Pi币节点云服务器
- 客户信息管理系统4—客户信息的查询
- CentOS 8使用 Kickstart配置 UEFI PXE 启动
- c程序设计语言cpp,c++中后缀名.c 与.cpp的区别?
- Pwnable.kr collision [Writeup]
- 最全的固态硬盘ssd安装win10专业版指南
- 提升研发质量的三个办法
- java计算机毕业设计ssm党支部在线学习系统