【UI基础】——提示框和警示框的实现

2024-08-26 13:38

本文主要是介绍【UI基础】——提示框和警示框的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前期工作

     1、添加“jquery-easyui-1.3.2”文件夹

      刚建立解决方案的时候“Content”文件夹下是没有“jquery-easyui-1.3.2”文件夹的,所以解决方案里是没有easyui的引用,提示框的效果需要通过easyui的引用才能达到。所以建立解决方案后需要从已有的系统(如:ITOO.UINonQueryProperties.Client)里复制这个文件夹到“Content”这个文件下。

                                               

       2、在Views中添加引用,需要在Layout.cshtml中添加如下代码(拖拽相关文件即可):



 

3、

1)编写js代码及其引用


               

    

       代码编写:

<span style="font-size:18px;">//警示框代码
function button() {$.extend($.messager.defaults, {ok: "确定",cancel: "取消"});$.messager.alert('提醒', '5秒后关闭!', 'info');
}//成功加载页面右下角生成的提示框代码
$(function Prompt() {$.messager.show({title: 'My Title',msg: 'Message will be closed after 5 seconds.',timeout: 5000,showType: 'slide'});});</span>


2)在Index.cshtml视图中引用(拖拽改文件即可)



3)提示框是在页面里的某些操作成功或失败后在窗体的右下角弹出来的,警醒框是在点击某个按钮,因为用户不合理的操作而弹出来的警醒框,所以警醒框的js方法要放在button按钮的“onlinck”事件里才能够实现,其中需要注意的是警醒框里的js方法名要与“onlinck”里的引用的事件名称一致。如图:






效果

     1、警醒框



      代码注解:

      显示一个警告提示窗口。参数:

      title:显示在头部面板上的标题文本。

      msg:要显示的消息文本。

      icon:要显示的图标图片。可用的值是:error、question、info、warning。

      fn:当窗口关闭时触发的回调函数。

      $.messager.alert('MyTitle','Here is a info message!','info');


   2、添加、编辑成功提示框



     1)  代码注解:

2) $.messager.show({

3)    title:'My Title',

4)    msg:'Message will be closedafter 5 seconds.',

5)    timeout:5000,

6)    showType:'slide'

7) });


代码参数:

在屏幕的右下角显示一个消息窗口,options 参数是一个配置对象:

showType: 定义消息窗口如何显示。可用的值是:null、slide、fade、show。默认是 slide。

showSpeed: 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是600。

width:定义消息窗口的宽度。默认是 250。

height:定义消息窗口的高度。默认是 100。

title:头部面板上显示的标题文本。

msg:要显示的消息文本。

style:定义消息窗口的自定义样式。

timeout:如果定义为0,除非用户关闭,消息窗口将不会关闭。如果定义为非0 值,消息窗口将在超时后自动关闭。默认是4 秒。


总结

         越发的觉得每个功能实现的背后都有不少的知识等待着我们去学习专研,也越发得觉得需要学习的内容有好多好多。

这篇关于【UI基础】——提示框和警示框的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108715

相关文章

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结