API tools faq
paste
dmilosavleski

zlblb7

dmilosavleski
Dec 25th, 2017
30
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Dj Gear Store</title>
  5. <meta charset="utf-8" />
  6. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  9. <script>
  10. var players = [
  11. {
  12. code: 7,
  13. model: "Pioneer CDJ 2000",
  14. image: "",
  15. price: 1600,
  16. edit: false
  17. },
  18. {
  19. code: 777,
  20. model: "Pioneer CDJ 1000",
  21. image: "",
  22. price: 1000,
  23. edit: false
  24. },
  25. {
  26. code: 7777,
  27. model: "Pioneer CDJ 800",
  28. image: "",
  29. price: 990,
  30. edit: false
  31. }
  32.  
  33. ];
  34.  
  35. var mixers = [
  36. {
  37. code: 230,
  38. model: "Pioneer DJM 2000",
  39. image: "",
  40. price: 2300,
  41. edit: false
  42. },
  43. {
  44. code: 420,
  45. model: "Pioneer DJM 1000",
  46. image: "",
  47. price: 1800,
  48. edit: false
  49. },
  50. {
  51. code: 970,
  52. model: "Pioneer DJM 800",
  53. image: "",
  54. price: 1600,
  55. edit: false
  56. }
  57.  
  58. ];
  59. </script>
  60. <style>
  61. * {
  62. font-family: Verdana;
  63. }
  64. h1{
  65. margin-top: 0px !important;
  66. }
  67. ul
  68. {
  69. list-style-type: none !important;
  70. }
  71. li span {
  72.  
  73. display: block;
  74. margin-top: 15px;
  75. }
  76.  
  77. .listItem {
  78. width: 35%;
  79. height:50px;
  80. text-align: center;
  81. cursor: crosshair;
  82.  
  83. }
  84. .global_navigation {
  85. width: 40%;
  86. background: #1f1f1f;
  87. color: white;
  88. font-size: 25px;
  89. font-family: Verdana, sans-serif;
  90. }
  91.  
  92. .global_nav_button {
  93. padding: 5px;
  94. background: #8f8f8f;
  95. }
  96.  
  97. .active {
  98. padding: 5px;
  99. background: #2e2e2e;
  100. cursor: pointer;
  101. color: #FE2E2E;
  102. }
  103. .global_nav_button:hover{
  104.  
  105. background: #2e2e2e;
  106. cursor: pointer;
  107. color: #FE2E2E;
  108. }
  109.  
  110.  
  111. </style>
  112. </head>
  113. <body>
  114. <div class="global_navigation">
  115.  
  116. <span class="global_nav_button active" id="players_button">Players</span>
  117. <span class="global_nav_button" id="mixers_button">Mixers</span>
  118. <span class="global_nav_button" id="basket_button">Basket</span>
  119.  
  120. </div>
  121.  
  122. <div class="main_content">
  123. <div id="players">
  124. <ul id="pleeri">
  125. </ul>
  126. </div>
  127.  
  128. <div id="mixers">
  129. <ul id="mikseri">
  130. </ul>
  131. </div>
  132.  
  133. <div id="basket">
  134. <h3> Shoping basket </h3>
  135. <ul id = "basketList">
  136. <li> <span> Fill me up! </span></li>
  137. </ul>
  138. </div>
  139. </div>
  140.  
  141. <div class="global_navigation"> FINKI Dj Gear Store </div>
  142.  
  143. <script>
  144. var current = 1;
  145.  
  146. $("#players").show();
  147. $("#mixers").hide();
  148.  
  149. $.each(players, function(index, item){
  150. $("#pleeri").append("<li>" + item.code + " " + item.model + " " + item.price + "</li>");
  151. });
  152.  
  153. $.each(mixers, function(index, item){
  154. $("#mikseri").append("<li>" + item.code + " " + item.model + " " + item.price + "</li>");
  155. });
  156.  
  157. $("#players_button").click(function () {
  158. if(current == 1){
  159. return;
  160. }
  161. else{
  162. $("#players_button").removeClass("global_nav_button");
  163. $("#players_button").addClass("global_nav_button active");
  164. if(current == 2){
  165. $("#mixers_button").removeClass("global_nav_button active");
  166. $("#mixers_button").addClass("global_nav_button");
  167. }
  168. else if(current == 3){
  169. $("#basket_button").removeClass("global_nav_button active");
  170. $("#basket_button").addClass("global_nav_button");$("#players").hide();
  171. $("#mixers").show();
  172. }
  173. current = 1;
  174. $("#players").show();
  175. $("#mixers").hide();
  176. }
  177. });
  178.  
  179. $("#mixers_button").click(function () {
  180. if(current == 2){
  181. return;
  182. }
  183. else{
  184. $("#mixers_button").removeClass("global_nav_button");
  185. $("#mixers_button").addClass("global_nav_button active");
  186. if(current == 1){
  187. $("#players_button").removeClass("global_nav_button active");
  188. $("#players_button").addClass("global_nav_button");
  189. }
  190. else if(current == 3){
  191. $("#basket_button").removeClass("global_nav_button active");
  192. $("#basket_button").addClass("global_nav_button");
  193. }
  194. current = 2;
  195. $("#players").hide();
  196. $("#mixers").show();
  197. }
  198. });
  199.  
  200. $("#basket_button").click(function () {
  201. if(current == 3){
  202. return;
  203. }
  204. else{
  205. $("#basket_button").removeClass("global_nav_button");
  206. $("#basket_button").addClass("global_nav_button active");
  207. if(current == 1){
  208. $("#players_button").removeClass("global_nav_button active");
  209. $("#players_button").addClass("global_nav_button");
  210. }
  211. else if(current == 2){
  212. $("#mixers_button").removeClass("global_nav_button active");
  213. $("#mixers_button").addClass("global_nav_button");
  214. }
  215. current = 3;
  216. $("#players").hide();
  217. $("#mixers").hide();
  218. }
  219. });
  220.  
  221. $("#pleeri, #mikseri").sortable({
  222. connectWith: "#basketList"
  223. });
  224. $("#basketList").sortable();
  225. </script>
  226.  
  227. </body>
  228.  
  229. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!