PrintSample24.html 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>WEB打印控件LODOP的样例二十四:如何选择界面皮肤</title>
  6. <script language="javascript" src="LodopFuncs.js"></script>
  7. </head>
  8. <body>
  9. <h2><font color="#009999">演示如何选择界面皮肤:</font>
  10. </h2>
  11. <p><b>打印预览</b>与<b>设计维护</b>等界面可以另选底色(皮肤),甚至自定颜色,函数如下:</p>
  12. <p><font color="#0000FF">SET_SHOW_MODE(&quot;SKIN_TYPE&quot;,皮肤编号);</font></p>
  13. <p><font color="#0000FF">SET_SHOW_MODE(&quot;SKIN_CUSTOM_COLOR&quot;,皮肤底色值);</font></p>
  14. <h4>一、按编号选择皮肤</h4>
  15. <table border="1" width="73%">
  16. <tr>
  17. <td width="37%">
  18. <input type="radio" id="R0" name="RX">0号皮肤(缺省色,传统银灰色)<br>
  19. <input type="radio" id="R1" name="RX" checked>1号皮肤(经典蓝)<br>
  20. <input type="radio" id="R2" name="RX">2号皮肤(薰衣草紫)<br>
  21. <input type="radio" id="R3" name="RX">3号皮肤(淡钢青)<br>
  22. <input type="radio" id="R4" name="RX">4号皮肤(茶色棕)<br>
  23. <input type="radio" id="R5" name="RX">5号皮肤(轻质板色)<br>
  24. <input type="radio" id="R6" name="RX">6号皮肤(麦色)
  25. </td>
  26. <td width="28%">
  27. <input type="radio" id="R7" name="RX">7号皮肤(紫罗兰)<br>
  28. <input type="radio" id="R8" name="RX">8号皮肤(天蓝)<br>
  29. <input type="radio" id="R9" name="RX">9号皮肤(镀银)<br>
  30. <input type="radio" id="R10" name="RX">10号皮肤(沙滩棕)<br>
  31. <input type="radio" id="R11" name="RX">11号皮肤(鲜肉色)<br>
  32. <input type="radio" id="R12" name="RX">12号皮肤(粉末蓝)<br>
  33. <input type="radio" id="R13" name="RX">13号皮肤(钒矿色)
  34. </td>
  35. <td width="35%">
  36. <input type="radio" id="R14" name="RX">14号皮肤(浅绿)<br>
  37. <input type="radio" id="R15" name="RX">15号皮肤(浅蓝)<br>
  38. <input type="radio" id="R16" name="RX">16号皮肤(卡其布)<br>
  39. <input type="radio" id="R17" name="RX">17号皮肤(秋麒麟)<br>
  40. <input type="radio" id="R18" name="RX">18号皮肤(深海绿)<br>
  41. <input type="radio" id="R19" name="RX">19号皮肤(深卡其)<br>
  42. <input type="radio" id="R20" name="RX">20号皮肤(番茄桔)
  43. </td>
  44. </tr>
  45. </table>
  46. <p>演示按以上所选皮肤进入<a href="javascript:myPreview1()">打印预览</a>或<a href="javascript:myDesign1()">打印设计</a>看看。</p>
  47. <h4>二、直接设置底色</h4>
  48. <p>演示以颜色值<input type="text" id="T1" size="13" value="#ADFF2F">为底色进入<a href="javascript:myPreview2()">打印预览</a>或<a href="javascript:mySetup2()">打印维护</a>看看。</p>
  49. <p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a>
  50. </p>
  51. <script language="javascript" type="text/javascript">
  52. var LODOP; //声明为全局变量
  53. function myPreview1() {
  54. CreatePage();
  55. LODOP.SET_PREVIEW_WINDOW(0,0,0,760,540,"");
  56. LODOP.SET_SHOW_MODE("SKIN_TYPE",getSkinType());
  57. LODOP.PREVIEW();
  58. };
  59. function myDesign1() {
  60. CreatePage();
  61. LODOP.SET_SHOW_MODE("SKIN_TYPE",getSkinType());
  62. LODOP.PRINT_DESIGN();
  63. };
  64. function myPreview2() {
  65. CreatePage();
  66. LODOP.SET_PREVIEW_WINDOW(0,0,0,760,540,"");
  67. LODOP.SET_SHOW_MODE("SKIN_CUSTOM_COLOR",document.getElementById("T1").value);
  68. LODOP.PREVIEW();
  69. };
  70. function mySetup2() {
  71. CreatePage();
  72. LODOP.SET_SHOW_MODE("SKIN_CUSTOM_COLOR",document.getElementById("T1").value);
  73. LODOP.PRINT_SETUP();
  74. };
  75. function CreatePage(){
  76. LODOP=getLodop();
  77. LODOP.PRINT_INITA(12,14,690,450,"打印控件功能演示_Lodop功能_皮肤");
  78. LODOP.ADD_PRINT_TEXT(59,272,280,80,"不同皮肤展示");
  79. LODOP.SET_PRINT_STYLEA(0,"FontSize",30);
  80. LODOP.SET_PRINT_STYLEA(1,"Horient",2);
  81. };
  82. function getSkinType(){
  83. iSkinType=0;
  84. for (i = 0; i < 21; i++) {
  85. if (document.getElementById("R"+i).checked) {
  86. iSkinType=i;
  87. break;
  88. }
  89. }
  90. return iSkinType;
  91. }
  92. </script>
  93. </body>
  94. </html>