关于jQueryMobile的风格约定

zhgc

1. 输入框disable的显示风格

<input type="text" name="ed_emp" id="ed_emp" style="background:#c0c0c0" readonly value=SYANT>


或者去掉字体阴影
<input type="text" name="ed_line" id="ed_line" style="background:#c0c0c0;text-shadow: none;" readonly value='{$line}'>

谈一点的：
<input type="text" name="ed_emp" id="ed_emp" style="background:#E2E2E2;text-shadow: none;"" readonly value={$user->empno}>


输入框加清除按钮并对按钮做出式样
<input type="text" name="ed_wo" id="ed_wo" data-theme="c" data-clear-btn="true" >

zhgc

2. 表格的风格：

式样一：
<style>
th {
        border-bottom: 1px solid #d6d6d6;
        background: #5c94c1;
        text-shadow: none;
        box-shadow: none;
        -webkit-box-shadow: none;
}
tr:nth-child(even) {
        background: #e9e9e9;
}
</style>
<table id="tbshow" data-role="table" class="ui-responsive ui-mini" style="margin:0;">
      <thead<tr><th>Panel NO</th><th>Work Order</th><th>Scan Time</th></tr></thead>
      <tbody><tr>

zhgc

3. 页面的整体及自适应

统一放在这个位置：
        <link rel="stylesheet" href="../css/themes/default/jquery.mobile.structure-1.4.5.min.css">
        <style>
          .ui-field-contain label {
                        white-space:pre;
          }
                body,input,a,div{
                        font-family: Calibri,"Microsoft YaHei";
                }
                div#findBar.ui-grid-b > .ui-block-a { width: 40% }
                div#findBar.ui-grid-b > .ui-block-b { width: 30% }
                div#findBar.ui-grid-b > .ui-block-c { width: 30% }
        </style>        
        <script src="../scripts/jquery-1.11.1.min.js"></script>

        <script src="../scripts/jquery.mobile-1.4.5.min.js"></script>
        {$bodyscale}        
        <script>


注意要统一命名：
<div data-role="page" id="setupmodel" class="ui-page-theme-b" >
        {$roleheader}
        <div class="ui-content" id="mymain" role="main" style="padding-top:4px">
        <form method="post" id="form1"  class="ui-mini">

zhgc

4. 表格的定义：

                <div id="ui-body-test" class="ui-body ui-body-b ui-corner-all" style="margin-left:2em;">
                        <div class="ui-grid-a">
                                <div class="ui-block-a" style="padding-right:2px">
                                        <label for="ed_model" ><small>Model Name</small></label>
                                        <input type="text" name="ed_model" id="ed_model" style="background:#c0c0c0;text-shadow: none;" readonly>
                                        <label for="ed_qty" ><small>WO Qty</small></label>
                                        <input type="text" name="ed_qty" id="ed_qty" style="background:#c0c0c0;text-shadow: none;" readonly>
                                        <label for="ed_inputqty" ><small>Quantity produced</small></label>
                                        <input type="text" name="ed_inputqty" id="ed_inputqty" style="background:#c0c0c0;text-shadow: none;" readonly>
                                </div><!-- ui-block-A -->
                                <div class="ui-block-b" style="padding-left:2px">
                                        <label for="ed_mo"  nowrap><small>Work Order</small></label>
                                        <input type="text" name="ed_mo" id="ed_mo" style="background:#c0c0c0;text-shadow: none;" readonly>
                                        <label for="ed_ver"  nowrap><small>WO Version</small></label>
                                        <input type="text" name="ed_ver" id="ed_ver" style="background:#c0c0c0;text-shadow: none;" readonly>
                                        <label for="ed_side" ><small>Input Side</small></label>
                                        <input type="text" name="ed_side" id="ed_side" style="background:#c0c0c0;text-shadow: none;" readonly>
                                </div><!-- ui-block-b -->
                        </div><!-- ui-grid-a -->

如果是文字与输入框一行：
                <!-- 再分两列 -->
                <div class="ui-grid-a">
                        <div class="ui-block-a" style="padding-right:2px">
                                        <label for="ed_line"><small>Line Name</small></label>
                                        <input type="text" name="ed_line" id="ed_line" style="background:#c0c0c0;text-shadow: none;" readonly value='{$line}' >               
                        </div>
                        <div class="ui-block-b" style="padding-left:2px">
                                        <label for="ed_emp"><small>Employee</small></label>
                                        <input type="text" name="ed_emp" id="ed_emp" style="background:#c0c0c0;text-shadow: none;" readonly value={$user->empno}>
                        </div>
                </div>       
                <div class="ui-field-contain">
                        <label for="ed_pcbsn"><small>PCB Panel No</small></label>
                        <input type="text" name="ed_pcbsn" id="ed_pcbsn">
                </div>
                <div class="ui-field-contain">
                        <label for="ed_sn"><small>Serial Number</small></label>
                        <input type="text" name="ed_sn" id="ed_sn">
                </div>

zhgc

5, 提示面板的设计

1. <div id="ui-body-test" class="ui-body ui-body-b ui-corner-all" style="margin-left:0em;margin-top:1.2em; height:19.6em" >
   
2.                 {$msgbox}
   
3.                 <div style="position:absolute;bottom:0px;right:0px">
   
4.                                 <small><b>Please check the information carefully!&nbsp;&nbsp;</b></small>
   
5.                 </div>
   
6. </div>

复制代码

zhgc

6. 下接框 的显示：

                        <div data-role="popup" id="popupCC" data-theme="b">
                                        <ul id="lv_cc" data-role="listview" data-inset="true" style="min-width:210px;" class="ui-mini">
                                                <li data-role="list-divider">Select Customer Code</li>
                                                <li><a href="#" cc="ANKER">ANKER</a></li>
                                                <li><a href="#" cc="FOX">FOXCONN</a></li>
                                                <li><a href="#" cc="HUAWEI">HUAWEI</a></li>
                                                <li><a href="#" cc="MI01">OPPO</a></li>
                                        </ul>
                        </div>

zhgc

debug模式的开关

        function action_get_trsn($param){
         $this->app->setDebug($param["debug"]);
         $this->app->AjaxFail(_TD("Action_get_trsn已执行，但未返回结果!","Action_get_trsn has been executed, but no result is returned!"));
         if($this->app->isDebug()){
                $this->app->AjaxLog("set debug on!");
         }

zhgc

取消
<h3>Production details</h3>
改为
<div style="margin-top:8px;margin-bottom:8px;"><b style="font-size:100%;">Production details</b></div>