elcarousel.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <div style="background-color: #FFF; overflow: hidden">
  2. <div title="{{$.lp.base}}" class="MWFTab">
  3. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  4. <tr>
  5. <td class="editTableTitle">{{$.lp.id}}:</td>
  6. <td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
  7. </tr>
  8. <tr>
  9. <td class="editTableTitle">{{$.lp.name}}:</td>
  10. <td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
  11. </tr>
  12. </table>
  13. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  14. <tr>
  15. <td class="editTableTitle">{{$.lp.height}}:</td>
  16. <td class="editTableValue"><input type="number" name="height" value="text{$.height}" class="editTableInputNoWidth"/>px</td>
  17. </tr>
  18. <tr>
  19. <td class="editTableTitle">{{$.lp.initialIndex}}:</td>
  20. <td class="editTableValue"><input type="number" name="initialIndex" value="text{$.initialIndex}" class="editTableInput"/></td>
  21. </tr>
  22. <tr>
  23. <td class="editTableTitle">{{$.lp.type}}:</td>
  24. <td class="editTableValue">
  25. <input type="radio" name="carouselType" value="" text{(!$.carouselType)?'checked':''}/>{{$.lp.carouselTypeValue[0]}}
  26. <input type="radio" name="carouselType" value="card" text{($.trigger==='card')?'checked':''}/>{{$.lp.carouselTypeValue[1]}}
  27. </td>
  28. </tr>
  29. <tr>
  30. <td class="editTableTitle">{{$.lp.trigger}}:</td>
  31. <td class="editTableValue">
  32. <input type="radio" name="trigger" value="" text{(!$.trigger)?'checked':''}/>{{$.lp.triggerValue[0]}}
  33. <input type="radio" name="trigger" value="click" text{($.trigger==='click')?'checked':''}/>{{$.lp.triggerValue[1]}}
  34. </td>
  35. </tr>
  36. <tr>
  37. <td class="editTableTitle">{{$.lp.autoplay}}:</td>
  38. <td class="editTableValue">
  39. <input type="radio" name="autoplay" value="true" text{($.autoplay)?'checked':''}/>{{$.lp.yes}}
  40. <input type="radio" name="autoplay" value="false" text{(!$.autoplay)?'checked':''}/>{{$.lp.no}}
  41. </td>
  42. </tr>
  43. <tr>
  44. <td class="editTableTitle">{{$.lp.interval}}:</td>
  45. <td class="editTableValue"><input type="number" name="interval" value="text{$.interval}" class="editTableInputNoWidth"/>ms</td>
  46. </tr>
  47. <tr>
  48. <td class="editTableTitle">{{$.lp.indicatorPosition}}:</td>
  49. <td class="editTableValue">
  50. <input type="radio" name="indicatorPosition" value="" text{(!$.indicatorPosition || $.indicatorPosition==='')?'checked':''}/>{{$.lp.indicatorPositionValue[0]}}
  51. <input type="radio" name="indicatorPosition" value="outside" text{($.indicatorPosition==='outside')?'checked':''}/>{{$.lp.indicatorPositionValue[1]}}
  52. <input type="radio" name="indicatorPosition" value="none" text{($.indicatorPosition==='none')?'checked':''}/>{{$.lp.indicatorPositionValue[2]}}
  53. </td>
  54. </tr>
  55. <tr>
  56. <td class="editTableTitle">{{$.lp.arrow}}:</td>
  57. <td class="editTableValue">
  58. <input type="radio" name="arrow" value="hover" text{(!$.arrow || $.arrow==='hover')?'checked':''}/>{{$.lp.arrowValue[0]}}
  59. <input type="radio" name="arrow" value="always" text{($.arrow==='always')?'checked':''}/>{{$.lp.arrowValue[1]}}
  60. <input type="radio" name="arrow" value="never" text{($.arrow==='never')?'checked':''}/>{{$.lp.arrowValue[2]}}
  61. </td>
  62. </tr>
  63. <tr>
  64. <td class="editTableTitle">{{$.lp.loop}}:</td>
  65. <td class="editTableValue">
  66. <input type="radio" name="loop" value="true" text{($.loop)?'checked':''}/>{{$.lp.yes}}
  67. <input type="radio" name="loop" value="false" text{(!$.loop)?'checked':''}/>{{$.lp.no}}
  68. </td>
  69. </tr>
  70. <tr>
  71. <td class="editTableTitle">{{$.lp.direction}}:</td>
  72. <td class="editTableValue">
  73. <input type="radio" name="direction" value="horizontal" text{(!$.direction || $.direction==='horizontal')?'checked':''}/>{{$.lp.directionValue[0]}}
  74. <input type="radio" name="direction" value="vertical" text{($.direction==='vertical')?'checked':''}/>{{$.lp.directionValue[1]}}
  75. </td>
  76. </tr>
  77. </table>
  78. <div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
  79. <div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>
  80. <!-- <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">-->
  81. <!-- <tr>-->
  82. <!-- <td class="editTableTitle">{{$.lp.compute}}:</td>-->
  83. <!-- <td class="editTableValue">-->
  84. <!-- <input type="radio" name="compute" value="create" text{(!$.compute || $.compute=='create')?'checked':''}/>{{$.lp.create}}-->
  85. <!-- <input type="radio" name="compute" value="save" text{($.compute=='save')?'checked':''}/>{{$.lp.save}}-->
  86. <!-- <input type="radio" name="compute" value="show" text{($.compute=='show')?'checked':''}/>{{$.lp.show}}-->
  87. <!-- </td>-->
  88. <!-- </tr>-->
  89. <!-- </table>-->
  90. <!-- <div class="MWFScriptArea" name="defaultValue" title="{{$.lp.defaultValue}} (S)"></div>-->
  91. <!-- <div class="MWFValidation" name="validationConfig"></div>-->
  92. <!-- <div class="MWFScriptArea" name="validation" title="{{$.lp.verificationScript}} (S)"></div>-->
  93. </div>
  94. <div title="{{$.lp.data}}" class="MWFTab">
  95. <table>
  96. <tr>
  97. <td class="editTableTitle"></td>
  98. <td class="editTableValue">
  99. <input type="radio" name="dataType" value="hotpicture" text{(!$.dataType || $.dataType==='hotpicture')?'checked':''}
  100. onclick="if (this.checked){
  101. $('text{$.pid}hotpicture').setStyle('display', '');
  102. $('text{$.pid}source').setStyle('display', 'none');
  103. $('text{$.pid}dataScript').setStyle('display', 'none');
  104. }"
  105. />{{$.lp.hotpicture}}
  106. <input type="radio" name="dataType" value="source" text{($.dataType==='source')?'checked':''}
  107. onclick="if (this.checked){
  108. $('text{$.pid}hotpicture').setStyle('display', 'none');
  109. $('text{$.pid}source').setStyle('display', '');
  110. $('text{$.pid}dataScript').setStyle('display', 'none');
  111. }"
  112. />{{$.lp.systemSource}}
  113. <input type="radio" name="dataType" value="script" text{($.dataType==='script')?'checked':''}
  114. onclick="if (this.checked){
  115. $('text{$.pid}hotpicture').setStyle('display', 'none');
  116. $('text{$.pid}source').setStyle('display', 'none');
  117. $('text{$.pid}dataScript').setStyle('display', '');
  118. }"
  119. />{{$.lp.script}}
  120. </td>
  121. </tr>
  122. </table>
  123. <div id="text{$.pid}hotpicture" style="display: text{(!$.dataType || $.dataType=='hotpicture')?'':'none'}">
  124. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  125. <tr>
  126. <td class="editTableTitle">{{$.lp.count}}:</td>
  127. <td class="editTableValue"><input type="number" name="count" value="text{$.count}" class="editTableInput"/></td>
  128. </tr>
  129. <tr>
  130. <td class="editTableTitle">{{$.lp.page}}:</td>
  131. <td class="editTableValue"><input type="number" name="page" value="text{$.page}" class="editTableInput"/></td>
  132. </tr>
  133. </table>
  134. <div style="padding: 5px;">脚本可返回过滤参数,格式如下:<br/>return { <br/>
  135. "application" : "", //BBS论坛, CMS内容管理,忽略为全部<br/>
  136. "title" : "", //标题包含的文字,模糊匹配<br/>
  137. }; </div>
  138. <div class="MWFFormulaArea" name="filterScript" title="{{$.lp.filterParameter}}"></div>
  139. </div>
  140. <div id="text{$.pid}source" style="display: text{($.dataType=='source')?'':'none'}">
  141. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  142. <tr>
  143. <td class="editTableTitle">{{$.lp.method}}:</td>
  144. <td class="editTableValue">
  145. <select name="httpMethod" onchange="var i=this.selectedIndex; if (i==1 || i==2 || i==3){$('text{$.pid}requestBodyArea').setStyle('display', 'block');}else{$('text{$.pid}requestBodyArea').setStyle('display', 'none');}">
  146. <option value="GET" text{($.httpMethod=='GET')?'selected':''}>GET</option>
  147. <option value="POST" text{($.httpMethod=='POST')?'selected':''}>POST</option>
  148. <option value="PUT" text{($.httpMethod=='PUT')?'selected':''}>PUT</option>
  149. <option value="PATCH" text{($.httpMethod=='PATCH')?'selected':''}>PATCH</option>
  150. <option value="OPTIONS" text{($.httpMethod=='OPTIONS')?'selected':''}>OPTIONS</option>
  151. <option value="HEAD" text{($.httpMethod=='HEAD')?'selected':''}>HEAD</option>
  152. <option value="DELETE" text{($.httpMethod=='DELETE')?'selected':''}>DELETE</option>
  153. </select>
  154. </td>
  155. </tr>
  156. </table>
  157. <div id="text{$.pid}sourceO2Area" style="display: text{($.sourceType!='other')?'block':'none'}">
  158. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  159. <tr>
  160. <td class="editTableTitle">{{$.lp.applicationService}}:</td>
  161. <td class="editTableValue"><div class="MWFContextRoot" name="contextRoot">
  162. <select></select>
  163. <select style="display: none"></select><br/>
  164. <select style="display: none"></select>
  165. <input style="display: none" type="text" name="selectPath" value="text{$.selectPath}" class="editTableInput"/>
  166. </div></td>
  167. </tr>
  168. </table>
  169. </div>
  170. <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
  171. <tr>
  172. <td class="editTableTitle">{{$.lp.servicePath}}:</td>
  173. <td class="editTableValue">
  174. <div>{{$.lp.servicePathNote}}</div>
  175. <input type="text" name="path" value="text{$.path}" class="editTableInput"/>
  176. </td>
  177. </tr>
  178. <tr>
  179. <td class="editTableTitle">{{$.lp.dataItemPath}}:</td>
  180. <td class="editTableValue">
  181. <div>{{$.lp.dataItemPathNote}}</div>
  182. <input type="text" name="dataItemPath" value="text{$.dataItemPath}" class="editTableInput"/>
  183. </td>
  184. </tr>
  185. </table>
  186. <div style="background-color: #eeeeee; border-top:1px solid #999999; height: 24px; line-height: 24px; text-align: center;">{{$.lp.parameter}}</div>
  187. <div class="MWFParameterArea" name="parameters"></div>
  188. <div id="text{$.pid}requestBodyArea" style="display: text{($.httpMethod=='PUT' || $.httpMethod=='POST' || $.httpMethod=='PATCH')?'block':'none'}">
  189. <div class="MWFFormulaArea" name="requestBody" title="{{$.lp.requestBody}}"></div>
  190. </div>
  191. <div class="MWFSourceTestRestful">
  192. <div style="background-color: #eeeeee; border-top:1px solid #999999; height: 24px; line-height: 24px; text-align: center; cursor:pointer">{{$.lp.test}}</div>
  193. <div style="margin: 10px; text-align:center"></div>
  194. </div>
  195. </div>
  196. <div id="text{$.pid}dataScript" style="display: text{($.dataType=='script')?'':'none'}">
  197. <div style="padding: 5px;">{{$.lp.dataScriptNote2}}</div>
  198. <div class="MWFScriptArea" name="dataScript"></div>
  199. <table><tr>
  200. <td class="editTableTitle">{{$.lp.dataItemPath}}:</td>
  201. <td class="editTableValue">
  202. <div>{{$.lp.dataItemPathNote}}</div>
  203. <input type="text" name="scriptDataItemPath" value="text{$.scriptDataItemPath}" class="editTableInput"/>
  204. </td>
  205. </tr>
  206. </table>
  207. </div>
  208. </div>
  209. <div title="{{$.lp.content}}" class="MWFTab">
  210. <!-- <table>-->
  211. <!-- <tr>-->
  212. <!-- <td class="editTableTitle"></td>-->
  213. <!-- <td class="editTableValue">-->
  214. <!-- <input type="radio" name="contentType" value="config" text{(!$.contentType || $.contentType==='config')?'checked':''}-->
  215. <!-- onclick="if (this.checked){-->
  216. <!-- $('text{$.pid}contentConfig').setStyle('display', '');-->
  217. <!-- $('text{$.pid}contentScript').setStyle('display', 'none');-->
  218. <!-- }"-->
  219. <!-- />{{$.lp.config}}-->
  220. <!-- <input type="radio" name="contentType" value="script" text{($.contentType==='script')?'checked':''}-->
  221. <!-- onclick="if (this.checked){-->
  222. <!-- $('text{$.pid}contentConfig').setStyle('display', 'none');-->
  223. <!-- $('text{$.pid}contentScript').setStyle('display', '');-->
  224. <!-- }"-->
  225. <!-- />{{$.lp.script}}-->
  226. <!-- </td>-->
  227. <!-- </tr>-->
  228. <!-- </table>-->
  229. <div id="text{$.pid}contentConfig" class="MWFElCarouselContent" name="contentConfig"
  230. style="display: text{($.contentType!='script')?'':'none'}">
  231. </div>
  232. <!-- <div id="text{$.pid}contentScript" style="display: text{($.contentType=='script')?'':'none'}">-->
  233. <!-- <div style="padding: 5px;">脚本返回Promise对象或数据</div>-->
  234. <!-- <div class="MWFScriptArea" name="contentScript"></div>-->
  235. <!-- </div>-->
  236. </div>
  237. <div title="Vue" class="MWFTab">
  238. <div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Data</div>
  239. <div style="display: text{($.vueData && $.vueData.code) ? 'block': 'none'}" class="MWFScriptArea" name="vueData" title="Vue Data (S)"></div>
  240. <div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Method</div>
  241. <div div style="display: text{($.vueMethods && $.vueMethods.code) ? 'block': 'none'}" class="MWFScriptArea" name="vueMethods" title="Vue Methods (S)"></div>
  242. <div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue CSS</div>
  243. <div div style="display: text{($.vueCss && $.vueCss.code) ? 'block': 'none'}" class="MWFCssArea" name="vueCss" title="Vue Css (S)"></div>
  244. <div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Slots</div>
  245. <div style="display: text{($.vueSlot) ? 'block' : 'none'}">
  246. <div class="MWFHtmlEditorArea" name="vueSlot" title="Input Slot (HTML)"></div>
  247. </div>
  248. </div>
  249. <div title="{{$.lp.event}}" class="MWFTab">
  250. <div class="MWFEventsArea" name="events"></div>
  251. </div>
  252. <div title="HTML" class="MWFTab" style="display: none">
  253. <div class="MWFHTMLArea" style="width:100%; height:400px; border:0px;font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
  254. </div>
  255. <div title="JSON" class="MWFTab">
  256. <div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
  257. </div>
  258. </div>