关于easydialog 使用方法和问题

easydialog 非常简洁的弹出层JS组件,相比于传统的alert(),有更好的用户体验,我们在使用时,只需要调用其已经定义好的方法,甚至可以自定义方法,和通过修改CSS文件,来改变不同的显示样式。

我们在使用easydialog 的过程中,需要注意以下几点:

1、Js文件的引用:我们在下载easydialog.zip的压缩包解压后,放到站点根目录的某个路径下,在需要用到easydialog的页面中引用其相关的JS文件,就能使用了,例如:

[javascript] view plaincopy

  1. <span style="font-size:18px;"><script type="text/javascript" src="/js/easydialog/easydialog.min.js"></script></span>

在引入该easydialog的组件之后,我们就可以将自定义的JS方法文件引入进来

[javascript] view plaincopy

  1. <span style="font-size:18px;"><script src="/js/easydialog/easy_msg.js" type="text/javascript"></script></span>

在该文件中我们可以这样定义一个方法:

[javascript] view plaincopy

  1. /*=====================弹出层,有提示信息, user for 用户修改信息=============================================*/
  2. function msg(){
  3. easyDialog.open({
  4. container : {
  5. content : ‘<img src=\‘images/login/success.png\‘ width=\‘12px\‘ height=\‘12px\‘  /><strong>操作成功!</strong>,<br/>为了您的账号安全,<br/>请您重新登录并修改密码...<br/>该窗口将在10秒后关闭<br/>立即登录请点击这里>><a href=\‘login.aspx\‘>[登录]</a>‘
  6. },
  7. autoClose : 10000
  8. });
  9. }

这里需要注意的是,在我们的页面在使用easydialog的组件的时候,需要将为easydialog定义的CSS文件引入到相应的页面中。否则,弹出层将不能显示其相应的样式。

时间: 2024-10-31 07:57:52

关于easydialog 使用方法和问题的相关文章

easyDialog弹窗+zTree部门选择

写一个父页面方法,将name和id赋值 function show(name,id) { $("#deptnoID").val(name); $("#deptnoId").val(id); } $(function() { 回调函数,对应easyDialog.open方法中的yesFn : btnFn,先用.contentWindow获取iframe的window对象,取出id和name.返回值true表示不关闭弹窗 var btnFn = function(){

【Android应用开发】EasyDialog 源码解析

示例源码下载 : EasyDialog 简介 : -- 作用 : 用于在界面进行一些介绍, 说明; -- 效果图 : 一. EasyDialog 源码解析 1. 实现原理 实现原理 : -- EasyDialog 效果 : 在点击后, 会从屏幕外飞入对话框, 飞入恰好能够正好处于特定 View 组件的上方 或者下方; -- 本质 : 点击按钮弹出的对话框会填充整个屏幕, 背景设置成透明的, 然后会计算组件坐标, 记录坐标位置, 再在弹出的整个对话框中 绘制一个 带小三角对话框的布局, 并让其执行

easyDialog参数配置说明

easyDialog不依赖框架,使用起来很简单,只要引入easydialog.js文件就可以使用了: // 引入easyDialog <script src="easydialog.js" type="text/javascript"></script> 比如想弹出一个id为box的消息框,那么只需将id以字符串的形式传进去即可: easyDialog.open({ container : 'box' }); 关闭弹出窗口,只要调用关闭的方法

android 轻量级的友好的交互对话框库,EasyDialog,实现已详细标注

转载请注明出处:王亟亟的大牛之路 Git上看到的一个蛮清爽的一个Dialog介绍给大家. 实现效果 个人感觉做的还是满Q弹的 如何使用? compile 'com.github.michaelye.easydialog:easydialog:1.0' 其实也就是一个类和几个layout文件,建议直接copy进你的项目还更方便点. 项目结构: 因为标注的很清晰,直接就贴代码看,不做什么解释了,如有什么不理解可以留言可以回答你的问题 核心类EasyDialog public class EasyDi

Unity 崩溃问题解决方法——之一

友情提示:工作随记,不喜勿喷 注意:文艺青年可以略过,暴力青年欢迎采纳 Library文件夹 Unity每次编译都会生成这个东西,不用担心丢失的问题.所以,干掉他! 选中 + Delete   或者  选中 + Shift  + Delete 网上看了很多方法,就觉得这个简单,粗暴,是我喜欢的类型. 优点:上面说了 缺点:如果工程过大,重新编译时间会比较长.(但是对于查Log日志来说,相对快点)

Java TM 已被阻止,因为它已过时需要更新的解决方法

公司的堡垒机需要通过浏览器登陆,且该堡垒机的网站需要Java的支持,最近通过浏览器登陆之后总是提示"java TM 已被阻止,因为它已过时需要更新的解决方法"导致登陆之后不能操作, 但是操作系统中确实已经安装了比较新的JDK,安装的JDK版本是jdk-7u67-windows-i586,因为太烦人,所以决定搞清楚报错的原因,一劳永逸,彻底解决这个问题 准备工作:安装JDK,安装版本jdk-7u67-windows-i586.exe,因为机器的Eclipse还依赖64位的JDK,所以另安

win7 64位系统 PB连接oracle数据库出现“oracle library oci.dll could not be loaded”问题的解决方法

今天与大家分享一个自己的学习笔记,希望能给遇到同样问题的人带来帮助. 不知道大家在win7 64位系统下用 PB连接oracle数据库时,是否遇到过“oracle library oci.dll could not be loaded”问题. 今天,在win7 64位系统下用 PB连接oracle数据库时,一直出现上述错误,在百度上找了很久,都没有找到一个完整的解决方案,咨询了很多人,(他们都说是我的PB和oracle没装好,但我装的时候没出现任何问题,一切都很顺利,而且PB和oracle都能正

C#与数据库访问技术总结(八)之ExecuteNonQuery方法

ExecuteNonQuery方法 ExecuteNonQuery方法主要用来更新数据. 通常使用它来执行Update.Insert和Delete语句. 该方法返回值意义如下: 对于Update.Insert和Delete语句,返回值为该命令所影响的行数. 对于所有其他类型的语句,返回值为-1. Command对象通过ExecuteNonQuery方法更新数据库的过程非常简单,需要进行的步骤如下: (1)创建数据库连接. (2)创建Command对象,并指定一个SQL Insert.Update

android开发之onCreate( )方法详解

onCreate( )方法是android应用程序中最常见的方法之一,那么,我们在使用onCreate()方法的时候应该注意哪些问题呢? 先看看Google Android Developers官网上的解释: onCreate(Bundle) is where you initialize your activity. Most importantly, here you will usually call setContentView(int) with a layout resource d