Thinkphp自定义美化success和error提示跳转页面

于 2024-04-05 14:49:57 发布
阅读量874 收藏 23
点赞数 16
分类专栏： 程序员 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goodhighting/article/details/137400655
版权

/success short animate/

@-webkit-keyframes success_short_Animation {

0% {

width: 0;

left: 1px;

top: 19px;

}

54% {

width: 0;

left: 1px;

top: 19px;

}

70% {

width: 50px;

left: -4px;

top: 37px;

}

84% {

width: 17px;

left: 21px;

top: 48px;

}

100% {

width: 25px;

left: 14px;

top: 45px;

}

}

@-moz-keyframes success_short_Animation {

0% {

width: 0;

left: 1px;

top: 19px;

}

54% {

width: 0;

left: 1px;

top: 19px;

}

70% {

width: 50px;

left: -4px;

top: 37px;

}

84% {

width: 17px;

left: 21px;

top: 48px;

}

100% {

width: 25px;

left: 14px;

top: 45px;

}

}

@-webkit-keyframes success_short_Animation {

0% {

width: 0;

left: 1px;

top: 19px;

}

54% {

width: 0;

left: 1px;

top: 19px;

}

70% {

width: 50px;

left: -4px;

top: 37px;

}

84% {

width: 17px;

left: 21px;

top: 48px;

}

100% {

width: 25px;

left: 14px;

top: 45px;

}

}

/success short animate/

/success long animate/

@-webkit-keyframes success_long_Animation {

0% {

width: 0;

right: 46px;

top: 54px;

}

65% {

width: 0;

right: 46px;

top: 54px;

}

84% {

width: 55px;

right: 0px;

top: 35px;

}

100% {

width: 47px;

right: 8px;

top: 38px;

}

}

@-moz-keyframes success_long_Animation {

0% {

width: 0;

right: 46px;

top: 54px;

}

65% {

width: 0;

right: 46px;

top: 54px;

}

84% {

width: 55px;

right: 0px;

top: 35px;

}

100% {

width: 47px;

right: 8px;

top: 38px;

}

}

@-webkit-keyframes success_long_Animation {

0% {

width: 0;

right: 46px;

top: 54px;

}

65% {

width: 0;

right: 46px;

top: 54px;

}

84% {

width: 55px;

right: 0px;

top: 35px;

}

100% {

width: 47px;

right: 8px;

top: 38px;

}

}

/success long animate/

/load_Animation/

@-webkit-keyframes load_Animation {

0% {

-webkit-transform: scale(0.6);

opacity: 0.2;

}

50% {

-webkit-transform: scale(0.6);

opacity: 0.5;

}

80% {

-webkit-transform: scale(1.15);

opacity: 0.8;

}

100% {

-webkit-transform: scale(1);

opacity: 1.0;

}

}

@-moz-keyframes load_Animation {

0% {

-webkit-transform: scale(0.6);

opacity: 0.2;

}

50% {

-webkit-transform: scale(0.6);

opacity: 0.5;

}

80% {

-webkit-transform: scale(1.15);

opacity: 0.8;

}

100% {

-webkit-transform: scale(1);

opacity: 1.0;

}

}

@-webkit-keyframes load_Animation {

0% {

-webkit-transform: scale(0.6);

opacity: 0.2;

}

50% {

-webkit-transform: scale(0.6);

opacity: 0.5;

}

80% {

-webkit-transform: scale(1.15);

opacity: 0.8;

}

100% {

-webkit-transform: scale(1);

opacity: 1.0;

}

}

/load_Animation/

/lose_Animation/

@-webkit-keyframes lose_Animation {

0% {

-webkit-transform: scale(0.6);

opacity: 0.2;

}

50% {

-webkit-transform: scale(0.6);

opacity: 0.5;

}

80% {

-webkit-transform: scale(1.15);

opacity: 0.8;

}

100% {

-webkit-transform: scale(1);

opacity: 1.0;

}

}

@-moz-keyframes lose_Animation {

0% {

-webkit-transform: scale(0.6);

opacity: 0.2;

}

50% {

-webkit-transform: scale(0.6);

opacity: 0.5;

}

80% {

-webkit-transform: scale(1.15);

opacity: 0.8;

}

100% {

-webkit-transform: scale(1);

opacity: 1.0;

}

}

@-webkit-keyframes lose_Animation {

0% {

-webkit-transform: scale(0.6);

opacity: 0.2;

}

50% {

-webkit-transform: scale(0.6);

opacity: 0.5;

}

80% {

-webkit-transform: scale(1.15);

opacity: 0.8;

}

100% {

-webkit-transform: scale(1);

opacity: 1.0;

}

}

/lose_Animation/

.load {

position: relative;

width: 60px;

height: 80px;

border-radius: 50px;

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

border: 4px solid #fff;

margin: 15px auto 5px auto;

top: 10px;

}

.load .icon_box {

margin: 10px auto;

width: 60px;

height: 60px;

}

.load .cirBox1,

.load .cirBox2,

.load .cirBox3 {

width: 60px;

height: 60px;

position: absolute;

left: 0;

top: 0;

}

.load .cirBox1 > div,

.load .cirBox2 > div,

.load .cirBox3 > div {

width: 10px;

height: 10px;

border-radius: 100%;

-webkit-border-radius: 100%;

-moz-border-radius: 100%;

background-color: #ccc;

position: absolute;

}

.load .cirBox1 {

transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

}

.load .cirBox2 {

transform: rotate(60deg);

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

}

.load .cirBox3 {

transform: rotate(90deg);

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

}

.load .cir1 {

left: 0;

top: 0;

}

.load .cir2 {

right: 0;

top: 0;

}

.load .cir3 {

right: 0;

bottom: 0;

}

.load .cir4 {

left: 0;

bottom: 0;

}

.load .cir1,

.load .cir2,

.load .cir3,

.load .cir4 {

-webkit-animation: cir_Animation 1.2s ease 0s infinite;

-moz-animation: cir_Animation 1.2s ease 0s infinite;

animation: cir_Animation 1.2s ease 0s infinite;

}

.cirBox1 .cir2 {

-webkit-animation-delay: -1.1s;

-moz-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.cirBox1 .cir3 {

-webkit-animation-delay: -0.8s;

-moz-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.cirBox1 .cir4 {

-webkit-animation-delay: -0.5s;

-moz-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.cirBox2 .cir2 {

-webkit-animation-delay: -1s;

-moz-animation-delay: -1s;

animation-delay: -1s;

}

.cirBox2 .cir3 {

-webkit-animation-delay: -0.7s;

-moz-animation-delay: -0.7s;

animation-delay: -0.7s;

}

.cirBox2 .cir4 {

-webkit-animation-delay: -0.4s;

-moz-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.cirBox3 .cir2 {

-webkit-animation-delay: -0.9s;

-moz-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.cirBox3 .cir3 {

-webkit-animation-delay: -0.6s;

-moz-animation-delay: -0.6s;

animation-delay: -0.6s;

}

.cirBox3 .cir4 {

-webkit-animation-delay: -0.3s;

-moz-animation-delay: -0.3s;

animation-delay: -0.3s;

}

@-webkit-keyframes cir_Animation {

0%,

80%,

100% {

-webkit-transform: scale(0.4);

}

40% {

-webkit-transform: scale(1);

}

}

@-moz-keyframes cir_Animation {

0%,

80%,

100% {

-webkit-transform: scale(0.4);

}

40% {

-webkit-transform: scale(1);

}

}

@-webkit-keyframes cir_Animation {

0%,

80%,

100% {

-webkit-transform: scale(0.4);

}

40% {

-webkit-transform: scale(1);

}

}

.mask {

width: 100%;

height: 100%;

background-color: #000;

opacity: .8;

position: fixed;

left: 0;

top: 0;

z-index: 1000;

}

2、修改application/config.php里，默认跳转页面对应的模板文件

// 视图输出字符串内容替换

‘view_replace_str’ => [‘STATIC’=>‘/static’],

// 默认跳转页面对应的模板文件

//‘dispatch_success_tmpl’ => THINK_PATH . ‘tpl’ . DS . ‘dispatch_jump.tpl’,

//‘dispatch_error_tmpl’ => THINK_PATH . ‘tpl’ . DS . ‘dispatch_jump.tpl’,

‘dispatch_success_tmpl’ => THINK_PATH . ‘tpl’ . DS .‘default_jump.tpl’,

‘dispatch_error_tmpl’ => THINK_PATH . ‘tpl’ . DS .‘default_jump.tpl’,

3、在thinkphp/tpl目录下新建一个default_jump.tpl，代码如下：

{NOLAYOUT}

跳转提示
<?php switch ($code) {?> <?php case 1:?>
<?php echo(strip_tags($msg));?>
<?php break;?> <?php case 0:?>
<?php echo(strip_tags($msg));?>
<?php break;?> <?php } ?>

页面自动跳转 等待时间： <?php echo($wait);?>

点击跳转

goodhighting
关注
  • 16
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Thinkphp自定义美化success和error提示跳转页面，想自学Android的速来
m0_66264673的博客
01-28 1265
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; } /animation start/ #animationTipBox { width: 100%; height: auto; background-color: #fff; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; position: fixed; left: 50%; to
ThinkPHP页面跳转success与error方法概述
10-25
主要介绍了ThinkPHP页面跳转success与error方法概述,需要的朋友可以参考下
ThinkPHP中自定义错误页面和提示页面实例
12-18
本文实例讲述了ThinkPHP中自定义错误页面和提示页面的方法。分享给大家供大家参考。具体实现方法如下： 在ThinkPHP中有两个方法时提示错误页面 _404(‘错误信息’,’跳转的地址’);halt(‘提示信息’); 这两个函数都可以自定义错误页面在配置文件中加 复制代码 代码如下:’TMPL_EXCEPTION_FILE’=>’./Public/Tpl/error.html’ 这样每次就会跳转到这个页面。 下面是我定制的错误页面 复制代码 代码如下:在( 3 )秒后自动跳转，或直接点击 这里 跳转 停止 $this->success(‘错误信息’,’跳转的地址(最好用U())’,时间);
ThinkPHP自定义错误页面、成功页面及异常页面
diaobang0776的博客
02-22 2913
为什么会选择 ThinkPHP 呢？首先，作为一款国产PHP框架，文档肯定比国外那些框架要丰富的多，而且容易看懂；其次，ThinkPHP已经发展了七八年的时间了，相对来说已经比较成熟了；当然，最重要的是它比较轻量级，相对其他的框架来说比较容易上手，所以就选择了ThinkPHP。 好了话不多说，下面分享第一篇笔记~ ThinkPHP 作为一款轻量级PHP开发框架，它为我们提...
修改Thinkphp3.2中的跳转提示页面
Json的知识梦工厂
10-26 2113
技术QQ交流群:294088839     if(C('LAYOUT_ON')) {         echo '{__NOLAYOUT__}';     } ?> 跳转提示            { ?>             layer.msg('',{icon:6,time:1500},function(){
TinkPHP3.2.2中调用自定义跳转页面
haokuangjie123的博客
09-28 992
TP框架里自带跳转页面。比如：$this->succes(“成功”); $this->error("失败"); 当调用这两个方法时会调用TP框架中自带的跳转页面。 不过它自带的页面实在是丑。所以我想自己弄一个页面，设置跳转调用。 打开它的配置文件，ThinkPHP/Conf/Convention.php 这两个是配置调用的模板文件，我们最好不要动TP里面的东西。所以要在APP/Co
thinkphp3.2.3跳转页面的美化（Thinkphp\Tpl\dispatch_jump.tpl文件）（2018-01-20 15:17）
hello PHP的博客
01-20 2849
<?php if(C('LAYOUT_ON')) { echo '{__NOLAYOUT__}'; } ?> 跳转中 .buffer { background-color: black; height: 100%; width: 60%;
Thinkphp自定义美化success和error提示跳转页面，2024Android春招面试
最新发布
m0_60666921的博客
03-22 1023
我见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了5、6年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。不断奔跑，你就知道学习的意义所在！
think php success美化,ThinkPHP页面跳转success与error方法概述
weixin_42361929的博客
03-10 397
ThinkPHP自身提供了success方法与error方法用于实现带提示信息的页面跳转功能，可实现添加数据后显示提示信息并跳转的效果。success 方法用于操作成功后的提示，error 用于操作失败后的提示，二者使用方法完全一致，下面以success 方法来进行说明。1、success方法success方法语法如下：success(message, ajax)参数说明message可选。页面提...
thinkphp5最美跳转页面
weixin_34112900的博客
09-05 517
声明下：此教程来自TP官网，如果需要看原文，请点击一下链接 http://www.thinkphp.cn/code/3437.html 先给大家看下效果： 直接撸代码： 第一步：为了增加对移动设备的支持，在common.php加入以下函数： function isMobile() { if (isset ($_SERVER['HTTP_X_...
php 错误页面,ThinkPHP中自定义错误页面和提示页面
weixin_29194255的博客
03-10 649
这篇文章主要介绍了ThinkPHP中自定义错误页面和提示页面的方法,以一个完整的实例形式详细讲述了ThinkPHP实现自定义错误提示与跳转页面的方法,是非常常见的实用技巧,需要的朋友可以参考下本文实例讲述了ThinkPHP中自定义错误页面和提示页面的方法。分享给大家供大家参考。具体实现方法如下：在ThinkPHP中有两个方法时提示错误页面 _404('错误信息','跳转的地址');halt('提示...
ThinkPHP跳转页success及error模板实例教程
10-25
主要介绍了ThinkPHP跳转页success及error模板实例教程,可以帮助初学者进一步熟悉ThinkPHP的页面跳转流程,需要的朋友可以参考下
thinkphp3.2自定义success及error跳转页面
weixin_30484739的博客
05-09 153
thinkphp3.2自定义success及error跳转页面 默认的thinkphp success及error的默认模板不是很好看，下面分享如何自定义success及error页面，这里用的是thinkphp 3.2.2版本 默认的thinkphp success及error的默认模板不是很好看，下面分享大家如何自定义success及error页面，这里用的是thinkphp 3...
漂亮的thinkphp 跳转页封装
软件工程小施同学 的专栏
02-07 5050
项目是要一点点按优先级进行优化的，现在到优化thinkphp的跳转页了。 <?php if(C('LAYOUT_ON')) { echo '{__NOLAYOUT__}'; } ?> 跳转中 .buffer{ background-color: black; he
thinkphp3.2页面跳转(success/error)自定义模板终于解决了
风吹花儿香
08-31 7386
thinkphp3.2页面跳转(success/error)自定义模板终于解决了，折腾了好久，找答案找不到满意的，最终还是靠自己解决了！把代码贴出来，准备睡觉！ 在config.php里面配置信息： /*模板引擎设置*/ 'TMPL_ACTION_ERROR' =&gt; 'Tpl/error', // 默认错误跳转对应的模板文件 'TMPL_ACTION_SUCCESS' ...
think php success美化,ThinkPHP跳转页success及error模板实例教程
weixin_39517241的博客
03-10 309
本文以实例讲解了ThinkPHP跳转页面的success与error方法所对应的视图与控制器的实现方法，通过本实例教程可以帮助读者更好的掌握success方法与error方法的使用。首先是控制器中，可以使用下代码：// 本文档自动生成，仅供测试运行class IndexAction extends Action{/**+---------------------------------------...
thinkPHP学习(1) --- 错误页面自定义
极客仿-www.geekcaff.top
08-09 552
一、定制系统错误页面模板 系统默认的错误模板位于：ThinkPHP/Tpl/think_exception.tpl 我们只需要在项目中修改TMPL_EXCEPTION_FILE配置参数重新指定错误模板即可。 'TMPL_EXCEPTION_FILE'=>'./App/Tpl/Public/error.html' // 定义公共错误模板 注意错误模板的路径是基于入口文件的相对地址或
php框架全局自定义错误,[TP笔记]ThinkPHP自定义错误页面、成功页面及异常页面
weixin_33344572的博客
03-23 441
看了前面分享的一篇《什么是真正的程序员？》，觉得自己离这个目标还差的很远，所以要抓紧朝着这个方向前进。作为一名PHP小码农，掌握一种框架是必须的。所以今天开始我们就从国产PHP框架 ThinkPHP 开始学起~为什么会选择 ThinkPHP 呢？首先，作为一款国产PHP框架，文档肯定比国外那些框架要丰富的多，而且容易看懂；其次，ThinkPHP已经发展了七八年的时间了，相对来说已经比较成熟了；当然...
thinkphp5.1 跳转页面如何传参
05-21
在 ThinkPHP 5.1 中，可以使用 `redirect` 方法进行页面跳转，并且可以通过第二个参数传递参数。具体做法如下： ```php return redirect('路由地址', ['参数名' => '参数值']); ``` 例如，如果要跳转到 `index/index` 路由并传递参数 `name`，可以这样写： ```php return redirect('index/index', ['name' => 'thinkphp']); ``` 在目标控制器的方法中，可以使用 `$this->request->param('参数名')` 获取传递的参数。例如： ```php public function index() { $name = $this->request->param('name'); echo 'Hello, ' . $name; } ``` 这样，在访问 `index/index` 路由时，会输出 `Hello, thinkphp`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值