radio.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>单选框</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  7. <meta name="generator" content="www.leipi.org"/>
  8. <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  9. <!--[if lte IE 6]>
  10. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
  11. <![endif]-->
  12. <!--[if lte IE 7]>
  13. <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
  14. <![endif]-->
  15. <link rel="stylesheet" href="leipi.style.css">
  16. <script type="text/javascript" src="../dialogs/internal.js"></script>
  17. <script type="text/javascript">
  18. function createElement(type, name) {
  19. var element = null;
  20. try {
  21. element = document.createElement('<' + type + ' name="' + name + '">');
  22. } catch (e) {
  23. }
  24. if (element == null) {
  25. element = document.createElement(type);
  26. element.name = name;
  27. }
  28. return element;
  29. }
  30. function fnSelect(combo) {
  31. var iIndex = combo.selectedIndex;
  32. oListText.selectedIndex = iIndex;
  33. var olistText = document.getElementById("orgtext");
  34. olistText.value = oListText.value;
  35. }
  36. function fnAdd() {
  37. var olistText = document.getElementById("orgtext");
  38. fnAddComboOption(oListText, olistText.value, olistText.value);
  39. oListText.selectedIndex = oListText.options.length - 1;
  40. olistText.value = '';
  41. olistText.focus();
  42. }
  43. function fnModify() {
  44. var iIndex = oListText.selectedIndex;
  45. if (iIndex < 0) return;
  46. var olistText = document.getElementById("orgtext");
  47. oListText.options[iIndex].innerHTML = fnHTMLEncode(olistText.value);
  48. oListText.options[iIndex].value = olistText.value;
  49. olistText.value = '';
  50. olistText.focus();
  51. }
  52. function fnMove(steps) {
  53. fnChangeOptionPosition(oListText, steps);
  54. }
  55. function fnDelete() {
  56. fnRemoveSelectedOptions(oListText);
  57. }
  58. function fnSetSelectedValue() {
  59. var iIndex = oListText.selectedIndex;
  60. if (iIndex < 0) return;
  61. var olistText = document.getElementById("orgvalue");
  62. olistText.innerHTML = oListText.options[iIndex].value;
  63. }
  64. // Moves the selected option by a number of steps (also negative)
  65. function fnChangeOptionPosition(combo, steps) {
  66. var iActualIndex = combo.selectedIndex;
  67. if (iActualIndex < 0) {
  68. return;
  69. }
  70. var iFinalIndex = iActualIndex + steps;
  71. if (iFinalIndex < 0) {
  72. iFinalIndex = 0;
  73. }
  74. if (iFinalIndex > (combo.options.length - 1)) {
  75. iFinalIndex = combo.options.length - 1;
  76. }
  77. if (iActualIndex == iFinalIndex) {
  78. return;
  79. }
  80. var oOption = combo.options[iActualIndex];
  81. if (oOption.value == "") {
  82. var sText = fnHTMLDecode(oOption.value);
  83. } else {
  84. var sText = fnHTMLDecode(oOption.innerHTML);
  85. }
  86. combo.remove(iActualIndex);
  87. oOption = fnAddComboOption(combo, sText, sText, null, iFinalIndex);
  88. oOption.selected = true;
  89. }
  90. // Remove all selected options from a SELECT object
  91. function fnRemoveSelectedOptions(combo) {
  92. // Save the selected index
  93. var iSelectedIndex = combo.selectedIndex;
  94. var oOptions = combo.options;
  95. // Remove all selected options
  96. for (var i = oOptions.length - 1; i >= 0; i--) {
  97. if (oOptions[i].selected) combo.remove(i);
  98. }
  99. // Reset the selection based on the original selected index
  100. if (combo.options.length > 0) {
  101. if (iSelectedIndex >= combo.options.length) iSelectedIndex = combo.options.length - 1;
  102. combo.selectedIndex = iSelectedIndex;
  103. }
  104. }
  105. // Add a new option to a SELECT object (combo or list)
  106. function fnAddComboOption(combo, optionText, optionValue, documentObject, index) {
  107. var oOption;
  108. if (documentObject) {
  109. oOption = documentObject.createElement("option");
  110. } else {
  111. oOption = document.createElement("option");
  112. }
  113. if (index != null) {
  114. combo.options.add(oOption, index);
  115. } else {
  116. combo.options.add(oOption);
  117. }
  118. oOption.innerHTML = optionText.length > 0 ? fnHTMLEncode(optionText) : '&nbsp;';
  119. oOption.value = optionValue;
  120. return oOption;
  121. }
  122. function fnHTMLEncode(text) {
  123. if (!text) {
  124. return '';
  125. }
  126. text = text.replace(/&/g, '&amp;');
  127. text = text.replace(/</g, '&lt;');
  128. text = text.replace(/>/g, '&gt;');
  129. return text;
  130. }
  131. function fnHTMLDecode(text) {
  132. if (!text) {
  133. return '';
  134. }
  135. text = text.replace(/&gt;/g, '>');
  136. text = text.replace(/&lt;/g, '<');
  137. text = text.replace(/&amp;/g, '&');
  138. return text;
  139. }
  140. function fnSetAttribute(element, attName, attValue) {
  141. if (attValue == null || attValue.length == 0) {
  142. element.removeAttribute(attName, 0);
  143. } else {
  144. element.setAttribute(attName, attValue, 0);
  145. }
  146. }
  147. </script>
  148. </head>
  149. <body>
  150. <div class="content">
  151. <table class="table table-bordered table-striped table-hover">
  152. <tr>
  153. <th><span>控件名称</span><span class="label label-important">*</span></th>
  154. <th><span>初始选定</span></th>
  155. </tr>
  156. <tr>
  157. <td><input id="orgname" type="text" placeholder="必填项"/></td>
  158. <td><span id="orgvalue" class="uneditable-input"></span></td>
  159. </tr>
  160. <tr>
  161. <th colspan="2">
  162. <span>单选框选项</span><span class="label label-important">*</span>
  163. </th>
  164. </tr>
  165. <tr>
  166. <td colspan="2">
  167. <select id="orglist" multiple="multiple" class="span14"></select>
  168. </td>
  169. </tr>
  170. <tr>
  171. <td>
  172. <div class="btn-group pull-right">
  173. <a title="新增" onclick="fnAdd();" class="btn btn-primary"><i class="icon-white icon-plus"></i></a>
  174. <a title="修改" onclick="fnModify();" class="btn btn-default"><i class="icon-edit"></i></a>
  175. </div>
  176. <input type="text" placeholder="输入列表值..." class="span2" id="orgtext">
  177. </td>
  178. <td>
  179. <div class="btn-group">
  180. <button title="上移" onclick="fnMove(-1);" class="btn btn-default"><i class="icon-arrow-up"></i>
  181. </button>
  182. <button title="下移" onclick="fnMove(1);" class="btn btn-default"><i class="icon-arrow-down"></i>
  183. </button>
  184. <button title="设为初始化时选定值" onclick="fnSetSelectedValue();" class="btn btn-default"><i
  185. class="icon-ok-circle"></i></button>
  186. <button title="删除" onclick="fnDelete();" class="btn btn-default"><i class="icon-ban-circle"></i>
  187. </button>
  188. </div>
  189. </td>
  190. </tr>
  191. </table>
  192. <div class="alert alert-danger">提示:需要预览才能看到实际效果</div>
  193. </div>
  194. <script type="text/javascript">
  195. var oNode = null, oListText = '', thePlugins = 'radio';
  196. window.onload = function () {
  197. oListText = $G('orglist');
  198. if (UE.plugins[thePlugins].editdom) {
  199. oNode = UE.plugins[thePlugins].editdom;
  200. var gTitle = oNode.getAttribute('title').replace(/&quot;/g, "\""),
  201. gRadios = oNode.getAttribute('orgradios'), gChecked = oNode.getAttribute("orgchecked");
  202. gTitle = gTitle == null ? '' : gTitle;
  203. $G('orgvalue').innerHTML = gChecked;
  204. $G('orgname').value = gTitle;
  205. var sDataField = gRadios;
  206. var aDataField = sDataField.split('`');
  207. var sLvCheck = gChecked;
  208. // Load the actual options
  209. for (var i = 0; i < aDataField.length; i++) {
  210. var sText = aDataField[i];
  211. if (aDataField[i] == "") {
  212. continue;
  213. }
  214. fnAddComboOption(oListText, sText, sText);
  215. }
  216. }
  217. }
  218. dialog.oncancel = function () {
  219. if (UE.plugins[thePlugins].editdom) {
  220. delete UE.plugins[thePlugins].editdom;
  221. }
  222. };
  223. dialog.onok = function () {
  224. if ($G('orgname').value == '') {
  225. alert('控件名称不能为空');
  226. return false;
  227. }
  228. if (oListText.options.length == 0) {
  229. alert('请添加选项!');
  230. return false;
  231. }
  232. var gValue = $G('orgvalue').innerHTML, gTitle = $G('orgname').value.replace(/\"/g, "&quot;");
  233. var sDataField = '', sLvCheck = '';
  234. for (var i = 0; i < oListText.options.length; i++) {
  235. var sText = oListText.options[i].value;
  236. if (sText.length == 0) sText = sText;
  237. if (sText == gValue) {
  238. sLvCheck = sText;
  239. }
  240. if (sDataField.indexOf(sText + "`") != -1 && sText != "`") {
  241. alert("选项 [" + sText + "] 重复");
  242. return false;
  243. }
  244. sDataField += sText + "`";
  245. }
  246. if (!oNode) {
  247. try {
  248. oNode = createElement('input', 'leipiNewField');
  249. oNode.setAttribute('title', gTitle);
  250. oNode.setAttribute('name', 'leipiNewField');
  251. oNode.setAttribute('type', 'radio');
  252. oNode.setAttribute('checked', 'checked');
  253. oNode.setAttribute('orgradios', sDataField);
  254. oNode.setAttribute('orgchecked', sLvCheck);
  255. oNode.setAttribute('leipiPlugins', thePlugins);
  256. editor.execCommand('insertHtml', oNode.outerHTML);
  257. return true;
  258. } catch (e) {
  259. try {
  260. editor.execCommand('error');
  261. } catch (e) {
  262. alert('控件异常,请到 [雷劈网] 反馈或寻求帮助!');
  263. }
  264. return false;
  265. }
  266. } else {
  267. oNode.setAttribute('title', gTitle);
  268. oNode.setAttribute('orgradios', sDataField);
  269. oNode.setAttribute('orgchecked', sLvCheck);
  270. delete UE.plugins[thePlugins].editdom;
  271. return true;
  272. }
  273. };
  274. </script>
  275. </body>
  276. </html>