深圳全飞鸿

标题: 关于jQueryMobile的风格约定 [打印本页]

作者: zhgc 时间: 2021-10-2 22:24
标题: 关于jQueryMobile的风格约定
本帖最后由 zhgc 于 2021-10-4 11:52 编辑

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 时间: 2021-10-2 22:30
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 时间: 2021-10-2 22:35
本帖最后由 zhgc 于 2021-10-2 23:08 编辑

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 时间: 2021-10-2 23:26
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>
                              <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>
                     </div>

如果是文字与输入框一行：

<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 时间: 2021-10-4 21:17
5, 提示面板的设计

<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" >
{$msgbox}
<div style="position:absolute;bottom:0px;right:0px">
<small><b>Please check the information carefully!  </b></small>
</div>
</div>

复制代码

作者: zhgc 时间: 2021-10-4 21:42
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 时间: 2021-10-5 22:13
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 时间: 2021-10-5 23:58
取消
<h3>Production details</h3>
改为
<div style="margin-top:8px;margin-bottom:8px;"><b style="font-size:100%;">Production details</b></div>

欢迎光临深圳全飞鸿 (http://www.nagomes.com/disc/)