demo.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. /**
  2. * AdminLTE Demo Menu
  3. * ------------------
  4. * You should not use this file in production.
  5. * This file is for demo purposes only.
  6. */
  7. (function ($) {
  8. 'use strict'
  9. var $sidebar = $('.control-sidebar')
  10. var $container = $('<div />', {
  11. class: 'p-3 control-sidebar-content'
  12. })
  13. $sidebar.append($container)
  14. var navbar_dark_skins = [
  15. 'navbar-primary',
  16. 'navbar-secondary',
  17. 'navbar-info',
  18. 'navbar-success',
  19. 'navbar-danger',
  20. 'navbar-indigo',
  21. 'navbar-purple',
  22. 'navbar-pink',
  23. 'navbar-teal',
  24. 'navbar-cyan',
  25. 'navbar-dark',
  26. 'navbar-gray-dark',
  27. 'navbar-gray',
  28. ]
  29. var navbar_light_skins = [
  30. 'navbar-light',
  31. 'navbar-warning',
  32. 'navbar-white',
  33. 'navbar-orange',
  34. ]
  35. $container.append(
  36. '<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
  37. )
  38. var $no_border_checkbox = $('<input />', {
  39. type : 'checkbox',
  40. value : 1,
  41. checked: $('.main-header').hasClass('border-bottom-0'),
  42. 'class': 'mr-1'
  43. }).on('click', function () {
  44. if ($(this).is(':checked')) {
  45. $('.main-header').addClass('border-bottom-0')
  46. } else {
  47. $('.main-header').removeClass('border-bottom-0')
  48. }
  49. })
  50. var $no_border_container = $('<div />', {'class': 'mb-1'}).append($no_border_checkbox).append('<span>No Navbar border</span>')
  51. $container.append($no_border_container)
  52. var $text_sm_header_checkbox = $('<input />', {
  53. type : 'checkbox',
  54. value : 1,
  55. checked: $('.main-header').hasClass('text-sm'),
  56. 'class': 'mr-1'
  57. }).on('click', function () {
  58. if ($(this).is(':checked')) {
  59. $('.main-header').addClass('text-sm')
  60. } else {
  61. $('.main-header').removeClass('text-sm')
  62. }
  63. })
  64. var $text_sm_header_container = $('<div />', {'class': 'mb-1'}).append($text_sm_header_checkbox).append('<span>Navbar small text</span>')
  65. $container.append($text_sm_header_container)
  66. var $text_sm_sidebar_checkbox = $('<input />', {
  67. type : 'checkbox',
  68. value : 1,
  69. checked: $('.nav-sidebar').hasClass('text-sm'),
  70. 'class': 'mr-1'
  71. }).on('click', function () {
  72. if ($(this).is(':checked')) {
  73. $('.nav-sidebar').addClass('text-sm')
  74. } else {
  75. $('.nav-sidebar').removeClass('text-sm')
  76. }
  77. })
  78. var $text_sm_sidebar_container = $('<div />', {'class': 'mb-1'}).append($text_sm_sidebar_checkbox).append('<span>Sidebar nav small text</span>')
  79. $container.append($text_sm_sidebar_container)
  80. var $flat_sidebar_checkbox = $('<input />', {
  81. type : 'checkbox',
  82. value : 1,
  83. checked: $('.nav-sidebar').hasClass('nav-flat'),
  84. 'class': 'mr-1'
  85. }).on('click', function () {
  86. if ($(this).is(':checked')) {
  87. $('.nav-sidebar').addClass('nav-flat')
  88. } else {
  89. $('.nav-sidebar').removeClass('nav-flat')
  90. }
  91. })
  92. var $flat_sidebar_container = $('<div />', {'class': 'mb-1'}).append($flat_sidebar_checkbox).append('<span>Sidebar nav flat style</span>')
  93. $container.append($flat_sidebar_container)
  94. var $compact_sidebar_checkbox = $('<input />', {
  95. type : 'checkbox',
  96. value : 1,
  97. checked: $('.nav-sidebar').hasClass('nav-compact'),
  98. 'class': 'mr-1'
  99. }).on('click', function () {
  100. if ($(this).is(':checked')) {
  101. $('.nav-sidebar').addClass('nav-compact')
  102. } else {
  103. $('.nav-sidebar').removeClass('nav-compact')
  104. }
  105. })
  106. var $compact_sidebar_container = $('<div />', {'class': 'mb-1'}).append($compact_sidebar_checkbox).append('<span>Sidebar nav compact</span>')
  107. $container.append($compact_sidebar_container)
  108. var $child_indent_sidebar_checkbox = $('<input />', {
  109. type : 'checkbox',
  110. value : 1,
  111. checked: $('.nav-sidebar').hasClass('nav-child-indent'),
  112. 'class': 'mr-1'
  113. }).on('click', function () {
  114. if ($(this).is(':checked')) {
  115. $('.nav-sidebar').addClass('nav-child-indent')
  116. } else {
  117. $('.nav-sidebar').removeClass('nav-child-indent')
  118. }
  119. })
  120. var $child_indent_sidebar_container = $('<div />', {'class': 'mb-1'}).append($child_indent_sidebar_checkbox).append('<span>Sidebar nav child indent</span>')
  121. $container.append($child_indent_sidebar_container)
  122. var $text_sm_brand_checkbox = $('<input />', {
  123. type : 'checkbox',
  124. value : 1,
  125. checked: $('.brand-link').hasClass('text-sm'),
  126. 'class': 'mr-1'
  127. }).on('click', function () {
  128. if ($(this).is(':checked')) {
  129. $('.brand-link').addClass('text-sm')
  130. } else {
  131. $('.brand-link').removeClass('text-sm')
  132. }
  133. })
  134. var $text_sm_brand_container = $('<div />', {'class': 'mb-4'}).append($text_sm_brand_checkbox).append('<span>Brand small text</span>')
  135. $container.append($text_sm_brand_container)
  136. $container.append('<h6>Navbar Variants</h6>')
  137. var $navbar_variants = $('<div />', {
  138. 'class': 'd-flex'
  139. })
  140. var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins)
  141. var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function (e) {
  142. var color = $(this).data('color')
  143. var $main_header = $('.main-header')
  144. $main_header.removeClass('navbar-dark').removeClass('navbar-light')
  145. navbar_all_colors.map(function (color) {
  146. $main_header.removeClass(color)
  147. })
  148. if (navbar_dark_skins.indexOf(color) > -1) {
  149. $main_header.addClass('navbar-dark')
  150. } else {
  151. $main_header.addClass('navbar-light')
  152. }
  153. $main_header.addClass(color)
  154. })
  155. $navbar_variants.append($navbar_variants_colors)
  156. $container.append($navbar_variants)
  157. var sidebar_colors = [
  158. 'bg-primary',
  159. 'bg-warning',
  160. 'bg-info',
  161. 'bg-danger',
  162. 'bg-success',
  163. 'bg-indigo',
  164. 'bg-navy',
  165. 'bg-purple',
  166. 'bg-fuchsia',
  167. 'bg-pink',
  168. 'bg-maroon',
  169. 'bg-orange',
  170. 'bg-lime',
  171. 'bg-teal',
  172. 'bg-olive'
  173. ]
  174. var sidebar_skins = [
  175. 'sidebar-dark-primary',
  176. 'sidebar-dark-warning',
  177. 'sidebar-dark-info',
  178. 'sidebar-dark-danger',
  179. 'sidebar-dark-success',
  180. 'sidebar-dark-indigo',
  181. 'sidebar-dark-navy',
  182. 'sidebar-dark-purple',
  183. 'sidebar-dark-fuchsia',
  184. 'sidebar-dark-pink',
  185. 'sidebar-dark-maroon',
  186. 'sidebar-dark-orange',
  187. 'sidebar-dark-lime',
  188. 'sidebar-dark-teal',
  189. 'sidebar-dark-olive',
  190. 'sidebar-light-primary',
  191. 'sidebar-light-warning',
  192. 'sidebar-light-info',
  193. 'sidebar-light-danger',
  194. 'sidebar-light-success',
  195. 'sidebar-light-indigo',
  196. 'sidebar-light-navy',
  197. 'sidebar-light-purple',
  198. 'sidebar-light-fuchsia',
  199. 'sidebar-light-pink',
  200. 'sidebar-light-maroon',
  201. 'sidebar-light-orange',
  202. 'sidebar-light-lime',
  203. 'sidebar-light-teal',
  204. 'sidebar-light-olive'
  205. ]
  206. $container.append('<h6>Dark Sidebar Variants</h6>')
  207. var $sidebar_variants = $('<div />', {
  208. 'class': 'd-flex'
  209. })
  210. $container.append($sidebar_variants)
  211. $container.append(createSkinBlock(sidebar_colors, function () {
  212. var color = $(this).data('color')
  213. var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '')
  214. var $sidebar = $('.main-sidebar')
  215. sidebar_skins.map(function (skin) {
  216. $sidebar.removeClass(skin)
  217. })
  218. $sidebar.addClass(sidebar_class)
  219. }))
  220. $container.append('<h6>Light Sidebar Variants</h6>')
  221. var $sidebar_variants = $('<div />', {
  222. 'class': 'd-flex'
  223. })
  224. $container.append($sidebar_variants)
  225. $container.append(createSkinBlock(sidebar_colors, function () {
  226. var color = $(this).data('color')
  227. var sidebar_class = 'sidebar-light-' + color.replace('bg-', '')
  228. var $sidebar = $('.main-sidebar')
  229. sidebar_skins.map(function (skin) {
  230. $sidebar.removeClass(skin)
  231. })
  232. $sidebar.addClass(sidebar_class)
  233. }))
  234. var logo_skins = navbar_all_colors
  235. $container.append('<h6>Brand Logo Variants</h6>')
  236. var $logo_variants = $('<div />', {
  237. 'class': 'd-flex'
  238. })
  239. $container.append($logo_variants)
  240. var $clear_btn = $('<a />', {
  241. href: 'javascript:void(0)'
  242. }).text('clear').on('click', function () {
  243. var $logo = $('.brand-link')
  244. logo_skins.map(function (skin) {
  245. $logo.removeClass(skin)
  246. })
  247. })
  248. $container.append(createSkinBlock(logo_skins, function () {
  249. var color = $(this).data('color')
  250. var $logo = $('.brand-link')
  251. logo_skins.map(function (skin) {
  252. $logo.removeClass(skin)
  253. })
  254. $logo.addClass(color)
  255. }).append($clear_btn))
  256. function createSkinBlock(colors, callback) {
  257. var $block = $('<div />', {
  258. 'class': 'd-flex flex-wrap mb-3'
  259. })
  260. colors.map(function (color) {
  261. var $color = $('<div />', {
  262. 'class': (typeof color === 'object' ? color.join(' ') : color) + ' elevation-2'
  263. })
  264. $block.append($color)
  265. $color.data('color', color)
  266. $color.css({
  267. width : '40px',
  268. height : '20px',
  269. borderRadius: '25px',
  270. marginRight : 10,
  271. marginBottom: 10,
  272. opacity : 0.8,
  273. cursor : 'pointer'
  274. })
  275. $color.hover(function () {
  276. $(this).css({ opacity: 1 }).removeClass('elevation-2').addClass('elevation-4')
  277. }, function () {
  278. $(this).css({ opacity: 0.8 }).removeClass('elevation-4').addClass('elevation-2')
  279. })
  280. if (callback) {
  281. $color.on('click', callback)
  282. }
  283. })
  284. return $block
  285. }
  286. })(jQuery)