EasyUI--messager

時間 2019-11-12

標籤 easyui messager 简体版

原文原文鏈接

1.　　　　alert 方法javascript

<script type="text/javascript">

    $( 
            function()
            {
                $.messager.alert("調用messager","文本內容") ;
            }
    );

</script>

這裏還能夠經過icon添加相應的圖標及info加入回調函數css

<script type="text/javascript">

    $( 
            function()
            {
                $.messager.alert("警告","警告消息","warning",
                                function()
                                {
                                    alert("回調函數被觸發") ;
                                }
                ) ;
            }
    );

</script>

這時候點擊「肯定」，觸發回調函數html

2.　　　　confirmjava

<script type="text/javascript">

    $( 
            function()
            {
                $.messager.confirm("確認","是否刪除？",
                                function(r)
                                {
                                    if(r)
                                        {
                                            alert("刪除成功") ;
                                        }
                                }
                ) ;
            }
    );

</script>

一樣是點擊肯定觸發回調函數jquery

這裏咱們聯繫按鈕，當點擊按鈕時觸發事件函數

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>測試EasyUI-messager</title>
<!-- 配置 -->
<!-- 1    jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!-- 2    css資源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/metro/easyui.css">

<!-- 3    圖標資源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"> 

<!-- 4    EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
 
<!-- 5    本地語言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>

<script type="text/javascript">

    $( 
            function()
            {
                <!-- 單擊按鈕觸發事件 -->
                $("#bt1").click(
                        function()
                        {
                            $.messager.prompt("輸入框","輸入姓名：",
                                function(val)
                                {
                                    if(val)
                                        {
                                            alert("你的姓名是"+val);
                                        }
                                }
                            ) ;
                        }
                ) ;
            }
    );

</script>
<button id="bt1">按鈕</button>
</body>
</html>

點擊按鈕彈出輸入框測試

這裏回調函數是攜帶參數的，咱們能夠經過判斷參數是否爲空來進行分類操做ui

4.　　　　progressspa

<body>

<script type="text/javascript">

    $( 
            function()
            {
                // 單擊按鈕觸發事件 
                $("#bt1").click(
                        function()
                        {
                            $.messager.progress(
                                    {
                                        title:"進度條",
                                        msg:"正在加載。。。" ,
                                        text:"請稍後。。。" ,
                                        interval:1000
                                    }
                            ) ;
                        }
                ) ;
            }
    );

</script>
<button id="bt1">按鈕</button>
</body>

這時點擊按鈕，打開進度條3d

5.　　　　show　　　　氣泡式的彈窗

<body>

<script type="text/javascript">

    $( 
            function()
            {
                // 單擊按鈕觸發事件 
                $("#bt1").click(
                        function()
                        {
                            $.messager.show( 
                                    {
                                        title:"消息" ,
                                        msg:"消息內容",
                                        showType:"fade",
                                        showSpeed:1000,
                                        width:400,
                                        height:200,
                                        timeout:6000    //若是定義爲0，消息窗體將不會自動關閉，
                                                            //除非用戶關閉他。若是定義成非0的樹，
                                                        //消息窗體將在超時後自動關閉。默認：4秒。
                                    }        
                            );
                        }
                ) ;
            }
    );

</script>
<button id="bt1">按鈕</button>
</body>

點擊按鈕，會在右下角彈出該對話框

這裏設置了顯示6秒後消失

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。