0ba06ce083d8c40781aa914a7bca31b77f17800d.svn-base 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>CHEditor</title>
  5. <meta name="robots" content="noindex, nofollow" />
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <link rel="stylesheet" type="text/css" href="../css/dialog.css" />
  8. <script src="js/dialog.js" type="text/javascript"></script>
  9. <script src="js/table.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12. <fieldset><legend><span class="font-normal">표 속성</span></legend>
  13. <div>
  14. <table cellspacing="0" border="0" cellpadding="2" width="100%">
  15. <tr>
  16. <td width="20%"><span class="font-normal">줄 수:</span>
  17. </td>
  18. <td width="30%"><input type="text" size="3" name="numrows" id="numrows" value="3" />
  19. </td>
  20. <td width="20%"><span class="font-normal">칸 수:</span>
  21. </td>
  22. <td width="30%"><input type="text" size="3" name="numcols" id="numcols" value="2" />
  23. </td>
  24. </tr>
  25. <tr><td colspan="4"><hr class="hr" noshade="noshade" /></td></tr>
  26. <tr>
  27. <td><span class="font-normal">너비:</span>
  28. </td>
  29. <td>
  30. <input type="text" size="3" name="width" id="width" value="100" />
  31. <select name="widthtype" id="widthtype">
  32. <option value="%" selected="selected">%</option>
  33. <option value="px">px</option>
  34. </select>
  35. </td>
  36. <td><span class="font-normal">높이:</span>
  37. </td>
  38. <td>
  39. <input type="text" size="3" name="height" id="height" value="" />
  40. <select name="heighttype" id="heighttype">
  41. <option value="%">%</option>
  42. <option value="px" selected="selected">px</option>
  43. </select>
  44. </td>
  45. </tr>
  46. <tr>
  47. <td><span class="font-normal">셀 안 여백:</span>
  48. </td>
  49. <td><input type="text" size="3" name="cellpd" id="cellpd" value="1" />
  50. </td>
  51. <td><span class="font-normal">셀 간격:</span>
  52. </td>
  53. <td><input type="text" size="3" name="cellsp" id="cellsp" value="0" />
  54. </td>
  55. </tr>
  56. <tr>
  57. <td><span class="font-normal">테두리 굵기:</span>
  58. </td>
  59. <td><input type="text" size="3" name="bordersize" id="bordersize" value="1" />&nbsp;<span class="font-normal">픽셀</span>
  60. </td>
  61. <td><span class="font-normal">정렬:</span>
  62. </td>
  63. <td><select id="talign" name="talign">
  64. <option value="none" selected="selected">없음</option>
  65. <option value="left">왼쪽</option>
  66. <option value="center">가운데</option>
  67. <option value="right">오른쪽</option>
  68. </select>
  69. </td>
  70. </tr>
  71. <tr><td colspan="4"><hr class="hr" noshade="noshade" /></td></tr>
  72. <tr>
  73. <td><span class="font-normal">표 제목:</span>
  74. </td>
  75. <td colspan="2"><input type="text" size="27" name="caption" id="tableCaption" value="" />
  76. </td>
  77. <td><span class="font-normal">표 제목 숨김:</span><input type="checkbox" id="hideCaption" />
  78. </td>
  79. </tr>
  80. <tr>
  81. <td><span class="font-normal">표 요약:</span>
  82. </td>
  83. <td colspan="2"><input type="text" size="27" name="summary" id="tableSummary" value="" />
  84. </td>
  85. <td><span class="font-normal">표 헤더:</span>
  86. <select id="tableHeader" name="header">
  87. <option value="none">없음</option>
  88. <option value="col">첫 줄</option>
  89. <option value="row">첫 칸</option>
  90. <option value="all">모두</option>
  91. </select>
  92. </td>
  93. </tr>
  94. <tr><td colspan="4"><hr class="hr" noshade="noshade" /></td></tr>
  95. <tr>
  96. <td><span class="font-normal">CSS class:</span>
  97. </td>
  98. <td><input type="text" size="10" name="cssClass" id="cssClass" value="" />
  99. </td>
  100. <td><span class="font-normal">CSS id:</span>
  101. </td>
  102. <td><input type="text" size="10" name="cssId" id="cssId" value="" />
  103. </td>
  104. </tr>
  105. </table>
  106. </div>
  107. </fieldset>
  108. <br />
  109. <fieldset><legend><span class="font-normal">색 지정</span></legend>
  110. <div id="tableColorWrapper">
  111. <table cellspacing="0" width="100%" border="0" cellpadding="2">
  112. <tr>
  113. <td width="20%"><span class="font-normal">테두리 색:</span>
  114. </td>
  115. <td width="30%">
  116. <div style="float:left">
  117. <input type="text" size="10" name="idbordercolor" id="idbordercolor" value="#000000" class="colorInputBox" />
  118. </div>
  119. <div class="colorPickerButton" onclick="showColorPicker('bordercolor', this);">&nbsp;</div>
  120. </td>
  121. <td width="20%"><span class="font-normal">표 배경색:</span>
  122. </td>
  123. <td width="30%">
  124. <div style="float:left">
  125. <input type="text" size="10" name="idbgcolor" id="idbgcolor" value="없음" class="colorInputBox" style="background-color:#fff" />
  126. </div>
  127. <div class="colorPickerButton" onclick="showColorPicker('bgcolor', this);">&nbsp;</div>
  128. </td>
  129. </tr>
  130. </table>
  131. </div>
  132. <div id="colorWrapper" class="colorWrapper"></div>
  133. </fieldset>
  134. <div class="bottom-status" id="buttonWrapper"></div>
  135. <script type="text/javascript">
  136. var offsetTop, offsetLeft, obj, showColorSwitch=false, showColorSwitch=false, beforeButton=null, tableColorWrapper, colorPickerWrapper;
  137. window.onload = function() {
  138. tableColorWrapper = document.getElementById('tableColorWrapper');
  139. colorPickerWrapper = document.getElementById('colorWrapper');
  140. obj = tableColorWrapper;
  141. offsetTop = obj.offsetTop;
  142. offsetLeft = obj.offsetLeft;
  143. if (obj.offsetParent) {
  144. obj = obj.offsetParent;
  145. while (obj) {
  146. offsetTop += obj.offsetTop;
  147. offsetLeft += obj.offsetLeft;
  148. obj = obj.offsetParent;
  149. }
  150. }
  151. colorPickerWrapper.style.top = (offsetTop-74) + 'px';
  152. colorPickerWrapper.style.left = offsetLeft + 'px';
  153. drawColor();
  154. };
  155. function showColorPicker(which, img) {
  156. showColorSwitch = !showColorSwitch;
  157. if (beforeButton && beforeButton !== img) {
  158. beforeButton.className = 'colorPickerButton';
  159. showColorSwitch = true;
  160. }
  161. if (showColorSwitch) {
  162. displayAttr = 'block';
  163. img.className = 'colorPickerButtonGray';
  164. if (beforeButton === null || beforeButton !== img) {
  165. beforeButton = img;
  166. }
  167. setColor(which);
  168. }
  169. else {
  170. img.className = 'colorPickerButton';
  171. displayAttr = 'none';
  172. }
  173. document.getElementById('colorWrapper').style.display = displayAttr;
  174. }
  175. </script>
  176. </body>
  177. </html>