imageclipper.html 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <div style="background-color: #FFF; overflow: hidden">
  2. <div title="基本" class="MWFTab">
  3. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  4. <tr>
  5. <td class="editTableTitle">标识:</td>
  6. <td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
  7. </tr>
  8. <tr>
  9. <td class="editTableTitle">名称:</td>
  10. <td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
  11. </tr>
  12. <tr>
  13. <td class="editTableTitle">描述:</td>
  14. <td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
  15. </tr>
  16. <!--<tr>-->
  17. <!--<td class="editTableTitle">SRC:</td>-->
  18. <!--<td class="editTableValue"><input type="text" name="src" value="text{$.src}" class="editTableInput"/></td>-->
  19. <!--</tr>-->
  20. <tr>
  21. <td class="editTableTitle">图片裁剪</td>
  22. <td class="editTableValue">
  23. <input type="radio" onclick="if (this.checked){ $('text{$.pid}imageSizeArea').setStyle('display', 'none'); $('text{$.pid}imageRatioArea').setStyle('display', 'none') }" name="clipperType" value="unrestricted" text{($.clipperType.indexOf('unrestricted')!=-1)?'checked':''}/>不限制
  24. <input type="radio" onclick="if (this.checked){ $('text{$.pid}imageSizeArea').setStyle('display', ''); $('text{$.pid}imageRatioArea').setStyle('display', 'none') }" name="clipperType" value="size" text{($.clipperType.indexOf('size')!=-1)?'checked':''}/>固定大小
  25. <input type="radio" onclick="if (this.checked){ $('text{$.pid}imageSizeArea').setStyle('display', 'none'); $('text{$.pid}imageRatioArea').setStyle('display', '') }" name="clipperType" value="ratio" text{($.clipperType.indexOf('ratio')!=-1)?'checked':''}/>固定比例
  26. </td>
  27. </tr>
  28. </table>
  29. <div id="text{$.pid}imageSizeArea" style="display: text{($.clipperType!='size')?'none':'block'};">
  30. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  31. <tr>
  32. <td class="editTableTitle">宽度(px)</td>
  33. <td class="editTableValue">
  34. <input type="text" name="imageWidth" value="text{$.imageWidth}" class="editTableInput"/>
  35. </td>
  36. <td class="editTableTitle">高度(px)</td>
  37. <td class="editTableValue">
  38. <input type="text" name="imageHeight" value="text{$.imageHeight}" class="editTableInput"/>
  39. </td>
  40. </tr>
  41. </table>
  42. </div>
  43. <div id="text{$.pid}imageRatioArea" style="display: text{($.clipperType!='ratio')?'none':'block'};">
  44. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  45. <tr>
  46. <td class="editTableTitle">宽高比</td>
  47. <td class="editTableValue">
  48. <input type="text" name="imageRatio" value="text{$.imageRatio}" class="editTableInput"/>
  49. </td>
  50. </tr>
  51. </table>
  52. </div>
  53. <div class="MWFMaplist" name="styles" title="样式"></div>
  54. <div class="MWFMaplist" name="properties" title="属性"></div>
  55. <div class="MWFValidation" name="validationConfig"></div>
  56. </div>
  57. <div title="事件" class="MWFTab">
  58. <div class="MWFEventsArea" name="events"></div>
  59. </div>
  60. <div title="HTML" class="MWFTab">
  61. <div class="MWFHTMLArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
  62. </div>
  63. <div title="JSON" class="MWFTab">
  64. <div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
  65. </div>
  66. </div>