码迷,mamicode.com
首页 > 移动开发 > 详细

管理外借设备的小工具(简化界面和优化手机界面的功能jquery mobile)

时间:2014-09-16 19:14:01      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:jquery mobile


前阵子写了个小工具,后来经过经理的审核后给了我几个改进的建议,第一是简化界面,这个工具将来会用手机来进行管理,所以界面上要尽量简化,省去不必要的组件,第二是使用jquery mobile来美化界面,第三是使用ajax post方式来提交数据,避免传统的post方法重载整个页面。


第一,我加上了检测客户端设备的页面为首页,这样就能在访问首页的时候根据设备来做重定向,

此代码参考了csdn里某大牛的文章,做了部分修改,原文出自这里:链接

index.php代码为:

    <?php  
       
    function is_mobile(){  
       
    $regExp="/mobile|nokia|iphone|ipad|android|samsung|htc|motorola|blackberry|ericsson|huawei|dopod|amoi|gionee|^sie\-|^bird|^zte\-|haier|";  
       
    $regExp.="blazer|netfront|helio|hosin|novarra|techfaith|palmsource|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";  
       
    $regExp.="symbian|smartphone|midp|wap|phone|windows ce|CoolPad|webos|iemobile|^spice|longcos|pantech|portalmmm|";  
       
    $regExp.="alcatel|ktouch|nexian|^sam\-|s[cg]h|^lge|philips|sagem|wellcom|bunjalloo|maui|";  
       
    $regExp.="jig\s browser|hiptop|ucweb|ucmobile|opera\s*mobi|opera\*mini|mqqbrowser|^benq|^lct";  
       
    $regExp.="480×640|640x480|320x320|240x320|320x240|176x220|220x176/i";  
       
            if(!isset($_SERVER[‘HTTP_USER_AGENT‘])){  
       
                    return true;  
       
            }else{  
       
                    return @$_GET[‘mobile‘] || isset($_SERVER[‘HTTP_X_WAP_PROFILE‘]) || isset($_SERVER[‘HTTP_PROFILE‘]) || preg_match($regExp, strtolower($_SERVER[‘HTTP_USER_AGENT‘]));  
       
            }  
       
    }  
       
    ?>  
       
    <?php echo ‘you are ‘.(is_mobile()? ‘mobile‘ : ‘desktop‘).‘ user, redirecting...‘;?>
    <?php is_mobile()? $rd_link=‘mobile.php‘ : $rd_link=‘desktop.php‘;
        echo $rd_link;
        header("Location:$rd_link");    
    ?>


第二,桌面版界面我改成这样了

bubuko.com,布布扣


跟之前的对比:

bubuko.com,布布扣


是不是简洁了很多?

desktop.php

桌面版主要使用jquery的document.ready来检测事件,使用传统的post提交数据

代码附上:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/tooltipster-master/css/tooltipster.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltipster-master/js/jquery.tooltipster.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".borrow_disable").attr(‘disabled‘,‘disable‘);
    $(".return_disable").attr(‘disabled‘,‘disable‘);
    $(".select_staff").each(function(){
        var staff=$(this).val();
        //alert(staff);
        $(this).closest(‘td‘).next().find(‘input[name="staff"]‘).val(staff);
    })

    $(".select_staff").each(function(){
        $(this).change(function(){
        var staff=$(this).val();
        $(this).closest(‘td‘).next().find(‘input[name="staff"]‘).val(staff);
    });
        //alert(staff);
    })

    $(".borrow_form").each(function(){
      $(this).submit(function(event){
          var staff=$(this).find(‘input[name="staff"]‘).val();
          if (staff=="N/A")
              {
                  event.preventDefault();
                  alert(‘please select a staff!‘);
              }

    })
      })
    
    $(".machine").each(function(){
            $(this).tooltipster({
                 position:‘left‘
            })    ;
    })


    $(".borrow_time").each(function(){
            $(this).tooltipster({
                 position:‘right‘,
                 contentAsHTML: true
            })    ;
    })

    $(".return_time").each(function(){
            $(this).tooltipster({
                 position:‘right‘,
                 contentAsHTML: true
            })    ;
    })

});
</script>
</head>
<body>
<div class=title>
<h3>6waves device management</h3>
</div>
<div class=content>
<table>
<tr><th>Device</th><th>Staff</th><th>Action</th></tr>
<?php
require_once(‘device_management/database.php‘);
require_once(‘device_management/config.inc‘);
$staff_list=$staff;
$DB = new Database ($DB["host"], $DB["user"], $DB["pass"], $DB["name"]);

if ($_REQUEST[‘borrowed‘]==1)
    {
        $data[‘borrowed‘]=1;
        if    ((!empty($_REQUEST[‘device_id‘])) and (!empty($_REQUEST[‘staff‘])) and ($_REQUEST[‘staff‘]!=="N/A"))
            {
                $data[‘device_id‘]=$_REQUEST[‘device_id‘];
                $data[‘staff‘]=$_REQUEST[‘staff‘];
                $data[‘borrow_time‘]=date(‘Y-m-d H:i:s‘,time());
                $wherestr="`device_id`=‘".$data[‘device_id‘]."‘";
                $DB->updateRecord(‘device_map‘,$data,$wherestr);
            }
    }
if ($_REQUEST[‘borrowed‘]==0)
    {
        $data[‘borrowed‘]=0;
        if    (!empty($_REQUEST[‘device_id‘]))
            {
                $data[‘device_id‘]=$_REQUEST[‘device_id‘];
                $data[‘staff‘]=$_REQUEST[‘staff‘];
                $data[‘return_time‘]=date(‘Y-m-d H:i:s‘,time());
                $wherestr="`device_id`=‘".$data[‘device_id‘]."‘";
                $DB->updateRecord(‘device_map‘,$data,$wherestr);
            }
}
//var_dump($data);

$sql="select `device_id`,`type`,`alias` ,  `staff`,`borrowed`,`borrow_time`,`return_time` from `device_map`";
$rs=$DB->Query($sql);
while ($row=mysql_fetch_assoc($rs) )
    {
            $machine=$row[‘device_id‘];
            $type=$row[‘type‘];
            $alias=$row[‘alias‘];
            $device_icon="./image/".$row[‘type‘].".png";
            if ($row[‘borrow_time‘]!==‘0000-00-00 00:00:00‘)
                {
                    $borrow_time=$row[‘borrow_time‘];
                    $borrow_time_class="borrow_time";
                }
            else 
                {    
                    $borrow_time="N/A";
                    $borrow_time_class="no_time";
                }
            if ($row[‘return_time‘]!==‘0000-00-00 00:00:00‘)
                {
                    $return_time=$row[‘return_time‘];
                    $return_time_class="return_time";
                }
            else
                {
                     $return_time="N/A";
                     $return_time_class="no_time";
                }

            if    (is_null($row[‘staff‘] ))
                {
                    $staff="N/A";
                }
            else $staff=$row[‘staff‘];
            if ($staff=="N/A")
                {
                    $staff="N/A";
                }
            if ($row[‘borrowed‘]==0)
                {
                    $borrow_class=‘borrow_enable‘;
                    $borrowed=0;
                    $return_class=‘return_disable‘;
                    $last_borrow=$row[‘borrow_time‘];
                    $last_return=$row[‘return_time‘];
                    $status="available";
                    $status_class=$return_time_class;
                    $info="last borrow time: ".$last_borrow."&lt;br/&gt; last return time: ".$last_return;
                    $borrow_form="<form  class=borrow_form method=post><input class=hidden value=$machine name=device_id><input class=\"hidden\" value=\"\" name=staff><input class=hidden value=1 name=borrowed><input class=$borrow_class type=submit value=borrow></form>";
                    $form=$borrow_form;
                }
            else
                {
                    $borrow_class=‘borrow_disable‘;
                    $borrowed=1;
                    $return_class=‘return_enable‘;
                    $last_borrow=$row[‘borrow_time‘];
                    $status="borrowed";
                    $status_class=$borrow_time_class;
                    $info="last borrow time: ".$last_borrow;
                    $return_form="<form  class=return_form method=post><input class=hidden value=$machine name=device_id><input class=hidden value=0 name=borrowed><input class=$return_class type=submit value=return></form>";
                    $form=$return_form;
                }
            $options="";
            //echo $staff;exit;
            if ($staff=="N/A") 
                        {
                            $options="<option selected value=\"N/A\">N/A</option>"    ;
                            //echo $options."\n";
                        }
            else
                        {
                            $options="<option value=\"N/A\">N/A</option>"    ;
                            $selected_class="unselected";
                        }
            foreach ($staff_list as $stf)
                {
                    if ($staff == $stf)
                        {
                            $options.="<option style=\"background-color:green;color:#FFF\" selected value=\"".$staff."\">$staff</option>"    ;
                            $selected_class="selected";
                        }
                    else 
                        {
                            $options.="<option value=\"$stf\">$stf</option>";
                            //$selected_class="unselected";
                        }
                }
            //echo $options;
            echo "<tr><td class=machine title=\"$alias\"><img class=device_icon title=\"$alias\" src=$device_icon><span title=\"$alias\">".$machine."</span></td><td class=staff><select class=\"select_staff\" name=staff>$options</select></td><td class=$status_class title=\"$info\">$form</td></tr>";
    //    }
}
$DB->Close();
?>
</table>
</div>
</body>
</html>


第三,手机版的界面改进

效果图:

bubuko.com,布布扣


有木有发现按钮和选择框都被放大了很多?这是主要为了显示在手机上而优化的,直接应用了jquery

 mobile的库,mobile.php代码如下:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
//这一行很管用,主要是在手机里能100%显示并禁止缩放界面
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/tooltipster-master/css/tooltipster.css">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css">
<!--<link rel="stylesheet" type="text/css" href="css/jquery.mobile.min.css">-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
//加载jquerymobile的css和js库
<script type="text/javascript" src="js/tooltipster-master/js/jquery.tooltipster.min.js"></script>
<script type="text/javascript">

/*检测选择框里员工名字的改变传递给表单*/  
$(document).on(‘change‘,‘.select_staff‘,function(){ 
        var staff=this.value;
        $(this).closest(‘td‘).next().find(‘input[name="staff"]‘).val(staff);
    });
  

/*检测titile的变化并触发tooltipster来改变提示字符串*/
$(document).on(‘change‘,‘.borrow_time‘,function(){ 
                 $(this).tooltipster({
                 position:‘left‘,
                 contentAsHTML: true
            })    ;

    });


$(document).on(‘change‘,‘.return_time‘,function(){ 
                 $(this).tooltipster({
                 position:‘right‘,
                 contentAsHTML: true
            })    ;

    });

    
//$(document).ready(function(){
//jquery.document.ready在手机里加载后不管用,只能用以下on pageinit事件来检测触发
$(document).on(‘pageinit‘,function(){
    //$(".borrow_disable").attr(‘disabled‘,‘disable‘);
    //$(".return_disable").attr(‘disabled‘,‘disable‘);
    $(".select_staff").each(function(){
        var staff=$(this).val();
        $(this).closest(‘td‘).next().find(‘input[name="staff"]‘).val(staff);
    })

/*以下使用ajax post的方式提交数据给后台cgi.php处理,并根据返回的数据处理前端的变更*/
    $(".borrow_form").submit(function(event){
          var staff=$(this).find(‘input[name="staff"]‘).val();
          var staff_input=$(this).find(‘input[name="staff"]‘);
          var span_select_staff=$(this).closest(‘td‘).prev().find(‘span.select_staff‘);
          var select_staff=$(this).closest(‘td‘).prev().find(‘select.select_staff‘);
          if (staff=="N/A" || staff=="")
              {
                  event.preventDefault();
                  alert(‘please select a staff!‘);
              }
            // ajax post data start
          else 
            {
                event.preventDefault();
                var device_id=$(this).find(‘input[name="device_id"]‘).val();
                var borrowed=$(this).find(‘input[name="borrowed"]‘).val();
                var borrowed_input=$(this).find(‘input[name="borrowed"]‘);
                //var submit_input=$(this).find(‘input[type="submit"]‘);
                var submit_input=$(this).find(‘div‘);
                var time_object=$(this).closest(‘td‘).next();
                $.post("cgi.php", {device_id:device_id,staff:staff,borrowed:borrowed}, function(resp)
                    {
                        if (resp.error==0)
                            {
                                alert(resp.msg);
                                borrowed_input.val(resp.borrowed_set);
                                //submit_input.text(‘return<br/><input‘+ ‘ type="submit"‘+‘ value="return" ‘+‘ class="return_enable">‘);
                                select_staff.filter(‘option[value=\‘‘+resp.selected_staff+‘\‘]‘).prop(‘selected‘,‘selected‘);
                                //select_staff.prop(‘selected‘,false).filter(‘option[value=\‘‘+resp.selected_staff+‘\‘]‘).prop(‘selected‘,true);
                                //select_staff.val(resp.selected_staff);
                                span_select_staff.text(resp.selected_staff);
                                staff_input.val(resp.selected_staff);
                                submit_input.text(resp.submit_input_value);
                                submit_input.val(resp.submit_input_value);
                                submit_input.append(‘<input‘+ ‘ type="submit"‘+‘ value=‘+resp.submit_input_value+‘>‘);
                                //submit_input.attr(‘class‘,‘return_enable‘);
                                time_object.attr(‘class‘,resp.time_class);
                                time_object.attr(‘title‘,resp.time);
                            }
                        else 
                            {
                                alert(resp.msg);
                            }
                    },"json")
            }    
            // ajax post data end

      })


    $(".machine").tooltipster({
                 position:‘left‘
            })    ;


    $(".borrow_time").tooltipster({
                 position:‘left‘,
                 contentAsHTML: true
            })    ;

    $(".return_time").tooltipster({
                 position:‘left‘,
                 contentAsHTML: true
            })    ;

    $(".borrow_time").change(function(){
                 tooltipster({
                 position:‘left‘
            })    ;
            })    ;

    $(".return_time").change(function(){
                 tooltipster({
                 position:‘left‘
            })    ;
            })    ;


});
</script>
</head>
<body>
<div id="mobile">
<header data-role="header"><h3>6waves device management</h3></header>
<div data-role="content" id="content">
<table>
<thead>
<tr><th>Device</th><th>Staff</th><th>Action</th><th></th></tr>
</thead>
<tbody>
<?php
require_once(‘device_management/database.php‘);
require_once(‘device_management/config.inc‘);
$staff_list=$staff;
$DB = new Database ($DB["host"], $DB["user"], $DB["pass"], $DB["name"]);

if ($_REQUEST[‘borrowed‘]==1)
    {
        $data[‘borrowed‘]=1;
        if    ((!empty($_REQUEST[‘device_id‘])) and (!empty($_REQUEST[‘staff‘])) and ($_REQUEST[‘staff‘]!=="N/A"))
            {
                $data[‘device_id‘]=$_REQUEST[‘device_id‘];
                $data[‘staff‘]=$_REQUEST[‘staff‘];
                $data[‘borrow_time‘]=date(‘Y-m-d H:i:s‘,time());
                $wherestr="`device_id`=‘".$data[‘device_id‘]."‘";
                $DB->updateRecord(‘device_map‘,$data,$wherestr);
            }
    }
if ($_REQUEST[‘borrowed‘]==0)
    {
        $data[‘borrowed‘]=0;
        if    (!empty($_REQUEST[‘device_id‘]))
            {
                $data[‘device_id‘]=$_REQUEST[‘device_id‘];
                $data[‘staff‘]=$_REQUEST[‘staff‘];
                $data[‘return_time‘]=date(‘Y-m-d H:i:s‘,time());
                $wherestr="`device_id`=‘".$data[‘device_id‘]."‘";
                $DB->updateRecord(‘device_map‘,$data,$wherestr);
            }
}
//var_dump($data);

$sql="select `device_id`,`type`,`alias` ,  `staff`,`borrowed`,`borrow_time`,`return_time` from `device_map`";
$rs=$DB->Query($sql);
while ($row=mysql_fetch_assoc($rs) )
    {
            $machine=$row[‘device_id‘];
            $type=$row[‘type‘];
            $alias=$row[‘alias‘];
            $device_icon="./image/".$row[‘type‘].".png";
            if ($row[‘borrow_time‘]!==‘0000-00-00 00:00:00‘)
                {
                    $borrow_time=$row[‘borrow_time‘];
                    $borrow_time_class="borrow_time";
                }
            else 
                {    
                    $borrow_time="N/A";
                    $borrow_time_class="no_time";
                }
            if ($row[‘return_time‘]!==‘0000-00-00 00:00:00‘)
                {
                    $return_time=$row[‘return_time‘];
                    $return_time_class="return_time";
                }
            else
                {
                     $return_time="N/A";
                     $return_time_class="no_time";
                }

            if    (is_null($row[‘staff‘] ))
                {
                    $staff="N/A";
                }
            else $staff=$row[‘staff‘];
            if ($staff=="N/A")
                {
                    $staff="N/A";
                }
            if ($row[‘borrowed‘]==0)
                {
                    $borrow_class=‘borrow_enable‘;
                    $borrowed=0;
                    $return_class=‘return_disable‘;
                    $last_borrow=$row[‘borrow_time‘];
                    $last_return=$row[‘return_time‘];
                    $status="available";
                    $status_class=$return_time_class;
                    $info="last borrow time: ".$last_borrow."&lt;br/&gt; last return time: ".$last_return;
                    $borrow_form="<form  class=borrow_form method=post><input type=hidden value=$machine name=device_id><input type=hidden value=\"\" name=staff><input type=hidden value=1 name=borrowed><input class=$borrow_class type=submit value=borrow></form>";
                    $form=$borrow_form;
                }
            else
                {
                    $borrow_class=‘borrow_disable‘;
                    $borrowed=1;
                    $return_class=‘return_enable‘;
                    $last_borrow=$row[‘borrow_time‘];
                    $status="borrowed";
                    $status_class=$borrow_time_class;
                    $info="last borrow time: ".$last_borrow;
                    $borrow_form="<form  class=borrow_form method=post><input type=hidden value=$machine name=device_id><input type=hidden value=0 name=borrowed><input class=$return_class type=submit value=return></form>";
                    $form=$borrow_form;
                }
            $options="";
            //echo $staff;exit;
            if ($staff=="N/A") 
                        {
                            $options="<option selected value=\"N/A\">N/A</option>"    ;
                            //echo $options."\n";
                        }
            else
                        {
                            $options="<option value=\"N/A\">N/A</option>"    ;
                            $selected_class="unselected";
                        }
            foreach ($staff_list as $stf)
                {
                    if ($staff == $stf)
                        {
                            $options.="<option style=\"background-color:green;color:#FFF\" selected value=\"".$staff."\">$staff</option>"    ;
                            $selected_class="selected";
                        }
                    else 
                        {
                            $options.="<option value=\"$stf\">$stf</option>";
                        }
                }
            echo "<tr><td class=machine title=\"$alias\" style=\"white-space:nowrap\"><img class=device_icon title=\"$alias\" src=$device_icon align=\"absmiddle\"><span title=\"$alias\">".$machine."</span></td><td><select class=\"select_staff\" name=staff >$options</select></td><td>$form</td><td class=$status_class title=\"$info\"><img src=image/info.png></td></tr>";
    //    }
}
$DB->Close();
?>
</tbody>
</table>
</div>
</div>
</body>
</html>


有个后台的脚本cgi.php来接收处理前端的请求,代码附上:

<?php
require_once(‘device_management/database.php‘);
require_once(‘device_management/config.inc‘);
$staff_list=$staff;
$DB = new Database ($DB["host"], $DB["user"], $DB["pass"], $DB["name"]);

/*borrowed字段在数据库里1表示已借出,0表示没借,已归还状态*/
if ($_REQUEST[‘borrowed‘]==1)
    {
        $data[‘borrowed‘]=1;
        if    ((!empty($_REQUEST[‘device_id‘])) and (!empty($_REQUEST[‘staff‘])) and ($_REQUEST[‘staff‘]!=="N/A"))
            {
                $data[‘device_id‘]=$_REQUEST[‘device_id‘];
                $data[‘staff‘]=$_REQUEST[‘staff‘];
                $data[‘borrow_time‘]=date(‘Y-m-d H:i:s‘,time());
                $wherestr="`device_id`=‘".$data[‘device_id‘]."‘";
                if ($DB->updateRecord(‘device_map‘,$data,$wherestr))
                {
                    $resp[‘error‘]=0;
                    $resp[‘msg‘]=‘borrow done!!!‘;
                    $resp[‘borrowed_set‘]=0;
                    $resp[‘submit_input_value‘]=‘return‘;
                    $resp[‘time_class‘]=‘borrow_time‘;
                    $resp[‘time‘]="last borrow time:".$data[‘borrow_time‘];
                    $resp[‘selected_staff‘]=$data[‘staff‘];
                    //$sql="select `borrow_time` from `device_map` where `device_id`=".$data[‘device_id‘];
                    //$rs=$DB->Query($sql);
                    //while ($row=mysql_fetch_assoc($rs) ){
                            //$resp[‘borrow_time‘]="last borrow time:".$row[‘borrow_time‘];
                    //    }
                }
                else {
                    $resp[‘error‘]=1;
                    $resp[‘msg‘]=‘can not process!!!‘;
                }
                echo json_encode($resp);
                $DB->Close();
            }
        else 
            {
                    $resp[‘error‘]=1;
                    $resp[‘msg‘]=‘can not process, please check post data!!!‘;
                    echo json_encode($resp);

            }
    }
if ($_REQUEST[‘borrowed‘]==0)
    {
        $data[‘borrowed‘]=0;
        if    (!empty($_REQUEST[‘device_id‘]))
            {
                $data[‘device_id‘]=$_REQUEST[‘device_id‘];
                #$data[‘staff‘]=$_REQUEST[‘staff‘];
                $data[‘staff‘]="";
                $data[‘return_time‘]=date(‘Y-m-d H:i:s‘,time());
                $wherestr="`device_id`=‘".$data[‘device_id‘]."‘";
                if ($DB->updateRecord(‘device_map‘,$data,$wherestr))
                {
                    $resp[‘error‘]=0;
                    $resp[‘msg‘]=‘return done!!!‘;
                    $resp[‘borrowed_set‘]=1;
                    $resp[‘submit_input_value‘]=‘borrow‘;
                    $resp[‘time_class‘]=‘return_time‘;
                    $resp[‘time‘]="last return time:".$data[‘return_time‘];
                    $resp[‘selected_staff‘]=‘N/A‘;
                }
                else {
                    $resp[‘error‘]=1;
                    $resp[‘msg‘]=‘can not process!!!‘;
                }
                echo json_encode($resp);
                $DB->Close();
            }
        else 
            {
                    $resp[‘error‘]=1;
                    $resp[‘msg‘]=‘can not process,device_id can not be empty!!!‘;
                    echo json_encode($resp);

            }

}

?>


本文出自 “安家圈子交流学习” 博客,请务必保留此出处http://brucetam.blog.51cto.com/1863614/1553308

管理外借设备的小工具(简化界面和优化手机界面的功能jquery mobile)

标签:jquery mobile

原文地址:http://brucetam.blog.51cto.com/1863614/1553308

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