顯示具有 html 標籤的文章。 顯示所有文章
顯示具有 html 標籤的文章。 顯示所有文章

2023年8月29日 星期二

V120401F - 標籤列印(長*寬) - 版面設計3 -html格式 - div -table

 目的: V120401F - 標籤列印(長*寬) - 版面設計

       1>HTML online - 先製作標籤版面(含框線)
       2>將版面 HTML 移至程式(加入 Panel),  $('#panel_V120401F-innerCt').append(print_area_Str1)
       3>$('#panel_V120401F)  --> 取得DOM id (Ext.panel元件又分成 DOM Header & Body)
           Ext.getCmp('panel_V120401F)  --> 取得Ext 元件
            
處理說明:
1>利用 HTML Online排版完成標籤格式 - https://www.tutorialspoint.com/online_html_editor.php
2>html 的版面配置 OK 後, 才將html 的格式內容複製至 程式內
3><div> 設定邊框及顏色 & 長寬 & 字形大小
    <div id='print_area' style='border: 5px solid green; width:10cm;height:3cm; font-size:8pt;' >
4><table> 設定邊框及顏色 & 長寬 & 字形大小
    <table id='my_tbl_1' border=1 bordercolor='red' cellspacing=0 style='width: 100%' >
    --> Table 的高度由 <div  font-size 決定
5>必需 id 已顯示在畫面, 才可 $('#panel_V120401F-innerCt').append(pub_print_area_Str1);
    win.show();
    var Tmp_panel_V120401F_innerCt = $('#panel_V120401F-innerCt');
    Tmp_panel_V120401F_innerCt.append(pub_print_area_Str1);



1>*.html

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>

<body>
<div id='print_area' style='border: 5px solid green;'>
<div id='my_div_1' style='width:10cm;height:3cm;border:3px solid yellow;font-size:8pt;'>
<table id='my_tbl_1' style='width: 100%'  border=1 bordercolor='red' cellspacing=0 >
<tr>
<td width=70%>
<table id='my_tbl_1' style='width:100%;' border=1 bordercolor='blue' cellspacing=0>
<th width=50% style='margin: 0 0 0 0 ;'>技令編號(TO NO) : </th>
<td width=50% >XX16W6-40-22</td>
</tr>
<tr>
<th width=50% >冊號(Copy#) :</th>
<td width=50% ></td>
</tr>
<tr >
<th width=50% >儲位(Location) :</th>
<td width=50% ></td>
</tr>
<tr >
<th width=50% >使用單位(Work Unit) :</th>
<td width=50% >W30</td>
</tr>
<tr >
<th width=50% >語言(Language) :</th>
<td width=50% >E</td>
</tr>
</table>
</td>
<td >
<table id = 'my_tbl_r1' style='width:100%;' border=1 bordercolor='blue' cellspacing=0>
<tr>
<td >



<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90" height="90">
<rect x="0" y="0" width="90" height="90" style="fill:#ffffff;shape-rendering:crispEdges;"/>
<path x="0" y="0" style="fill:#000000;shape-rendering:crispEdges;" d="M0,0 V4.29 H4.29 V0 H0 Z M4.29,0 V4.29 H8.57 V0 H4.29 Z M8.57,0 V4.29 H12.86 V0 H8.57 Z M12.86,0 V4.29 H17.14 V0 H12.86 Z M17.14,0 V4.29 H21.43 V0 H17.14 Z M21.43,0 V4.29 H25.71 V0 H21.43 Z M25.71,0 V4.29 H30 V0 H25.71 Z M34.29,0 V4.29 H38.57 V0 H34.29 Z M51.43,0 V4.29 H55.71 V0 H51.43 Z M60,0 V4.29 H64.29 V0 H60 Z M64.29,0 V4.29 H68.57 V0 H64.29 Z M68.57,0 V4.29 H72.86 V0 H68.57 Z M72.86,0 V4.29 H77.14 V0 H72.86 Z M77.14,0 V4.29 H81.43 V0 H77.14 Z M81.43,0 V4.29 H85.71 V0 H81.43 Z M85.71,0 V4.29 H90 V0 H85.71 Z M0,4.29 V8.57 H4.29 V4.29 H0 Z M25.71,4.29 V8.57 H30 V4.29 H25.71 Z M42.86,4.29 V8.57 H47.14 V4.29 H42.86 Z M47.14,4.29 V8.57 H51.43 V4.29 H47.14 Z M51.43,4.29 V8.57 H55.71 V4.29 H51.43 Z M60,4.29 V8.57 H64.29 V4.29 H60 Z M85.71,4.29 V8.57 H90 V4.29 H85.71 Z M0,8.57 V12.86 H4.29 V8.57 H0 Z M8.57,8.57 V12.86 H12.86 V8.57 H8.57 Z M12.86,8.57 V12.86 H17.14 V8.57 H12.86 Z M17.14,8.57 V12.86 H21.43 V8.57 H17.14 Z M25.71,8.57 V12.86 H30 V8.57 H25.71 Z M38.57,8.57 V12.86 H42.86 V8.57 H38.57 Z M42.86,8.57 V12.86 H47.14 V8.57 H42.86 Z M47.14,8.57 V12.86 H51.43 V8.57 H47.14 Z M60,8.57 V12.86 H64.29 V8.57 H60 Z M68.57,8.57 V12.86 H72.86 V8.57 H68.57 Z M72.86,8.57 V12.86 H77.14 V8.57 H72.86 Z M77.14,8.57 V12.86 H81.43 V8.57 H77.14 Z M85.71,8.57 V12.86 H90 V8.57 H85.71 Z M0,12.86 V17.14 H4.29 V12.86 H0 Z M8.57,12.86 V17.14 H12.86 V12.86 H8.57 Z M12.86,12.86 V17.14 H17.14 V12.86 H12.86 Z M17.14,12.86 V17.14 H21.43 V12.86 H17.14 Z M25.71,12.86 V17.14 H30 V12.86 H25.71 Z M34.29,12.86 V17.14 H38.57 V12.86 H34.29 Z M38.57,12.86 V17.14 H42.86 V12.86 H38.57 Z M42.86,12.86 V17.14 H47.14 V12.86 H42.86 Z M51.43,12.86 V17.14 H55.71 V12.86 H51.43 Z M60,12.86 V17.14 H64.29 V12.86 H60 Z M68.57,12.86 V17.14 H72.86 V12.86 H68.57 Z M72.86,12.86 V17.14 H77.14 V12.86 H72.86 Z M77.14,12.86 V17.14 H81.43 V12.86 H77.14 Z M85.71,12.86 V17.14 H90 V12.86 H85.71 Z M0,17.14 V21.43 H4.29 V17.14 H0 Z M8.57,17.14 V21.43 H12.86 V17.14 H8.57 Z M12.86,17.14 V21.43 H17.14 V17.14 H12.86 Z M17.14,17.14 V21.43 H21.43 V17.14 H17.14 Z M25.71,17.14 V21.43 H30 V17.14 H25.71 Z M38.57,17.14 V21.43 H42.86 V17.14 H38.57 Z M47.14,17.14 V21.43 H51.43 V17.14 H47.14 Z M51.43,17.14 V21.43 H55.71 V17.14 H51.43 Z M60,17.14 V21.43 H64.29 V17.14 H60 Z M68.57,17.14 V21.43 H72.86 V17.14 H68.57 Z M72.86,17.14 V21.43 H77.14 V17.14 H72.86 Z M77.14,17.14 V21.43 H81.43 V17.14 H77.14 Z M85.71,17.14 V21.43 H90 V17.14 H85.71 Z M0,21.43 V25.71 H4.29 V21.43 H0 Z M25.71,21.43 V25.71 H30 V21.43 H25.71 Z M34.29,21.43 V25.71 H38.57 V21.43 H34.29 Z M38.57,21.43 V25.71 H42.86 V21.43 H38.57 Z M42.86,21.43 V25.71 H47.14 V21.43 H42.86 Z M60,21.43 V25.71 H64.29 V21.43 H60 Z M85.71,21.43 V25.71 H90 V21.43 H85.71 Z M0,25.71 V30 H4.29 V25.71 H0 Z M4.29,25.71 V30 H8.57 V25.71 H4.29 Z M8.57,25.71 V30 H12.86 V25.71 H8.57 Z M12.86,25.71 V30 H17.14 V25.71 H12.86 Z M17.14,25.71 V30 H21.43 V25.71 H17.14 Z M21.43,25.71 V30 H25.71 V25.71 H21.43 Z M25.71,25.71 V30 H30 V25.71 H25.71 Z M34.29,25.71 V30 H38.57 V25.71 H34.29 Z M42.86,25.71 V30 H47.14 V25.71 H42.86 Z M51.43,25.71 V30 H55.71 V25.71 H51.43 Z M60,25.71 V30 H64.29 V25.71 H60 Z M64.29,25.71 V30 H68.57 V25.71 H64.29 Z M68.57,25.71 V30 H72.86 V25.71 H68.57 Z M72.86,25.71 V30 H77.14 V25.71 H72.86 Z M77.14,25.71 V30 H81.43 V25.71 H77.14 Z M81.43,25.71 V30 H85.71 V25.71 H81.43 Z M85.71,25.71 V30 H90 V25.71 H85.71 Z M47.14,30 V34.29 H51.43 V30 H47.14 Z M21.43,34.29 V38.57 H25.71 V34.29 H21.43 Z M25.71,34.29 V38.57 H30 V34.29 H25.71 Z M34.29,34.29 V38.57 H38.57 V34.29 H34.29 Z M42.86,34.29 V38.57 H47.14 V34.29 H42.86 Z M47.14,34.29 V38.57 H51.43 V34.29 H47.14 Z M51.43,34.29 V38.57 H55.71 V34.29 H51.43 Z M55.71,34.29 V38.57 H60 V34.29 H55.71 Z M64.29,34.29 V38.57 H68.57 V34.29 H64.29 Z M72.86,34.29 V38.57 H77.14 V34.29 H72.86 Z M85.71,34.29 V38.57 H90 V34.29 H85.71 Z M0,38.57 V42.86 H4.29 V38.57 H0 Z M4.29,38.57 V42.86 H8.57 V38.57 H4.29 Z M12.86,38.57 V42.86 H17.14 V38.57 H12.86 Z M34.29,38.57 V42.86 H38.57 V38.57 H34.29 Z M47.14,38.57 V42.86 H51.43 V38.57 H47.14 Z M64.29,38.57 V42.86 H68.57 V38.57 H64.29 Z M68.57,38.57 V42.86 H72.86 V38.57 H68.57 Z M81.43,38.57 V42.86 H85.71 V38.57 H81.43 Z M85.71,38.57 V42.86 H90 V38.57 H85.71 Z M25.71,42.86 V47.14 H30 V42.86 H25.71 Z M34.29,42.86 V47.14 H38.57 V42.86 H34.29 Z M38.57,42.86 V47.14 H42.86 V42.86 H38.57 Z M55.71,42.86 V47.14 H60 V42.86 H55.71 Z M60,42.86 V47.14 H64.29 V42.86 H60 Z M68.57,42.86 V47.14 H72.86 V42.86 H68.57 Z M72.86,42.86 V47.14 H77.14 V42.86 H72.86 Z M77.14,42.86 V47.14 H81.43 V42.86 H77.14 Z M81.43,42.86 V47.14 H85.71 V42.86 H81.43 Z M85.71,42.86 V47.14 H90 V42.86 H85.71 Z M0,47.14 V51.43 H4.29 V47.14 H0 Z M4.29,47.14 V51.43 H8.57 V47.14 H4.29 Z M8.57,47.14 V51.43 H12.86 V47.14 H8.57 Z M17.14,47.14 V51.43 H21.43 V47.14 H17.14 Z M34.29,47.14 V51.43 H38.57 V47.14 H34.29 Z M38.57,47.14 V51.43 H42.86 V47.14 H38.57 Z M42.86,47.14 V51.43 H47.14 V47.14 H42.86 Z M51.43,47.14 V51.43 H55.71 V47.14 H51.43 Z M60,47.14 V51.43 H64.29 V47.14 H60 Z M77.14,47.14 V51.43 H81.43 V47.14 H77.14 Z M81.43,47.14 V51.43 H85.71 V47.14 H81.43 Z M0,51.43 V55.71 H4.29 V51.43 H0 Z M4.29,51.43 V55.71 H8.57 V51.43 H4.29 Z M8.57,51.43 V55.71 H12.86 V51.43 H8.57 Z M17.14,51.43 V55.71 H21.43 V51.43 H17.14 Z M25.71,51.43 V55.71 H30 V51.43 H25.71 Z M34.29,51.43 V55.71 H38.57 V51.43 H34.29 Z M47.14,51.43 V55.71 H51.43 V51.43 H47.14 Z M60,51.43 V55.71 H64.29 V51.43 H60 Z M68.57,51.43 V55.71 H72.86 V51.43 H68.57 Z M81.43,51.43 V55.71 H85.71 V51.43 H81.43 Z M34.29,55.71 V60 H38.57 V55.71 H34.29 Z M42.86,55.71 V60 H47.14 V55.71 H42.86 Z M47.14,55.71 V60 H51.43 V55.71 H47.14 Z M51.43,55.71 V60 H55.71 V55.71 H51.43 Z M64.29,55.71 V60 H68.57 V55.71 H64.29 Z M72.86,55.71 V60 H77.14 V55.71 H72.86 Z M0,60 V64.29 H4.29 V60 H0 Z M4.29,60 V64.29 H8.57 V60 H4.29 Z M8.57,60 V64.29 H12.86 V60 H8.57 Z M12.86,60 V64.29 H17.14 V60 H12.86 Z M17.14,60 V64.29 H21.43 V60 H17.14 Z M21.43,60 V64.29 H25.71 V60 H21.43 Z M25.71,60 V64.29 H30 V60 H25.71 Z M42.86,60 V64.29 H47.14 V60 H42.86 Z M47.14,60 V64.29 H51.43 V60 H47.14 Z M72.86,60 V64.29 H77.14 V60 H72.86 Z M77.14,60 V64.29 H81.43 V60 H77.14 Z M0,64.29 V68.57 H4.29 V64.29 H0 Z M25.71,64.29 V68.57 H30 V64.29 H25.71 Z M34.29,64.29 V68.57 H38.57 V64.29 H34.29 Z M64.29,64.29 V68.57 H68.57 V64.29 H64.29 Z M81.43,64.29 V68.57 H85.71 V64.29 H81.43 Z M0,68.57 V72.86 H4.29 V68.57 H0 Z M8.57,68.57 V72.86 H12.86 V68.57 H8.57 Z M12.86,68.57 V72.86 H17.14 V68.57 H12.86 Z M17.14,68.57 V72.86 H21.43 V68.57 H17.14 Z M25.71,68.57 V72.86 H30 V68.57 H25.71 Z M38.57,68.57 V72.86 H42.86 V68.57 H38.57 Z M51.43,68.57 V72.86 H55.71 V68.57 H51.43 Z M60,68.57 V72.86 H64.29 V68.57 H60 Z M72.86,68.57 V72.86 H77.14 V68.57 H72.86 Z M77.14,68.57 V72.86 H81.43 V68.57 H77.14 Z M81.43,68.57 V72.86 H85.71 V68.57 H81.43 Z M85.71,68.57 V72.86 H90 V68.57 H85.71 Z M0,72.86 V77.14 H4.29 V72.86 H0 Z M8.57,72.86 V77.14 H12.86 V72.86 H8.57 Z M12.86,72.86 V77.14 H17.14 V72.86 H12.86 Z M17.14,72.86 V77.14 H21.43 V72.86 H17.14 Z M25.71,72.86 V77.14 H30 V72.86 H25.71 Z M38.57,72.86 V77.14 H42.86 V72.86 H38.57 Z M42.86,72.86 V77.14 H47.14 V72.86 H42.86 Z M51.43,72.86 V77.14 H55.71 V72.86 H51.43 Z M55.71,72.86 V77.14 H60 V72.86 H55.71 Z M60,72.86 V77.14 H64.29 V72.86 H60 Z M64.29,72.86 V77.14 H68.57 V72.86 H64.29 Z M68.57,72.86 V77.14 H72.86 V72.86 H68.57 Z M81.43,72.86 V77.14 H85.71 V72.86 H81.43 Z M0,77.14 V81.43 H4.29 V77.14 H0 Z M8.57,77.14 V81.43 H12.86 V77.14 H8.57 Z M12.86,77.14 V81.43 H17.14 V77.14 H12.86 Z M17.14,77.14 V81.43 H21.43 V77.14 H17.14 Z M25.71,77.14 V81.43 H30 V77.14 H25.71 Z M42.86,77.14 V81.43 H47.14 V77.14 H42.86 Z M60,77.14 V81.43 H64.29 V77.14 H60 Z M77.14,77.14 V81.43 H81.43 V77.14 H77.14 Z M0,81.43 V85.71 H4.29 V81.43 H0 Z M25.71,81.43 V85.71 H30 V81.43 H25.71 Z M42.86,81.43 V85.71 H47.14 V81.43 H42.86 Z M47.14,81.43 V85.71 H51.43 V81.43 H47.14 Z M51.43,81.43 V85.71 H55.71 V81.43 H51.43 Z M55.71,81.43 V85.71 H60 V81.43 H55.71 Z M60,81.43 V85.71 H64.29 V81.43 H60 Z M64.29,81.43 V85.71 H68.57 V81.43 H64.29 Z M68.57,81.43 V85.71 H72.86 V81.43 H68.57 Z M72.86,81.43 V85.71 H77.14 V81.43 H72.86 Z M85.71,81.43 V85.71 H90 V81.43 H85.71 Z M0,85.71 V90 H4.29 V85.71 H0 Z M4.29,85.71 V90 H8.57 V85.71 H4.29 Z M8.57,85.71 V90 H12.86 V85.71 H8.57 Z M12.86,85.71 V90 H17.14 V85.71 H12.86 Z M17.14,85.71 V90 H21.43 V85.71 H17.14 Z M21.43,85.71 V90 H25.71 V85.71 H21.43 Z M25.71,85.71 V90 H30 V85.71 H25.71 Z M38.57,85.71 V90 H42.86 V85.71 H38.57 Z M42.86,85.71 V90 H47.14 V85.71 H42.86 Z M47.14,85.71 V90 H51.43 V85.71 H47.14 Z M51.43,85.71 V90 H55.71 V85.71 H51.43 Z M64.29,85.71 V90 H68.57 V85.71 H64.29 Z M72.86,85.71 V90 H77.14 V85.71 H72.86 Z M77.14,85.71 V90 H81.43 V85.71 H77.14 Z " /></svg><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class='display' id='break_page1' style='break-after:page'>
</div>
</div >
</body>
</html>


張貼者： 於 沒有留言:
標籤： , , , ,

2023年7月5日 星期三

V120202B - 標籤列印 - HTML online 模擬標籤排版 -table

 目的: V120202B - 標籤列印 - HTML online 模擬標籤排版 - <table>

處理說明: 0>[列印範圍]先以框線標出
                  1>利用 HTML online模擬器, 模擬標簽文字內容
                       HTML online : https://www.tutorialspoint.com/online_html_editor.php
                       --> 直接修改即可看到 HTML排版結果,不需等 VS 執行後,才看到排版結果
                  2>以 <div><table> 的邊線畫出範圍
                  3>以  style 設定範圍/邊框/顏色, 
                       style='width: 10cm; height: 4cm;border: 5px solid green; '
                  4><table>邊框個別設定,邊際實線 以 cellspacing=0 , border=2px , bordercolor='blue'
                  5>縮小元件size <tr style='transform: scale(0.9);' ></tr>



     


1>*.html
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
<div id='print_area' style='width: 10cm; height: 4cm; border: 5px solid green;'>
<div id='my_div' style='width: 10cm; height: 4cm;border: 3px solid yellow; font-size: 4pt;'>
<table id='my_tbl1' style='width: 10cm;' border=2px cellspacing=0 borderstyle='solid' bordercolor='blue'>
<tr>
<td width=30%>機號: A049 </td>
<td width=35%>工號: 12345678 </td>
<td width=35%>工單件號: SROPN_1 </td>
</tr>
</table>
<table id='my_tbl2' style='width:10cm;' border=2px cellspacing=0 borderstyle='solid' bordercolor='red'>
<tr style='height: 0.3cm;'>
<td width=50%>申請件號:LAMAERO-73428-0001</td>
<td width=50%>申請件號:LAMAERO-73428-0001</td>
</tr>
<tr>
<td width=50% style='height:0.4cm'></td>
<td width=50%></td>
</tr>
<tr>
<td width=50%>名稱:TFE DRY LUBE</td>
<td width=50%>儲位2:防C</td>
</tr>
<tr>
<td width=50%>儲位1:防B</td>
<td width=50%>庫房:23#</td>
</tr>
<tr>
<td width=50%>撥料數量:4</td>
<td width=50%></td>
</tr>
</table>
<table id='my_tbl3' style='width:10cm' border=2px cellspacing=0 borderstyle='solid' bordercolor='blue'>
<tr>
<td width=50%></td>
<td width=50%>需求者:612578 楊智為 856
<br>需求地點:A08</td>
</tr>
</div>
</div>
</body>
</html>

張貼者： 於 沒有留言:
標籤： , , ,

2022年8月31日 星期三

Browser - 三大元素 HTML / CSS / JavaScript

目的: 認識 Browser 的三大要素 

處理說明:「HTML、CSS 與 JavaScript 是網頁前端三大要素」:
  1. HTML 負責資料與結構
  2. CSS 負責樣式與呈現
  3. JavaScript 負責行為與互動
原始參考網址 : https://ithelp.ithome.com.tw/articles/10191666

  • JavaScript 核心 (以 ECMAScript 標準為基礎)
  • BOM (Browser Object Model，瀏覽器物件模型)
  • DOM (Document Object Model，文件物件模型)
由於「BOM」與「DOM」是由瀏覽器執行環境所提供。
換句話說，在 node 環境下的 JavaScript 就不會有這兩個部分

1>BOM (Browser Object Model，瀏覽器物件模型)，是瀏覽器所有功能的核心，與網頁的內容無關。
 W3C 把各家瀏覽器都有實作的部分，以及確定已經(或未來會) 加入的功能，統一集合起來納入了 HTML5 的標準中，這也就是我們現在看到的 BOM API 的實作。


1>BOM 的核心是 window 物件。
而 window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。
window 物件 - 用來與瀏覽器溝通的窗口」

alert("message");
=window.alert(message);
一行程式碼就可以生成一個對話框，很神奇吧？
而這就是瀏覽器環境的 BOM 提供給 JavaScript 控制的功能之一。
類似的對話框還有用來提供「確定/取消」的 window.confirm() window.confirm ，以及開放式問答的 window.prompt() window.prompt 對話框。
當然 BOM 提供的 API 很多，包含開啟/關閉視窗，改變視窗大小，計時器與取得網址等等。 這些在之後的文章當中還會再詳細解說。

2>DOM (Document Object Model，文件物件模型)，是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」


DOM 的 document 其實也是 window 物件的子物件之一。

而「DOM」 與「BOM」最大的區別在於：

  • BOM: JavaScript 與「瀏覽器」溝通的窗口，不涉及網頁內容。
DOM: JavaScript 用來控制「網頁」的節點與內容的標

「BOM」完全依賴於瀏覽器廠商實作本身無標準規範，
「DOM」有著 W3C 所制定的標準來規範。

Ex:
<h1 id="greet"></h1>
<script> document.querySelector('#greet').textContent = 'Hello World!' </script>

--> 透過 document.querySelector() 方法來取得節點，
      然後修改 textContent 屬性

張貼者： 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)