Mobile Menu Will Come Here.
隐藏
柏港 js

结合layer插件ajax弹出层

发布：2015/6/11 23:20:20作者：管理员 来源：本站 浏览次数：1315

layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。
IndexController.class.php代码
  1. public function index(){
  2.         $this->user=M('User')->select();
  3.         $this->display();    
  4.     }
  6.     //添加栏目
  7.     public function add(){
  8.         $this->display();
  9.     }
  10.     //保存栏目数据
  11.     public function areate(){
  12.         if(M('User')->add($_POST)){
  13.             $this -> success('添加成功！','index');
  14.         } else {
  15.             $this -> error('添加失败！');
  16.         }
  17.     }
  19.     public function edit(){
  20.         $id = $_GET['id'];
  21.         $this->user =M('User')->find($id);
  22.         $this->display();   
  23.     }
  24.     public function updates(){
  25.         $data['id']=$_POST['id'];
  26.         $data['username']=$_POST['username'];
  27.         $arr->data=M('User')->save($data);
  28.         if($arr>0){
  29.             $this -> success('修改成功！','index');
  30.         }else{
  31.             $this -> error('修改失败！');
  32.         }
  33.     }
复制代码
index.html代码
  1. <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <!-- 引入 jquery 和 layer 插件 -->
  7.      <script src="http://res.xiami.net/pc/lay/lib.js"></script>
  8.      <script src="__Public__/layer/layer.min.js"></script>
  9.  </head>
  10.  <body>
  11.         <a href="__URL__/add">添加</a>
  12.     <table>
  13.     <volist id="vo" name="user">
  14.         
  15.             <tr>
  16.                 <td>{$vo.username}</td>
  17.                 <td><a href="{:U('Index/edit',array('id'=>$vo['id']))}">修 改</a></td>
  18.             </tr>
  19.         
  20.     </volist>
  21.     </table> 
  23.  </body>
  24.  </html>
复制代码
add.html代码
  1. <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.      <!-- 引入 jquery 和 layer 插件 -->
  7.     <script src="http://res.xiami.net/pc/lay/lib.js"></script>
  8.     <script src="__Public__/layer/layer.min.js"></script>
  9.     <style type="text/css">
  10.         .btn{
  11.             width: 120px;
  12.             height: 40px;
  13.             background: #000;
  14.             color: #fff;
  15.             display: block;
  16.             text-align: center;
  17.             line-height: 40px;
  18.         }
  19.     </style>
  20.  </head>
  21.  <body>
  22.     <form class="form-horizontal" id="form" action="{:U('Index/areate')}" method="post">
  23.      <div class="form-group">
  24.          <label class="col-sm-2 control-label">用户名</label>
  25.          <div class="col-sm-4">
  26.              <input type="text" class="form-control" name="username"  placeholder="请输入用户名" />
  27.          </div>
  28.      </div>
  29.      <div class="form-group">
  30.          <div class="col-sm-offset-2 col-sm-10">
  31.              <a class="btn btn-primary" id="submit">提 交</a>
  32.          </div>
  33.      </div>
  34.  </form>
  36.  <script>
  37.  // ajax 提交表单
  38. $(document).ready(function(){
  39.     $("#submit").click(function(){    // 提交按钮触发事件
  40.         var tourl = $("#form").attr("action");    // 获取 表单的 提交地址
  41.         // 序列化 表单数据 后提交 ，太简洁了
  42.         $.post(tourl,$("form").serialize(),function(data){
  43.             //直接返回首页
  44.             /*layer.msg(data['info'],5,data['status'],function(){
  45.                 location.href = "{:U('Index/index')}"; //自动关闭后返回首页
  46.             });*/
  47.             //确定返回首页还是再次添加
  48.             $.layer({
  49.                 shade: [0.5, '#000'], //弹出层背景颜色
  50.                 dialog: {
  51.                     msg: data['info'], //读取后台返回信息
  52.                     btns: 2,           //设置两个按钮     
  53.                     type: data['status'], //通过返回的代码设置图标 1或0
  54.                     btn: ['返回首页','再次添加'],
  55.                     yes: function(){
  56.                         location.href = "{:U('Index/index')}"; //关闭后返回首页
  57.                     }, no: function(){
  58.                         location.reload(); //关闭后刷新页面
  59.                     }
  60.                 }
  61.             });            
  62.         });
  63.     });
  64.  });
  65.  </script>
  66.  </body>
  67.  </html>
　JS中字符串转换为日期对象的方法
jQuery实现无刷新切换主题皮肤功能　

柏港为您推荐了一些相关资讯

结合layer插件ajax弹出层 layer弹出层框架alert与msg详解

© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4