API tools faq
paste
Mitko_jos

IA_lab8_esi mi dobar

Mitko_jos
Dec 18th, 2013
146
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.91 KB | None | 0 0
raw download clone embed print report
  1. 1va zadaca
  2.  
  3. <!doctype html>
  4.  
  5. <html lang="en">
  6. <head>
  7. <meta charset="utf-8" />
  8. <title>jQuery UI Accordion - Default functionality</title>
  9. <link rel="stylesheet" href="jquery-ui.css" />
  10. <style>
  11. .img{
  12. position:absolute;
  13. top:100px;
  14. left:50px;
  15. }
  16.  
  17.  
  18. * {
  19. font-size:12px;
  20. }
  21. #accordion {
  22. margin-top: 50px;
  23. width: 600px;
  24. position:absolute;
  25. left:400px;
  26. }
  27. </style>
  28.  
  29.  
  30. <script src="jquery-1.8.3.js"></script>
  31. <script src="jquery-ui.js"></script>
  32. <script>
  33.  
  34. $(document).ready(function(){
  35.  
  36. var previousImage = 1;
  37. var previousImageStr = "#img" + previousImage;
  38. var accOpts={
  39. header:"h3",
  40. event:"click",
  41. }
  42.  
  43. $("#img2").css("left", -550);
  44. $("#img3").css("left", -550);
  45. $("#img4").css("left", -550);
  46.  
  47. //$(previousImageStr).css("left", -550);
  48. //$(currentImageStr).animate({opacity: 1}, "fast");
  49. //$(previousImageStr).animate({left: "+=650", opacity: 1}, "fast");
  50.  
  51. $('#accordion').accordion(accOpts);
  52.  
  53. $('#btn').click(function(){
  54. var smth=$('#tags').val();
  55. if(smth=="Section 1")
  56. {
  57. $('#accordion').accordion("activate",0);
  58. $("#img1").css("left", 50);
  59. $("#img2").css("left", -550);
  60. $("#img3").css("left", -550);
  61. $("#img4").css("left", -550);
  62. $("#img1").css({'opacity': 0 });
  63. $("#img1").animate({opacity: 1}, "fast");
  64. }
  65. else if(smth=="Section 2")
  66. {
  67. $('#accordion').accordion("activate",1);
  68. $("#img1").css("left", -550);
  69. $("#img2").css("left", 50);
  70. $("#img3").css("left", -550);
  71. $("#img4").css("left", -550);
  72. $("#img2").css({'opacity': 0 });
  73. $("#img2").animate({opacity: 1}, "fast");
  74. }
  75. else if(smth=="Section 3")
  76. {
  77. $('#accordion').accordion("activate",2);
  78. $("#img1").css("left", -550);
  79. $("#img2").css("left", -550);
  80. $("#img3").css("left", 50);
  81. $("#img4").css("left", -550);
  82. $("#img3").css({'opacity': 0 });
  83. $("#img3").animate({opacity: 1}, "fast");
  84. }
  85. else if(smth=="Section 4")
  86. {
  87. $('#accordion').accordion("activate",3);
  88. $("#img1").css("left", -550);
  89. $("#img2").css("left", -550);
  90. $("#img3").css("left", -550);
  91. $("#img4").css("left", 50);
  92. $("#img4").css({'opacity': 0 });
  93. $("#img4").animate({opacity: 1}, "fast");
  94. }
  95.  
  96.  
  97. });
  98.  
  99. });
  100. $(function () {
  101. var availableSections = ["Section 1","Section 2","Section 3","Section 4"];
  102. $("#tags").autocomplete({ source: availableSections });
  103. });
  104.  
  105. </script>
  106.  
  107.  
  108.  
  109. </head>
  110. <body>
  111.  
  112. <div class="ui-widget" style="margin-right:auto;margin-left:auto;">
  113. <label for="tags">Tags: </label>
  114. <select id="tags">
  115. <option>Section 1</option>
  116. <option>Section 2</option>
  117. <option>Section 3</option>
  118. <option>Section 4</option>
  119.  
  120.  
  121. </select>
  122. <input type='button' value='open' id='btn'/>
  123. </div>
  124.  
  125. <div id="accordion">
  126. <h3>Section 1</h3>
  127. <div>
  128. <p>
  129. Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
  130. ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
  131. amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
  132. odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
  133. </p>
  134. </div>
  135. <h3>Section 2</h3>
  136. <div>
  137. <p>
  138. Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
  139. purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
  140. velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
  141. suscipit faucibus urna.
  142. </p>
  143. </div>
  144. <h3>Section 3</h3>
  145. <div>
  146. <p>
  147. Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
  148. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
  149. ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
  150. lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
  151. </p>
  152. <ul>
  153. <li>List item one</li>
  154. <li>List item two</li>
  155. <li>List item three</li>
  156. </ul>
  157. </div>
  158. <h3>Section 4</h3>
  159. <div>
  160. <p>
  161. Cras dictum. Pellentesque habitant morbi tristique senectus et netus
  162. et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
  163. faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
  164. mauris vel est.
  165. </p>
  166. <p>
  167. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
  168. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
  169. inceptos himenaeos.
  170. </p>
  171. </div>
  172. </div>
  173.  
  174. <img id='img1' class="img" src="Sliki/32.png"/>
  175. <img id='img2' class="img" src="Sliki/123.png"/>
  176. <img id='img3' class="img" src="Sliki/animation.png"/>
  177. <img id='img4' class="img" src="Sliki/big_icon.png"/>
  178.  
  179. </body>
  180. </html>
  181.  
  182. 2ra zadaca
  183.  
  184. <!doctype html>
  185. <html>
  186. <head>
  187. <title>Components</title>
  188. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  189. <link rel="stylesheet" href="./css/jquery-ui.css" type="text/css">
  190. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  191. <script type="text/javascript" src="js/jquery-ui-1.9.1.custom.min.js"></script>
  192. <style type="text/css">
  193. .row-selected{
  194. background:lightblue;
  195. }
  196. </style>
  197. <script type="text/javascript">
  198. $(document).ready(function () {
  199. //za li
  200. $("li").hover(function () {
  201. $(this).css("cursor", "pointer");
  202. }, function () {
  203. $(this).css("cursor", "none");
  204. });
  205.  
  206. var premesten;
  207. $("#tabs").tabs({
  208. select: function (event, ui) {
  209. if (ui.index == 1) {
  210. presmetaj();
  211. }
  212. }
  213. });
  214.  
  215. //konektiranje na listi
  216. $("#list1").sortable({
  217. connectWith: "#list2"
  218. }).disableSelection();
  219.  
  220. $("#list1").sortable({
  221. receive: function (event, ui) {
  222. $premestenStudent = $(ui.item);
  223. //alert("ohhh Paa");
  224. }
  225. }).disableSelection();
  226.  
  227. $("#list2").sortable({
  228. connectWith: "#list1"
  229. }).disableSelection();
  230.  
  231. $("#list2").sortable({
  232. receive: function (event, ui) {
  233. $premestenStudent = $(ui.item);
  234. //alert("ohhh");
  235. }
  236. }).disableSelection();
  237.  
  238. //tooltip
  239. $(function () {
  240. $(document).tooltip({
  241. items: "#list1 li,#list2 li",
  242. content: function () {
  243. var element = $(this);
  244. var poeni = element.attr("title1");
  245. var index = element.attr("rel");
  246. $('#list1 li input').tooltip();
  247. return "Поени: " + poeni + ", Индекс: " + index;
  248.  
  249.  
  250. }
  251. });
  252. });
  253.  
  254.  
  255. //presmetaj
  256.  
  257. function presmetaj() {
  258. var polozeniA = 0;
  259. var polozeniB = 0;
  260. var nepolozeniA = 0;
  261. var nepolozeniB = 0;
  262. var broj=0;
  263. var broj1=0;
  264. var sest = 0;
  265. var sedum = 0;
  266. var osum = 0;
  267. var devet = 0;
  268. var deset = 0;
  269.  
  270. $('#list1 li').each(function (index) {
  271. broj++;
  272. if ($(this).attr("title1") > 50 && $(this).attr("title1") <= 60) {
  273. sest++;
  274. }
  275. if ($(this).attr("title1") > 60 && $(this).attr("title1") <= 70) {
  276. sedum++;
  277. }
  278. if ($(this).attr("title1") > 70 && $(this).attr("title1") <= 80) {
  279. osum++;
  280. }
  281. if ($(this).attr("title1") > 80 && $(this).attr("title1") <= 90) {
  282. devet++;
  283. }
  284. if ($(this).attr("title1") > 90 && $(this).attr("title1") <= 100) {
  285. deset++;
  286. }
  287. if ($(this).attr('title1') > 50) {
  288. polozeniA += 1;
  289. }
  290. else {
  291. nepolozeniA += 1;
  292. }
  293. });
  294. $("#paralekaA").text("Паралелка A :" + " " + "Положени: " + polozeniA + " Неположени: " + nepolozeniA);
  295.  
  296. $('#list2 li').each(function (index) {
  297. broj1++;
  298. if ($(this).attr("title1") > 50 && $(this).attr("title1") <= 60) {
  299. sest++;
  300. }
  301. if ($(this).attr("title1") > 60 && $(this).attr("title1") <= 70) {
  302. sedum++;
  303. }
  304. if ($(this).attr("title1") > 70 && $(this).attr("title1") <= 80) {
  305. osum++;
  306. }
  307. if ($(this).attr("title1") > 80 && $(this).attr("title1") <= 90) {
  308. devet++;
  309. }
  310. if ($(this).attr("title1") > 90 && $(this).attr("title1") <= 100) {
  311. deset++;
  312. }
  313. if ($(this).attr('title1') > 50) {
  314. polozeniB+=1;
  315. }
  316. else {
  317. nepolozeniB+=1;
  318. }
  319. });
  320. $("#paralelkaB").text("Паралелка Б :"+" "+"Положени: "+polozeniB+" Неположени: "+nepolozeniB);
  321.  
  322. //za progess
  323. sest = parseFloat(sest / (broj + broj1) * 100);
  324. $("#progressbar6").progressbar({
  325. value: sest
  326. })
  327. $("#progress6-value").text('Оценка 6: ' + sest.toPrecision(3) + '%');
  328.  
  329. sedum = parseFloat(sedum / (broj + broj1) * 100);
  330. $("#progressbar7").progressbar({
  331. value: sedum
  332. })
  333. $("#progress7-value").text('Оценка 7: ' + sedum.toPrecision(3) + '%');
  334.  
  335. osum = parseFloat(osum / (broj + broj1) * 100);
  336. $("#progressbar8").progressbar({
  337. value: osum
  338. })
  339. $("#progress8-value").text('Оценка 8: ' + osum.toPrecision(3) + '%');
  340.  
  341. devet = parseFloat(devet / (broj + broj1) * 100);
  342. $("#progressbar9").progressbar({
  343. value: devet
  344. })
  345. $("#progress9-value").text('Оценка 9: ' + devet.toPrecision(3) + '%');
  346.  
  347. deset = parseFloat(deset / (broj + broj1) * 100);
  348. $("#progressbar10").progressbar({
  349. value: deset
  350. })
  351. $("#progress10-value").text('Оценка 10: ' + deset.toPrecision(3) + '%');
  352. }
  353. });
  354.  
  355. </script>
  356. <style>
  357. .container{
  358. float:left;
  359. margin:20px;
  360. padding: 20px;
  361. }
  362. .container:nth-child(even){
  363. border-left: 1px lightgray solid;
  364. }
  365. #list1, #list2{
  366. list-style-type: none;
  367. }
  368.  
  369. </style>
  370. </head>
  371. <body>
  372. <div id="tabs">
  373. <ul>
  374. <li><a href="#tabs-1">Студенти</a></li>
  375. <li><a href="#tabs-2">Оценки</a></li>
  376. </ul>
  377.  
  378. <div id="tabs-1">
  379. <div class="container" style="float:left">
  380. <strong>Паралелка А</strong>
  381. <ul id="list1" class="connectedSortable">
  382. <li title1="30" rel="111113">Петре Петревски </li>
  383. <li title1="90" rel="111114"> Аце Ацевски</li>
  384. <li title1="100" rel="111115"> Мите Митрески</li>
  385. <li title1="85" rel="111117"> Мирко Мирковски</li>
  386. </ul>
  387. </div>
  388.  
  389. <div class="container" style="float:left">
  390. <strong>Паралелка Б</strong>
  391. <ul id="list2" class="connectedSortable">
  392. <li title1="80" rel="111111">Никола Николовски </li>
  393. <li title1="70" rel="111112"> Симона Симоноска</li>
  394. <li title1="60" rel="111116"> Ристе Ристески</li>
  395. </ul>
  396. </div>
  397.  
  398. </div>
  399. <div id="tabs-2">
  400. <div id="progressbar6" style="width:400px;"></div><span id="progress6-value"></span>
  401. <div id="progressbar7" style="width:400px;"></div><span id="progress7-value"></span>
  402. <div id="progressbar8" style="width:400px;"></div><span id="progress8-value"></span>
  403. <div id="progressbar9" style="width:400px;"></div><span id="progress9-value"></span>
  404. <div id="progressbar10" style="width:400px;"></div><span id="progress10-value"></span>
  405. <div>
  406. <span id="paralekaA"></span>
  407. </div>
  408. <div>
  409. <span id="paralelkaB"></span>
  410. </div>
  411. </div>
  412. </div>
  413.  
  414. </body>
  415. </html>
Advertisement
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!