Clase de video: https://edu.csdn.net/course/play/7621
Este caso proporciona principalmente una breve explicación de los paneles, ventanas y cuadros de diálogo que se usan comúnmente en EasyUI. Los diagramas de ventanas no se cargan. Escriba el código usted mismo para implementarlo. Es relativamente simple y el contenido principal se aplica al sistema de fondos.
<% @ page language = "java" import = "java.util. *" pageEncoding = "UTF-8"%> <% String path = request.getContextPath (); String basePath = request.getScheme () + ": / /"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN"> <html> <head> <base href = "<% = basePath%>"> <title> Mi JSP '018_window.jsp' página de inicio </title> <meta http-equiv = "pragma" content = "no-cache"> < meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "expires" content = "0"> <meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3 "> <meta http-equiv ="description "content =" Esta es mi página "> <script type =" text / javascript "src =" js / jquery-easyui-1.2.6 / jquery-1.7.2.min.js "> </script> <enlace rel = "stylesheet" type = "text / css" href = "js / jquery-easyui-1.2.6 / themes / default / easyui.css" /> <link rel = "stylesheet" type = "text / css" href = "js / jquery-easyui-1.2.6 / themes / icon.css" /> <script type = "text / javascript" src = "js / jquery-easyui-1.2.6 / jquery.easyui.min.js" > </script> <script type = "text / javascript" src = "js / jquery-easyui-1.2.6 / locale / easyui-lang-zh_CN.js"> </script> <script type = "text / javascript "> $ (function () {// 利用 渲染 ， 来 初始化 组件; $ ('# mypanel'). panel ({title: '金融 产品 介绍', ancho: 300, alto: 300,iconCls: true, collapsible: true, closable: true, content: [{text: 'a'}, {text: 'b'}]});}); / * $ (function () {$ ('# mywin ') .window ({content:' ¡Compra exitosa de fondos! ', onOpen: function () {//$.messager.alert('message','success');}});}); $ (function () {$ ('# buyfund'). click (function () {$ ('# mywin'). window ('open');});}); * / / * $ (function () {$ ('# fundinfo '). dialog ({title:' Modificación de la información del fondo personal ', iconCls:' icon-ok ', barra de herramientas: [{texto:' suscripción ', iconCls:' icon-add ', handler: function () {$. messager.alert ('Información de solicitud', 'Suscripción de fondos abiertos para usted');}}, {texto: 'Redención', iconCls: 'icon-edit'}], botones: [{texto: 'Aceptar', iconCls : 'icon-redo', manejador:function () {$ .messager.alert ('Mensaje de solicitud', 'Compra de fondos exitosa');}}, {texto: 'Cancelar', iconCls: 'icon-undo', manejador: function () {$ .messager. alert ('Información de solicitud', 'operación de fondos cancelada');}}]});}); * / </script></head><body> <h2> Hay dos formas de crear un diseño, html o js </h2> <div id = "mypanel" class = "easyui-panel" style = "width: 300px; height: 300px" title = "My Panel" iconCls = "icon-add" minimizable = "true" maximizable = "true" closable = "true" collapsible = "true"> </div> - <! - <div id = "mypanel" title = "产品 2"> Fondo de bonos </div> <div id = "mywin "class =" easyui-window "cerrado = verdadero título =" Comprar fondo "style =" ancho: 400 px; alto: 300 px; "draggable = false resizable = false> </div> <a id="buyfund" class="easyui-linkbutton"> 测试 链接 按钮 </a> <div id = "fundinfo" class = "easyui-dialog" style = " ancho: 400px; alto: 300px "> </div> -> </body> </html>
效果图如下：
