浏览代码

增加JS插件-通知消息指定跳转链接

如沐春 5 年之前
父节点
当前提交
d4627d5f28
共有 2 个文件被更改,包括 32 次插入5 次删除
  1. 15 4
      js/lightyear.js
  2. 17 1
      lyear_js_notify.html

+ 15 - 4
js/lightyear.js

@@ -30,13 +30,13 @@ var lightyear = function(){
      * @param $align 'left', 'right', 'center'
      * @author CaiWeiMing <314013107@qq.com>
      */
-    var tips = function ($msg, $type, $delay, $icon, $from, $align) {
+    var tips = function ($msg, $type, $delay, $icon, $from, $align, $url) {
         $type  = $type || 'info';
         $delay = $delay || 1000;
         $from  = $from || 'top';
         $align = $align || 'center';
         $enter = $type == 'danger' ? 'animated shake' : 'animated fadeInUp';
-
+		$url = $url || url;
         jQuery.notify({
             icon: $icon,
             message: $msg
@@ -61,13 +61,24 @@ var lightyear = function(){
                 exit: 'animated fadeOutDown'
             }
         });
+		if($url!=''){
+			setTimeout(function(){
+				window.location.href=$url;
+			},$delay);
+		}
+		
     };
 	
+	var url = '';
+	
 	return {
         // 页面小提示
-        notify  : function ($msg, $type, $delay, $icon, $from, $align) {
-            tips($msg, $type, $delay, $icon, $from, $align);
+        notify  : function ($msg, $type, $delay, $icon, $from, $align, $url) {
+            tips($msg, $type, $delay, $icon, $from, $align, $url);
         },
+		url : function ($url){
+			url=$url;
+		},
         // 页面加载动画
 		loading : function ($mode) {
 		    pageLoader($mode);

+ 17 - 1
lyear_js_notify.html

@@ -273,6 +273,7 @@
                 
                 <button type="button" class="btn btn-primary" id="example-success-notify">确认修改</button>
                 <button type="button" class="btn btn-dark" id="example-error-notify">修改失败</button>
+				<button type="button" class="btn btn-warning" id="example-success-notify-url">确认后跳转链接</button>
                 
                 <p class="m-t-10">页面加载等待效果</p>
                 <pre><code>lightyear.loading('show');  // 显示
@@ -309,8 +310,13 @@ lightyear.loading('hide');  // 隐藏</code></pre>
                     <td>$align</td>
                     <td>'left', 'right', 'center'</td>
                   </tr>
+				  <tr>
+                    <td>$url</td>
+                    <td>跳转链接,默认不跳转,填写链接后,跳转到该链接</td>
+                  </tr>
                 </table>
-                <pre><code>lightyear.notify('修改成功,页面即将自动跳转~', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');</code></pre>
+                <pre><code>lightyear.notify('修改成功,页面即将自动跳转~', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center' , 'https://www.baidu.com');</code></pre>
+				<pre><code>lightyear.url('https://www.baidu.com');  // 先指定跳转链接<br/>lightyear.notify('修改成功,页面即将自动跳转~', 'success', 5000);</code></pre>
               </div>
             </div>
           </div>
@@ -350,6 +356,16 @@ $('#example-error-notify').on('click', function(){
         lightyear.notify('服务器错误,请稍后再试~', 'danger', 100);
     }, 1e3)
 });
+$('#example-success-notify-url').on('click', function(){
+	lightyear.loading('show');
+    // 假设ajax提交操作
+    setTimeout(function() {
+        lightyear.loading('hide');
+		lightyear.url('https://www.baidu.com');
+        lightyear.notify('修改成功,页面即将自动跳转~', 'success', 3000);
+    }, 1e3)
+  
+});
 </script>
 </body>
 </html>