BOS Logistics Project ——— Easyui Messager and Menubutton Basic Use _ Logistics

BOS Logistics Project 10easyui Messager and Menubutton basic use one Easyui messager message box 1 Description 2 Alert test Diagram 3 alert Code 4 confirm test Diagram 5 confirm Code 6 show Test Diagram 7 Show code 8 Chinese hint Description two easyui menu 1 description 2 menu diagram 3 Menu test Code three complete code three source download

BOS Logistics Project ——— Easyui Messager and Menubutton basic use one, Easyui messager message box 1.1 description

Overrides the default defaults by $.messager.defaults.

Message boxes (messager) provide different styles of message boxes, including alert (alert), Confirmation (confirm), prompt (prompt), progress (progress), and so on. All message boxes are asynchronous. Users can use callback functions to do some action after interacting with a message box.

The

Main use says the following three methods: show,alert,confirm Name parameter Description $.messager.alert title,
msg,
icon,
fn Displays a warning prompt window. Parameters:
Title: The caption text that appears on the header panel.
Msg: The text of the message to display.
Icon: A picture of the icons to display. The available values are: Error, question, info, warning.
FN: The callback function that fires when the window closes.

Code instance:
$.messager.alert (' My Title ', ' Here's a info message! ', ' info '); $.messager.confirm Title,
msg,
FN Displays a confirmation message window with the OK and Cancel buttons. Parameters:
Title: The caption text that appears on the header panel.
Msg: The text of the message to display.
FN (b): A callback function that passes a true argument to the function when the user clicks on the confirmation button, otherwise passing it a false argument.

Code instance: $.messager.confirm (' Confirm ', ' Are you sure to exit this system? ', function (r) {if (R) {}}); $.messager.show Options display a message window in the lower-right corner of the screen, and the options parameter is a configuration object:
ShowType: Defines how the message window is displayed. The available values are: null, slide, fade, show. The default is slide.
Showspeed: Defines the amount of time in milliseconds that the message window finishes displaying. The default is 600.
Width: Defines the width of the message window. The default is 250.
Height: Defines the height of the message window. The default is 100.
Title: The caption text that appears on the header panel.
Msg: The text of the message to display.
Style: Defines a custom style for a message window.
Timeout: If defined as 0, the message window will not close unless the user closes. If defined as a value other than 0, the message window will automatically close after timeout. The default is 4 seconds. 1.2 Alert test Diagram

1.3 Alert Code

<a id= "but1" class= "Easyui-linkbutton" >alert test </a>
<script type= "Text/javascript" >
    $ ( function () {
        $ ("#but1"). Click (function () {
            $.messager.alert (' Test ', ' This is test only ', ' Error ', function () {
                Alert ("clicked OK");
}); </script>

1.4 Confirm Test Diagram

1.5 Confirm Code

<a id= "But2" class= "Easyui-linkbutton" >confirm test </a>
<script type= "Text/javascript" >
    $ (function () {
        $ ("#but2"). Click (function () {
            $.messager.confirm ("Test", "Are you sure it is a test?", function (r) {
                if (r) {
                    alert ("clicked OK");
                } else{
                    alert ("clicked Cancel");
});}; </script>

1.6 Show Test diagram

1.7 Show Code

<a id= "But3" class= "Easyui-linkbutton" >show test </a>
<script type= "Text/javascript" >
    $ ( function () {
        $ ("#but3"). Click (function () {
            $.messager.show ({title
                : ' This is the title ',
                msg: ' This message closes in 2 seconds ',
                timeout:2000,
                showtype: ' Slide '
            });
        }
; </script>

1.8 Chinese Hint description

The default is prompt, for example: OK, Cancel is in English, if need Chinese prompt, need to introduce JS file.

For example

<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/js/easyui/locale/easyui-lang-zh_cn.js" ></script>

Second, Easyui Menu 2.1 description

Overrides the default defaults by $.fn.menu.defaults.

Menus are typically used for context menus. It is the base component for creating additional menu components, such as Menubutton, SplitButton. It can also be used to navigate and execute commands.

You should add ' Easyui-menu ' class to the tag by creating a menu from the tag. Each menu item (menu item) is created by markup. We can add the ' iconcls ' attribute to the menu item to define an icon that appears to the left of the menu item. Adding ' Menu-sep ' class to the menu item (menu item) will produce a menu separator.

2.2 Menu Icon

2.3 Menu Test Code

<a data-options= "iconcls: ' Icon-help ', menu: ' #mm '" class= "Easyui-menubutton" > Control Panel </a>
<div id= " MM ">
    <div onclick=" alert (' Modify password ') "data-options=" Iconcls: ' Icon-edit ' "> Modify password </div>
    <div class= "Menu-sep" ></div>
    <div> Contact admin </div>
    <div class= "Menu-sep" ></div>
    <div> exit system </div>
</div>

Three, complete code

<%--Created by the IntelliJ idea. user:qiwenming DATE:17/12/11 Time: PM 11:16 To change this template use File | Settings |
File Templates. --%> <%@ page contenttype= "Text/html;charset=utf-8" language= "java"%> Third, the source code downloads
Https://github.com/wimingxxx/bos-parent