<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="js/jquery.min.js"></script>

<script src="js/operamasks-ui.min.js"></script>

<link href="css/apusic/om-apusic.css" rel="stylesheet" />

<script type="text/javascript">

<!--     //普通提醒,要手动关闭,关闭时无回调

function showSimpleTip(){

$.omMessageTip.show({

title : '操作成功',

content : '密码修改成功!'

});     }

//普通提醒(标题和内容可使用html代码),要手动关闭,关闭时无回调

function showHtmlTip(){

$.omMessageTip.show({

title : '<font color="blue">QQ新闻</font>',

content :   '标题是蓝色的看到没有?下面的文字带有链接看到没有?<br/><br/>'

});     }

//定时消失提醒,当然也可以手动关闭,关闭时无回调

function showTimeoutTip(){

$.omMessageTip.show({

title : '提示',

content : '3秒后自动消失!',

timeout : 3000

});     }

//关闭时有回调的提醒,要手动关闭

function showCallbackTip(){

$.omMessageTip.show({

title : '提醒4',

content : '关闭后会执行回调函数!',

onClose : function(){

showResult('提醒4被关闭!');             }

});     }

//关闭时有回调的提醒,定时消失提醒,当然也可以手动关闭

function showTimeoutCallbackTip(){

$.omMessageTip.show({

title : '提醒5',

content : '3秒后自动关闭(手动关闭也可以),关闭后会执行回调函数!',

timeout : 3000,

onClose : function(){

showResult('提醒5被关闭!');             }

});     }     //回调函数(显示信息到页面中)

function showResult(msg){

$('#result').html(msg).fadeIn('slow').delay(1500).fadeOut('slow');

}       </script>    </head> <body>

<button onclick="showSimpleTip();">普通的提醒(手动关闭)</button>

<button onclick="showHtmlTip();">标题和内容可用html的提醒(手动关闭)</button>

<button onclick="showTimeoutTip();">自动关闭的提醒(3秒后自动关闭)</button>

<button onclick="showCallbackTip();">关闭时执行回调函数的提醒(手动关闭)</button>

<button onclick="showTimeoutCallbackTip();">关闭时执行回调函数的提醒(3秒后自动关闭)</button>

<br /><br />

<div style="color:red;font-size: 2em" id="result"></div>

</body>

</html>

效果如下:

operamasks—omMessageTip的使用的更多相关文章

  1. 为operamasks增加HTML扩展方式的组件调用

    #为operamasks增加HTML扩展方式的组件调用 ##背景 之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到,发现easyui中 ...

  2. operamasks—omMessageBox的使用

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs&q ...

  3. operamasks—omGrid/omBorderLayout的混合使用

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs&q ...

  4. operamasks—omBorderLayout布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. Web前端框架汇总

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

  6. RequireJS首次加载偶尔失败

    现象:第一次加载JS文件,首次加载偶尔失败: 原因:require(['jquery', 'operamasks', 'zTree', 'jQueryCookie'],中前后引用同步加载: 解决方式: ...

  7. RequireJS使用及JS目录规划

    1.RequireJS学习文档: http://www.requirejs.cn/ 2.目录规划(参考:ColUdf.vm) 1)一个完整的html,对应一个js文件,模块js在主页面对应的js文件中 ...

  8. java前端选择

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

  9. omDialog设计造成控件无法后台取值

    http://ui.operamasks.org/website/homepage.html 使用服务端控件,前台进行赋值,但后台确无法取值. 不仅如此,如果里面放置了一个ASp:Button同样无法 ...

随机推荐

  1. 用js的eval函数模拟Web API中的onclick事件

    在检查组内小伙伴提交的tabToggler插件的js代码时,发现了onclick的如下用法: el.onclick = function(){ //按钮样式切换 for(var i=0;i<ob ...

  2. windows 下使用sqlplus

    1.连接数据库 找到tnsnames.ora 监听器配置 TESTDB = (DESCRIPTION = (ADDRESS = (PROTOCOL = TCP)(HOST = "服务器端ip ...

  3. IE盒模型和标准w3c盒模型

    Margin(外边距) - 清除边框外的区域,外边距是透明的.Border(边框) - 围绕在内边距和内容外的边框.Padding(内边距) - 清除内容周围的区域,内边距是透明的.Content(内 ...

  4. MIUI类ROM如何正确修改dpi

    (以下以MIUI为例) 在miui上,如果通过简单的修改build.prop会导致图标重绘错误,App图标分裂.此时配合一条简单的命令即可实现完美无bug的dpi修改. 1.使用终端模拟器执行su 2 ...

  5. 06XML JavaScript

    1. XML JavaScript XMLHttpRequest 对象 XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法.

  6. wdcp 打开网页显示 Apache 2 Test Page powered by CentOS -- 来自辉哥博客

    是因为更新过系统,安装并更新了系统自带的apache 执行这个命令即可 #ln -sf /www/wdlinux/init.d/httpd /etc/rc.d/init.d/httpd#reboot ...

  7. 小程序调用支付报错:jsapi缺少参数: total_fee

    这种情况通常是因为在调用的时候,package参数有问题导致: wx.requestPayment中package参数必须是package:"prepay_id=wx21********** ...

  8. appendHTML方法ajax加载更多评论实例页面

    //在后添加 <script>var appendHTML = function(el, html) { var divTemp = document.createElement(&quo ...

  9. Layui表格之多列合并展示

    前言: 当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示. 这里的展示不是合并单元格,合 ...

  10. linux下安装flash player

    下载flash player,选择.tar.gz for other linux. 网址:http://get.adobe.com/flashplayer/ Ctrl+Alt+T进入终端: 进入下载所 ...