码迷,mamicode.com
首页 > 其他好文 > 详细

会议室预定终章

时间:2018-02-14 17:33:13      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:会议室   字体   src   -o   orm   opened   span   索引   小图标   

1. 会议室预定功能简介

用户登陆系统,可以预定会议室,退订,不可对其他用户预定的会议室预定

2. 会议室知识点扩充

2.1 加载框

加载框的含义是,每次数据提交会有一些效果,比如转圈等

本质利用了遮罩层

技术分享图片
{#        模态对话框形式的加载框#}
        .hide{
            display: none;
        }
        .shade {
            position: fixed;
            z-index: 1040;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #999;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }

        .loading {
            position: fixed;
            z-index: 1050;
            top: 40%;
            left: 50%;
            height: 32px;
            width: 32px;
            margin: 0 0 0 -16px;
            background: url(/static/img/loading.gif);
        }

============ body

   {#    遮罩层#}
    <!-- 遮罩层开始 -->
    <div id=shade class=shade hide></div>
    <!-- 遮罩层结束 -->
    <!-- 加载层开始 -->
    <div id=loading class=loading hide></div>
    <!-- 加载层结束 -->

============  只需要在数据需要刷新的时候出现,或者隐藏就可以了
  $(.shade,.loading).addClass(hide);
遮罩层模拟加载框

2.2 时间插件

时间插件指的是自己选则时间,只能大于等于今天的一个插件

技术分享图片
{#    input时间插件#}
    <link rel="stylesheet" href="{% static ‘plugins/datetimepicker/bootstrap-datetimepicker.min.css‘ %}">


{#   input时间框#}
    <div class=input-group style="width: 230px">
        <input type=text class="form-control" id=datetimepicker11 placeholder="请选择日期"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar">
            </span>
        </span>
    </div>

{#bootstrap的js#}
<script src="{% static ‘plugins/bootstrap/js/bootstrap.min.js‘ %}"></script>
{#datetimepicker的js还依赖jquery的js#}
<script src="{% static ‘plugins/datetimepicker/bootstrap-datetimepicker.min.js‘ %}"></script>
{#datetimepicker的字体#}
<script src="{% static ‘plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js‘ %}"></script>

  页面加载完自动执行#}
         $(#datetimepicker11).datetimepicker({
            minView: "month",   // 最小月,不写这个,到小时分:分钟
            language: "zh-CN",
            sideBySide: true,
            format: yyyy-mm-dd,
            bootcssVer: 3,   //bootsrap 3格式生成小图标
            startDate: new Date(),  // 开始日期
            autoclose: true   // 页面自动关闭
         }).on(changeDate, changeDate);
时间插件
技术分享图片
    // input选择时间,ev是input选中的时间,是个时间对象
    function changeDate(ev) {
        chose_date = ev.date.Format(yyyy-MM-dd);  // 更新了全局变量INPUT时间
         getbookinfo(chose_date)
    }
时间插件选中时间触发事件

http://www.bootcss.com/p/bootstrap-datetimepicker/

2.3 js的扩展方法

扩展方法是指给原来没有该功能,扩展一个功能出来

技术分享图片
                给字符串扩展方法
        v = ‘aaaa’
        String.prototype.xxx = function(arg){
            return ‘888’
        }
        v.xxx = 888
        

        给日期扩展方法,date类型变成字符串类型
        v = new Date()
        Date.prototype.Format = function (fmt){
            对fmt进行处理,就是获取日期,拼接的
        }
        v.Format (‘yyyy-MM-dd’)            
js扩展方法
技术分享图片
// 获取当前时间,如果用户取的是未来几天的,只需要传个参数即可
{#    d = new Date();#}
{#    d.getDate() 日期#}
{#    d.getFullYear() 年份#}
{#    d.getMonth() 月份+1#}

    // 对Date的扩展,将 Date 转化为指定格式的String
    // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
    // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
    // 例子:
    // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
    // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(),      //"h+": this.getHours(),     //小时
            "m+": this.getMinutes(),   //"s+": this.getSeconds(),   //"q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };
js时间扩展方法格式成字符串

2.4 js数组索引

技术分享图片
// 在ADD中找到并删除
                var index = post_data.add[room_id].indexOf(time_id);  // 数组索引
                if(index !== -1){ // 我想取消的,如果没有这个索引返回的是-1
                     post_data.add[room_id].splice(index,1); // 插入
                }
数组

3. 数据格式

技术分享图片
# 生成这样的数据
# data = [
#     [{‘text‘:‘海天盛宴‘,‘attrs‘:{}},{‘text‘:‘王大锤‘,‘attrs‘:{‘room_di‘:1,‘time_id‘:1,‘class‘:‘chose‘}},{‘text‘:‘‘,‘attrs‘:{‘room_di‘:1,‘time_id‘:2,‘class‘:‘‘}},],  # 表示王大锤预定
#     [{‘text‘:‘天上人间‘,‘attrs‘:{}},{‘text‘:‘egon‘,‘attrs‘:{‘room_di‘:2,‘time_id‘:1,‘class‘:‘chose‘}},{‘text‘:‘joker‘,‘attrs‘:{‘room_di‘:2,‘time_id‘:2,‘class‘:‘chose‘}},],  # 表示王大锤预定
#     [{‘text‘:‘信阳会所‘,‘attrs‘:{}},{‘text‘:‘‘,‘attrs‘:{‘room_di‘:3,‘time_id‘:1,‘class‘:‘‘}},{‘text‘:‘eva‘,‘attrs‘:{‘room_di‘:3,‘time_id‘:2,‘class‘:‘chose‘}},],  # 表示王大锤预定
# ]
这样的数据格式

 

会议室预定终章

标签:会议室   字体   src   -o   orm   opened   span   索引   小图标   

原文地址:https://www.cnblogs.com/jokerbj/p/8448532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!