Макет интерфейса UIK (Основан на UIkit) | UIK interface template (Based on UIkit)
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

пример|sample.js 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. const ИМЯ = "UIK";
  2. // // // //
  3. ВыбратьПервыйПунктМенюДокументации = мир =>
  4. {
  5. мир.номерВыбранногоПунктаДокументации = 0;
  6. мир.уведомить("выбрали пункт меню документации");
  7. };
  8. // // // //
  9. ОтобразитьСодержимоеВыбранногоПунктаМенюДокументации = мир =>
  10. {
  11. $(`#${мир.макет.константы.содержимое}`).html(`<p>Выбрали пункт меню #${мир.номерВыбранногоПунктаДокументации}`);
  12. };
  13. // // // //
  14. ОтобразитьВыборПунктаМенюДокументации = мир =>
  15. {
  16. const id = мир.макет.константы.документация;
  17. // Очищаем прошлый выбор.
  18. for (var номер in мир.пунктыДокументации)
  19. {
  20. $(`#${id}-${номер}`).removeClass("uk-active");
  21. }
  22. // Задаём новый выбор.
  23. $(`#${id}-${мир.номерВыбранногоПунктаДокументации}`).addClass("uk-active");
  24. };
  25. // // // //
  26. ОтслеживатьВыборПунктаМенюДокументации = мир =>
  27. {
  28. for (var номер in мир.пунктыДокументации)
  29. {
  30. const номерПункта = номер;
  31. const id = `${мир.макет.константы.документация}-${номер}-ссылка`;
  32. $(`#${id}`).click(function() {
  33. мир.номерВыбранногоПунктаДокументации = номерПункта;
  34. мир.уведомить("выбрали пункт меню документации");
  35. });
  36. }
  37. };
  38. // // // //
  39. СоздатьРазделМенюДокументации = мир =>
  40. {
  41. мир.макет.константы.документация = "документация";
  42. var содержимое = "";
  43. for (var номер in мир.пунктыДокументации)
  44. {
  45. var название = мир.пунктыДокументации[номер];
  46. var id = `${мир.макет.константы.документация}-${номер}`;
  47. var пункт = мир.макет.элементы.пунктМеню
  48. .replace("%название%", название)
  49. .replace(/%id%/g, id)
  50. ;
  51. содержимое += пункт;
  52. }
  53. var раздел = мир.макет.элементы.разделМеню
  54. .replace("%название%", мир.макет.константы.документация)
  55. .replace("%содержимое%", содержимое)
  56. ;
  57. $(`#${мир.макет.константы.меню}`).append(раздел);
  58. };
  59. // // // //
  60. ЗадатьПунктыРазделаМенюДокументации = мир =>
  61. {
  62. мир.пунктыДокументации = [
  63. "Описание",
  64. "Ещё что-то",
  65. ];
  66. };
  67. // // // //
  68. ЗадатьЗаголовок = мир =>
  69. {
  70. $(`#${мир.макет.константы.заголовокЛево}`).html(`
  71. <span class="uk-navbar-item uk-logo">UIK</span>
  72. `);
  73. };
  74. // // // //
  75. ЗадатьЭлементыМакета = мир =>
  76. {
  77. мир.макет.элементы = {
  78. "разделМеню": `
  79. <ul class="uk-nav uk-nav-default tm-nav">
  80. <li class="uk-nav-header">%название%</li>
  81. %содержимое%
  82. </ul>
  83. `,
  84. "пунктМеню": `
  85. <li id="%id%"><a id="%id%-ссылка">%название%</a></li>
  86. `,
  87. };
  88. }
  89. // // // //
  90. ОчиститьМакетUIKОтЗаглушек = мир =>
  91. {
  92. $(`#${мир.макет.константы.заголовокЛево}`).text("");
  93. $(`#${мир.макет.константы.заголовокЦентр}`).text("");
  94. $(`#${мир.макет.константы.заголовокПраво}`).text("");
  95. $(`#${мир.макет.константы.меню}`).text("");
  96. $(`#${мир.макет.константы.содержимое}`).text("");
  97. };
  98. // // // //
  99. УстановитьМакетUIK = мир =>
  100. {
  101. document.body.innerHTML = мир.макет.структура;
  102. var вид = document.createElement("style");
  103. document.head.appendChild(вид);
  104. вид.innerHTML = мир.макет.вид;
  105. };
  106. // // // //
  107. НастроитьПримерМакетаUIK = мир =>
  108. {
  109. var название = "пример";
  110. var html = мир.макет.структура;
  111. var css = мир.макет.вид;
  112. // Вырезаем тело из макета.
  113. var начало = html.indexOf("<!-- МАКЕТ_НАЧАЛО -->");
  114. var конец = html.indexOf("<!-- МАКЕТ_КОНЕЦ -->");
  115. html = html.substring(начало, конец);
  116. мир.макет.константы = {
  117. "заголовокЛево": `${название}-заголовокЛево`,
  118. "заголовокЦентр": `${название}-заголовокЦентр`,
  119. "заголовокПраво": `${название}-заголовокПраво`,
  120. "меню": `${название}-меню`,
  121. "содержимое": `${название}-содержимое`,
  122. };
  123. // Заменяем константы в макете.
  124. for (var константа in мир.макет.константы)
  125. {
  126. var старое = "${" + константа + "}";
  127. var новое = мир.макет.константы[константа];
  128. html = html.replace(старое, новое);
  129. css = css.replace(старое, новое);
  130. }
  131. мир.макет.структура = html;
  132. мир.макет.вид = css;
  133. };
  134. // // // //
  135. ЗагрузитьМакетUIK = мир =>
  136. {
  137. var м = мир.модули.модульПоИмени(ИМЯ);
  138. мир.макет = {
  139. "структура": м.содержимое["/макет|template.html"],
  140. "вид": м.содержимое["/макет|template.css"],
  141. };
  142. };
  143. // // // //
  144. ВывестиПриветствиеОтUIK = мир =>
  145. {
  146. console.debug("Привет от UIK");
  147. };