EasyUI-消息框位置

最新推荐文章于 2021-02-23 09:52:36 发布
最新推荐文章于 2021-02-23 09:52:36 发布
阅读量247 收藏
点赞数
分类专栏： Jquery EasyUI


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
    <h2>Message Box Position</h2>
    <p>Click the buttons below to display message box on different position.</p>
    <div style="margin:20px 0;">
        <p>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="topLeft();">TopLeft</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="topCenter()">TopCenter</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="topRight()">TopRight</a>
        </p>
        <p>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="centerLeft()">CenterLeft</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="center()">Center</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="centerRight()">CenterRight</a>
        </p>
        <p>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="bottomLeft()">BottomLeft</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="bottomCenter()">BottomCenter</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="bottomRight()">BottomRight</a>
        </p>
    </div>
    <script>
        function topLeft() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'show',
                style: {
                    right: '',
                    left: 0,
                    top: document.body.scrollTop + document.documentElement.scrollTop,
                    bottom: ''
                }
            });
        }
        function topCenter() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'slide',
                style: {
                    right: '',
                    top: document.body.scrollTop + document.documentElement.scrollTop,
                    bottom: ''
                }
            });
        }
        function topRight() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'show',
                style: {
                    left: '',
                    right: 0,
                    top: document.body.scrollTop + document.documentElement.scrollTop,
                    bottom: ''
                }
            });
        }
        function centerLeft() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'fade',
                style: {
                    left: 0,
                    right: '',
                    bottom: ''
                }
            });
        }
        function center() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'fade',
                style: {
                    right: '',
                    bottom: ''
                }
            });
        }
        function centerRight() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'fade',
                style: {
                    left: '',
                    right: 0,
                    bottom: ''
                }
            });
        }
        function bottomLeft() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'show',
                style: {
                    left: 0,
                    right: '',
                    top: '',
                    bottom: -document.body.scrollTop - document.documentElement.scrollTop
                }
            });
        }
        function bottomCenter() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'slide',
                style: {
                    right: '',
                    top: '',
                    bottom: -document.body.scrollTop - document.documentElement.scrollTop
                }
            });
        }
        function bottomRight() {
            $.messager.show({
                title: 'My Title',
                msg: 'The message content',
                showType: 'show'
            });
        }
    </script>
</body>
</html>

dxm809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI学习第一篇：初识EasyUI、Messager 消息框
邢宇超的博客
08-22 5064
简介jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。废话不多说。资料下载地址：http://download.csdn.net/detail/yuchao2015/9609485Jquery-EasyUI的目录 demo 插件实例， locale 国际化js文件
java easyui即时消息框实例
12-26
在这个例子中，`title`定义了消息框的标题，`msg`是显示的消息内容，`showType`决定了消息框的动画效果，而`style`属性则可以用来调整消息框的位置。你可以根据需要自定义这些参数。 在Java后端，你可能需要通过...
easyui 消息提示框
weixin_34121304的博客
02-24 628
1.浏览器消息提示框 浏览器弹出框，可以在浏览器设置中被屏蔽掉，导致效果失效 alert() 2.easyui 框架提供的消息框 easyui 框架自带的消息框，不可以被屏蔽。 $.messager.alert({ title : '提示信息!', ...
easyui 消息框
qq_35812160的博客
11-06 417
分类警告消息框（icon）：alert error info question warning 交互消息框：confirm prompt 消息框的显示方式：show slide fade progress 警告消息框 基本用法：$.messager.alert(title, msg, icon, fn) alert（普通提示） [javascript] view plain copy print?(
EasyUi各种消息框
dingliuyi1311的博客
11-26 107
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> 　　 <head> 　　　　 &l...
easyui 验证控件 tooltip message显示位置
weixin_30487317的博客
07-26 804
找了半天才发现是这个属性在控制，tipPosition:'left'，官网那个demo，误人子弟。 转载于:https://www.cnblogs.com/heweiquan123/p/4346789.html
jquery-easyui-1.4.5.rar
02-26
《jQuery EasyUI 1.4.5：打造高效前端界面的利器》 jQuery EasyUI 是一个基于 jQuery 的轻量级JavaScript框架，它提供了一系列的UI组件，帮助开发者快速构建功能丰富的、用户友好的Web应用程序。在"jquery-easyui-...
jquery-easyui-EDT-1.5.5.7z
05-30
tagbox：修复tagbox框和label标签不在一条直线上的问题。 Improvement（改进） combo：'inputEvents'属性自带'blur'事件处理器； numberbox：'cloneFrom'方法可用； slider：'step'属性可以设置为浮点数； menu：'...
easyui-datagrid开发实践(总结)
08-29
在这个例子中，Datagrid设置了标题、加载消息、工具栏、宽度、高度，并指定了数据源URL。Datagrid还支持行号显示、自定义高度、表格适应宽度、斑马线效果、单选模式、不自动调整行高、可折叠、分页等特性。列定义...
jquery-easyui-api-chm-document.rar_easy ui_easyui document_jquer
最新发布
09-19
此外，对话框还可用于显示消息提示、确认操作或承载复杂内容。 除此之外，EasyUI还提供了诸如"tabs"（选项卡）、"menu"（菜单）、"pagination"（分页）等组件，它们各自拥有丰富的配置项和API接口，能够满足各种...
EasyUI Messager 消息框
wogoshu1的博客
06-30 280
EasyUI Messager 消息框 http://www.jeasyui.net/plugins/182.html 通过 $.messager.defaults 重写默认的 defaults。 消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回...
easyUI -messager -消息框
weixin_30340775的博客
06-20 98
<script src="~/jquery-easyui-1.5.5.2/jquery.min.js"></script> <link href="~/jquery-easyui-1.5.5.2/themes/default/easyui.css" rel="stylesheet" /> <link href="~/jquery-eas...
Easyui Messager 消息框
乔的博客
06-22 200
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <% String path = request.getContextPath(); %> <head> <meta http-equiv="Content-Type" content="text/html;
Easyui-消息弹框
Smile yourlife
09-27 1002
1.使用EasyUI需要引入jQuery以及easyUi的css和js文件（具体如下） <link href="static/css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="static/css/themes/icon.css" rel="stylesheet"...
easyui messager 消息框 对话框
whatday的专栏
11-23 406
通过 $.messager.defaults 重写默认的 defaults。 消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。 依赖 window linkbutton progressbar 用法 $.m...
EasyUI messager 消息提示框,固定右下显示. messager 滚动条问题.
WoXiaoXingXing的专栏
12-03 4667
默认显示方式:  如果页面有滚动条那么,打开页面没有问题,但是拖动滚条,消息窗口就固定为右下了。 问题原因主要是因为window默认是采用定位方式为绝对定位(position:'absolute') 修改后显示:  滚动页面,消息窗口依然固定在右下。   核心代码:style属性。 $.messager.show({ showSpeed : 600, t
jQuery easyUI--消息框的使用
学亮编程手记
02-23 476
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;消息框的使用&lt;/title&gt; &lt;script type="text/javascript" src=".
easyui 提示框组件_15、Message 消息窗口组件
weixin_29231725的博客
02-23 367
> Message消息窗口组件依赖于Window(窗口)组件、progressbar(进度条)组件# 加载方式> 消息窗口提供了不同的消息框风格，包含 alert(警告框)、confirm(确认框)、prompt(提示框)、progress(进度框)等。所有消息框都是异步的，用户可以在交互消息之后使用回调函数去处理结果。由于这个组件的特殊性，没有 class 加载方式，全部在 JS 端...
easyui弹出对话框的位置根据某个控件元素改变
O'lean技术之路
07-11 1312
easyui中弹出dialog时，更改弹出的位置绝对位置可以通过设置top和left属性。但是如果想根据具某个按钮的位置进行弹出，怎么办呢？
jQuery EasyUI-CN：简洁高效的信息技术组件文档
该文档详细介绍了jQuery EasyUI中的多个核心组件，包括Accordion（可折叠标签）、DateBox（日期框）、ComboBox（组合框）、Dialog（对话框）、Messager（提示框）、NumberBox（数字框）、ValidateBox（验证框）、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值