API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 26th, 2019
128
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.56 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>MeetaMIS - Gráficos </title>
  7. <link rel="stylesheet" href="http://localhost:92/assets/css/materialize.inside.css">
  8. <link rel="stylesheet" href="http://localhost:92/assets/css/custom.css">
  9. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  10. <style>
  11. .related-tabs.row {
  12. background: #FFFFFF;
  13. margin-top: 10px;
  14. }
  15. .related-tabs {
  16. position: relative;
  17. }
  18. .row {
  19. margin-right: -15px;
  20. margin-left: -15px;
  21. }
  22. * {
  23. -webkit-box-sizing: border-box;
  24. -moz-box-sizing: border-box;
  25. box-sizing: border-box;
  26. }
  27. .related-tabs ul {
  28. padding-left: 10px;
  29. width: 100%;
  30. }
  31.  
  32. .nav {
  33. padding-left: 0;
  34. margin-bottom: 0;
  35. list-style: none;
  36. }
  37.  
  38. ul, ol {
  39. margin-top: 0;
  40. margin-bottom: 10px;
  41. }
  42.  
  43. .nav-tabs > a > li {
  44. padding: 0 10px;
  45. margin: 0 2px;
  46. float: left;
  47. margin-bottom: -1px;
  48. color: #666;
  49. border-radius: 2px 2px 0 0;
  50. margin-right: 2px;
  51. line-height: 1.42857143;
  52. border: 1px solid transparent;
  53. border-radius: 4px 4px 0 0;
  54. }
  55.  
  56. .related-tabs .nav-tabs> a > li.active, .related-tabs .nav-tabs> a > li:hover{
  57. border-bottom: 2px solid #e99b6c;
  58. }
  59.  
  60. .nav-tabs> a > li.active, .nav-tabs> a:hover > li.active, .nav-tabs> a:focus > li.active {
  61. font-weight: 700;
  62. color: #333;
  63. }
  64.  
  65. .nav-tabs > a > li.active{
  66. color: #555;
  67. cursor: default;
  68. border: 1px solid #ddd;
  69. border-bottom-color: transparent;
  70. }
  71. .nav-tabs> a > li:last-child {
  72. margin-right:13px !important;
  73. }
  74.  
  75. .nav> a > li {
  76. position: relative;
  77. display: block;
  78. padding: 10px 15px;
  79. }
  80.  
  81. .textOverflowEllipsis {
  82. overflow: hidden;
  83. text-overflow: ellipsis;
  84. white-space: nowrap;
  85. }
  86.  
  87. .related-tabs .tab-label {
  88. display: inline-block;
  89. height: 26px;
  90. line-height: 5px;
  91. padding: 15px;
  92. text-transform: uppercase;
  93. color: #8b8f9c;
  94. }
  95. /* fim menu */
  96. .fundoW{
  97.  
  98. }
  99. .margin5{
  100. margin:5px;
  101. }
  102.  
  103. .right{
  104. float:right !important
  105. }
  106. [class^="tabss-"] {
  107. display:none;
  108. }
  109. .tabs-container > .active {
  110. display: block;
  111. }
  112.  
  113.  
  114. html,body,#myChart {
  115. width:100%;
  116. height:100%;
  117. }
  118.  
  119. .zc-ref {
  120. display: none;
  121. }
  122. </style>
  123. </head>
  124. <body>
  125.  
  126. <ul id="slide-out" class="side-nav sidenav-fixed z-depth-2">
  127. <li class="center no-padding">
  128. <div class="colorSite white-text" style="height: 180px;">
  129. <div class="row">
  130. <a href="http://localhost:92/dashboard">
  131. <img style="margin-top: 5%;" width="130" height="130" src="http://localhost:92/assets/imgs/logo.png" class="responsive-img" />
  132. </a>
  133. </div>
  134. </div>
  135. </li>
  136. <!--
  137. <li id="dash_adm"><a class="waves-effect" href="http://localhost:92/dashboard"><b>Menu admin</b></a></li>
  138. -->
  139.  
  140. <li id="dash_dashboard"><a class="waves-effect" href="http://localhost:92/dashboard"><b>Dashboard</b></a></li>
  141. <li id="dash_graficos"><a class="waves-effect" href="http://localhost:92/modules/graphics"><b>Gráficos</b></a></li>
  142.  
  143. <ul class="collapsible" data-collapsible="accordion">
  144. <li id="dash_users">
  145. <div id="dash_users_header" class="collapsible-header waves-effect"><b>Usuários</b></div>
  146. <div id="dash_users_body" class="collapsible-body">
  147. <ul>
  148. <li id="users_config">
  149. <a class="waves-effect" style="text-decoration: none;" href="http://localhost:92/conta/config">Configurações</a>
  150. </li>
  151. <li id="user_push">
  152. <a class="waves-effect" style="text-decoration: none;" href="http://localhost:92/conta/push">Push</a>
  153. </li>
  154. </ul>
  155. </div>
  156. </li>
  157. </ul>
  158. </ul>
  159.  
  160. <header>
  161. <nav class="colorSite" role="navigation">
  162. <a href="#" data-target="slide-out" class="sidenav-trigger sidenav-triggerjquery show-on-large left"><i class="material-icons">menu</i></a>
  163.  
  164. <div class="nav-wrapper">
  165. <a data-activates="slide-out" class="button-collapse" href="#!"><img width="200px" height="50px" style="object-fit: cover;object-position: 0px -130px;" src="http://localhost:92/assets/imgs/logo.png" /></a>
  166.  
  167. <ul class="right hide-on-med-and-down">
  168. <li>
  169. <a class='right dropdown-button' href='#!' data-target='user_dropdown'><i class=' material-icons'>account_circle</i></a>
  170.  
  171. <ul class="dropdown-content" id="user_dropdown">
  172. <li><a class="indigo-text" href="http://localhost:92/conta/config">Perfil</a></li>
  173. <li><a class="indigo-text" href="http://localhost:92/sair">Sair</a></li>
  174. </ul>
  175. </li>
  176. </ul>
  177.  
  178. <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
  179. </div>
  180. </nav>
  181.  
  182. <nav>
  183. <div class="nav-wrapper colorSiteUp">
  184. <a style="margin-left: 20px;" class="breadcrumb" href="http://localhost:92/dashboard">Dashboard</a>
  185. <a class="breadcrumb" href="#!"> Gráficos </a>
  186.  
  187. <div style="margin-right: 20px;" id="timestamp" class="right"></div>
  188. </div>
  189. </nav>
  190. </header>
  191. <main>
  192. <div class="row nomargin">
  193. <div class="col s12">
  194. <div class="card paddingCard">
  195. <div class="related-tabs row">
  196. <ul class="nav nav-tabs">
  197. <a href="#graphich1" class="tab-item" data-tab-id="graphich1"><li class="graphich1 active"><span class="tab-label">Faturamento</span></li></a>
  198. <a href="#graphich2" class="tab-item" data-tab-id="graphich2"><li class="graphich2"><span class="tab-label">Hardware</span></li></a>
  199. </ul>
  200. </div>
  201. <div class="tabs-container">
  202. <div class="tabss-graphich1 active">
  203. <div class="row">
  204. <div class="col s12 m6 l3">
  205. <div class="card animate fadeLeft">
  206. <div class="card-content cyan white-text">
  207. <p class="card-stats-title"><i class="material-icons">person_outline</i> Servidores azure</p>
  208. <h4 class="card-stats-number white-text">16</h4>
  209. <p class="card-stats-compare">
  210. <!-- <i class="material-icons">keyboard_arrow_up</i> 15%
  211. <span class="cyan text text-lighten-5">de ontem</span>-->
  212. </p>
  213. </div>
  214. </div>
  215. </div>
  216. <div class="col s12 m6 l3">
  217. <div class="card animate fadeLeft">
  218. <div class="card-content red accent-2 white-text">
  219. <p class="card-stats-title"><i class="material-icons">attach_money</i>Custo de Junho</p>
  220. <h4 class="card-stats-number white-text">R$ 723.875,00</h4>
  221. <!-- <p class="card-stats-compare">
  222. <i class="material-icons">keyboard_arrow_up</i> 70% <span class="red-text text-lighten-5">último mês</span>
  223. </p>-->
  224. </div>
  225. </div>
  226. </div>
  227. <div class="col s12 m6 l3">
  228. <div class="card animate fadeRight">
  229. <div class="card-content orange lighten-1 white-text">
  230. <p class="card-stats-title"><i class="material-icons">trending_up</i> Servidores desatualizados</p>
  231. <h4 class="card-stats-number white-text">9</h4>
  232. <!--<p class="card-stats-compare">
  233. <i class="material-icons">keyboard_arrow_up</i> 80%
  234. <span class="orange-text text-lighten-5">de hoje</span>
  235. </p>-->
  236. </div>
  237. </div>
  238. </div>
  239. <div class="col s12 m6 l3">
  240. <div class="card animate fadeRight">
  241. <div class="card-content green lighten-1 white-text">
  242. <p class="card-stats-title"><i class="material-icons">content_copy</i> Fazer inventário</p>
  243. <h4 class="card-stats-number white-text">2</h4>
  244. <!--<p class="card-stats-compare">
  245. <i class="material-icons">keyboard_arrow_down</i> 3%
  246. <span class="green-text text-lighten-5">total do mês</span>
  247. </p>-->
  248. </div>
  249. </div>
  250. </div>
  251. <div class="col s12">
  252. <div id='graphics4chart'></div>
  253.  
  254. </div>
  255. </div>
  256. </div>
  257. <div class="tabss-graphich2">
  258.  
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. </main>
  264. <footer class="colorSite page-footer">
  265. <div class="container">
  266. <div class="row">
  267. <div class="col s12">
  268. <h5 class="white-text">MeetaMIS - Relatórios</h5>
  269. </div>
  270. </div>
  271. </div>
  272. <div class="footer-copyright">
  273. <div class="container">
  274. <span></span>
  275. </div>
  276. </div>
  277. </footer>
  278. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  279. <script src="http://localhost:92/assets/js/materialize.min.js"></script>
  280. <script src="http://localhost:92/assets/js/sweetalert2.min.js"></script>
  281. <script src="http://localhost:92/assets/js/script.js"></script>
  282. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  283. <script>
  284.  
  285. zingchart.THEME="classic";
  286. var myConfig = {
  287. "graphset":[
  288. {
  289. "type":"mixed",
  290. "x":0,
  291. "y":0,
  292. "height":"60%",
  293. "background-color":"#a6c675",
  294. "plotarea":{
  295. "margin":"20px 75px 0px 50px"
  296. },
  297. "tooltip":{
  298. "shadow":0
  299. },
  300. "labels":[
  301. {
  302. "text":"Custo anual",
  303. "x":"625px",
  304. "y":"14px",
  305. "font-color":"#fff",
  306. "font-size":"22px"
  307. },
  308. {
  309. "text":"Dos servidores azure da MeetaWEB",
  310. "x":"625px",
  311. "y":"40px",
  312. "font-color":"#D0E0B8",
  313. "font-size":"14px",
  314. "font-family":"arial narrow"
  315. }
  316. ],
  317. "scale-x": {
  318. "values":"0:100:9",
  319. "max-items": 12,
  320. "line-width":0,
  321. "tick":{
  322. "visible":true
  323. },
  324. "guide":{
  325. "visible":false
  326. },
  327. "item":{
  328. "visible":true
  329. },
  330. "labels": ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]
  331. },
  332. "scale-x-2":{
  333. "values":"1:100:10",
  334. "line-width":0,
  335. "guide":{
  336. "visible":false
  337. },
  338. "item":{
  339. "visible":false
  340. },
  341. "tick":{
  342. "visible":false
  343. }
  344. },
  345. "scale-y":{
  346. "values":"0:25:10",
  347. "line-width":0,
  348. "item":{
  349. "visible":true
  350. },
  351. "tick":{
  352. "visible":false
  353. },
  354. "guide":{
  355. "visible":false
  356. },
  357. "label": {
  358. "text": "Servidores criados",
  359. }
  360. },
  361. "scale-y-2":{
  362. "line-width":0,
  363. "markers":[
  364. {
  365. "type":"line",
  366. "range":[757210],
  367. //"range":[25],
  368. "valueRange": true,
  369. "alpha":0.6,
  370. "line-color":"#777",
  371. "line-width":"1px",
  372. "line-style":"dashed"
  373. }
  374. ],
  375. "guide":{
  376. "visible":false
  377. },
  378. "item":{
  379. "visible":true
  380. },
  381. "tick":{
  382. "visible":false
  383. },
  384. "label": {
  385. "text": "Valor gasto",
  386. }
  387. },
  388. "series":[
  389. {
  390. "type":"bar",
  391. "background-color":"#9DBA73",
  392. "values":[ 6,
  393. 7,
  394. 4,
  395. 8,
  396. 7,
  397. 11,
  398. 8,
  399. 3,
  400. 7,
  401. 5,
  402. 8,
  403. 6,
  404. ],
  405. "scales":"scale-x, scale-y",
  406. "animation":{
  407. "effect":"ANIMATION_EXPAND_BOTTOM"
  408. },
  409. "border-radius-top-left":"3px",
  410. "border-radius-top-right":"3px",
  411. "bar-width":"30px",
  412. "hover-state":{
  413. "visible":0
  414. }
  415. },
  416. {
  417. "type":"line",
  418. "line-color":"#F5F8ED",
  419. "values":[663054,782768,851411,744238,542405,723875,711115,956929,1024657,585866,765841,734355],
  420. //"values":[1,2,3,4,555000,6,7,8,9,10,11,121],
  421. "scales":"scale-x-2, scale-y-2",
  422. "animation":{
  423. "effect":"ANIMATION_SLIDE_LEFT"
  424. },
  425. "marker":{
  426. "visible":false
  427. }
  428. }
  429. ]
  430. },
  431. {
  432. "type":"bar",
  433. "border-width":"2px",
  434. "border-color":"#f2f2f2",
  435. "x":0,
  436. "y":"60%",
  437. "height":"40%",
  438. "background-color":"#fff",
  439. "plot":{
  440. "bars-overlap":"100%",
  441. "bar-space":"5px",
  442. "bar-width":"20px",
  443. "animation":{
  444. "effect":"ANIMATION_SLIDE_BOTTOM"
  445. }
  446. },
  447. "plotarea":{
  448. "margin":"25px 25px 50px 60%"
  449. },
  450. "labels":[
  451. {
  452. "text":"+ R$ 757.209,50",
  453. "x":"20px",
  454. "y":"60px",
  455. "font-color":"#A7C47B",
  456. "font-size":"38px"
  457. },
  458. {
  459. "text":"média mensal",
  460. "x":"65px",
  461. "y":"110px",
  462. "font-color":"#ACACAC",
  463. "font-size":"16px"
  464. }
  465. ]
  466. }
  467. ]
  468. };
  469.  
  470. zingchart.render({
  471. id : 'graphics4chart',
  472. data : myConfig,
  473. height: 500
  474. });
  475.  
  476.  
  477.  
  478.  
  479.  
  480.  
  481.  
  482.  
  483.  
  484.  
  485.  
  486. zingchart.THEME="classic";
  487. var initState = null; // Used later to store the chart state before changing the data
  488. var store = { // Data store
  489. ie:[["v11.0",24.1],["v8.0",17.2],["v9.0",8.1],["v10.0",5.3],["v6.0",1.1],["v7.0",0.5]],
  490. chrome:[["v40.0",4.8],["v41.0",4.3],["v42.0",3.7],["v39.0",3.0],["v36.0",2.5],["v43.0",1.4],["v31.0",1.2],["v35.0",0.8],["v38.0",0.6],["v32.0",0.6],["v37.0",0.4],["v33.0",0.2],["v34.0",0.1],["v30.0",0.1]],
  491. firefox:[["v35",2.8],["v36",2.3],["v37",2.3],["v34",1.3],["v38",1.0],["v31",0.3],["v33",0.2],["v32",0.1]],
  492. safari:[["v8.0",2.6],["v7.1",0.8],["v5.1",0.4],["v5.0",0.3],["v6.1",0.3],["v7.0",0.3],["v6.2",0.2]],
  493. opera:[["v12.x",0.25],["v28",0.2],["v27",0.15],["v29",0.1]]
  494. };
  495. var bgColors = ["#1976d2","#424242","#388e3c","#ffa000","#7b1fa2","#c2185b"]; // ie, chrome, ff, safari, opera, unknown
  496. var myConfig = {
  497. "globals": {
  498. "font-family": "Helvetica"
  499. },
  500. "type": "bar",
  501. "background-color": "white",
  502. "title": {
  503. "color": "#606060",
  504. "background-color": "white",
  505. "text": "Browser market shares. January, 2015 to May, 2015"
  506. },
  507. "subtitle": {
  508. "color": "#606060",
  509. "text": "Click the columns to view versions. Source: netmarketshare.com."
  510. },
  511. "scale-y": {
  512. "line-color": "none",
  513. "tick": {
  514. "line-color": "none"
  515. },
  516. "guide": {
  517. "line-style": "solid"
  518. },
  519. "item": {
  520. "color": "#606060"
  521. }
  522. },
  523. "scale-x": {
  524. "values": [
  525. "Internet Explorer",
  526. "Chrome",
  527. "Firefox",
  528. "Safari",
  529. "Opera",
  530. "Unknown"
  531. ],
  532. "line-color": "#C0D0E0",
  533. "line-width": 1,
  534. "tick": {
  535. "line-width": 1,
  536. "line-color": "#C0D0E0"
  537. },
  538. "guide": {
  539. "visible": false
  540. },
  541. "item": {
  542. "color": "#606060"
  543. }
  544. },
  545. "crosshair-x": {
  546. "marker": {
  547. "visible": false
  548. },
  549. "line-color": "none",
  550. "line-width": "0px",
  551. "scale-label": {
  552. "visible": false
  553. },
  554. "plot-label": {
  555. "text": "%data-browser: %v% of total",
  556. "multiple": true,
  557. "font-size": "12px",
  558. "color": "#606060",
  559. "background-color": "white",
  560. "border-width": 3,
  561. "alpha": 0.9,
  562. "callout": true,
  563. "callout-position": "bottom",
  564. "shadow": 0,
  565. "placement": "node-top",
  566. "border-radius": 4,
  567. "offsetY":-20,
  568. "padding":8,
  569. "rules": [
  570. {
  571. "rule": "%i==0",
  572. "border-color": "#1976d2"
  573. },
  574. {
  575. "rule": "%i==1",
  576. "border-color": "#424242"
  577. },
  578. {
  579. "rule": "%i==2",
  580. "border-color": "#388e3c"
  581. },
  582. {
  583. "rule": "%i==3",
  584. "border-color": "#ffa000"
  585. },
  586. {
  587. "rule": "%i==4",
  588. "border-color": "#7b1fa2"
  589. },
  590. {
  591. "rule": "%i==5",
  592. "border-color": "#c2185b"
  593. }
  594. ]
  595. }
  596. },
  597. "plot": {
  598. "data-browser": [
  599. "<span style='font-weight:bold;color:#1976d2;'>Internet Explorer</span>",
  600. "<span style='font-weight:bold;color:#424242;'>Chrome</span>",
  601. "<span style='font-weight:bold;color:#388e3c;'>Firefox</span>",
  602. "<span style='font-weight:bold;color:#ffa000;'>Safari</span>",
  603. "<span style='font-weight:bold;color:#7b1fa2;'>Opera</span>",
  604. "<span style='font-weight:bold;color:#c2185b;'>Unknown</span>"
  605. ],
  606. "cursor": "hand",
  607. "value-box": {
  608. "text": "%v%",
  609. "text-decoration": "underline",
  610. "color": "#606060"
  611. },
  612. "tooltip": {
  613. "visible": false
  614. },
  615. "animation": {
  616. "effect": "7"
  617. },
  618. "rules": [
  619. {
  620. "rule": "%i==0",
  621. "background-color": "#1976d2"
  622. },
  623. {
  624. "rule": "%i==1",
  625. "background-color": "#424242"
  626. },
  627. {
  628. "rule": "%i==2",
  629. "background-color": "#388e3c"
  630. },
  631. {
  632. "rule": "%i==3",
  633. "background-color": "#ffa000"
  634. },
  635. {
  636. "rule": "%i==4",
  637. "background-color": "#7b1fa2"
  638. },
  639. {
  640. "rule": "%i==5",
  641. "background-color": "#c2185b"
  642. }
  643. ]
  644. },
  645. "series": [
  646. {
  647. "values": [
  648. 56.33,
  649. 24,
  650. 10.4,
  651. 4.8,
  652. 0.9,
  653. 0.2
  654. ]
  655. }
  656. ]
  657. };
  658.  
  659. var updateChart = function(p){
  660. initState = zingchart.exec(p.id,'getdata'); // Gets the state of the chart when the node was clicked
  661. var newValues = null;
  662. var update = null;
  663. switch(p.nodeindex){
  664. case 0:
  665. newValues = store['ie'];
  666. update = true;
  667. break;
  668. case 1:
  669. newValues = store['chrome'];
  670. update = true;
  671. break;
  672. case 2:
  673. newValues = store['firefox'];
  674. update = true;
  675. break;
  676. case 3:
  677. newValues = store['safari'];
  678. update = true;
  679. break;
  680. case 4:
  681. newValues = store['opera'];
  682. update = true;
  683. break;
  684. case 5:
  685. update = false; // We don't want to allow drilldown for unknown
  686. break;
  687. }
  688. if(update){
  689. zingchart.unbind(p.id, 'node_click'); // Disable node_click for second level
  690. zingchart.exec(p.id, 'modify', {
  691. update:false, // Making multiple changes, queue these changes
  692. data:{
  693. "crosshair-x":{
  694. "plot-label":{
  695. "text":"%v% of total",
  696. "rules":[],
  697. "border-color": bgColors[p.nodeindex]
  698. }
  699. },
  700. "plot":{
  701. "cursor":null,
  702. "rules":[],
  703. "background-color": bgColors[p.nodeindex]
  704. },
  705. "scale-x":{
  706. "values":[]
  707. }
  708. }
  709. });
  710. zingchart.exec(p.id, 'setseriesvalues',{ // Replaces all values at plotindex 0
  711. update:false, // Queue these, too
  712. plotindex:0,
  713. values:newValues
  714. });
  715. zingchart.exec(p.id,'update'); // Push queued changes
  716. zingchart.bind(p.id, 'animation_end', function(){ // When the animation ends...
  717. zingchart.exec(p.id, 'addobject',{ // ...add a back button
  718. type:'shape',
  719. data:{
  720. "type":"rectangle",
  721. "id":"back_btn",
  722. "height":20,
  723. "width":70,
  724. "background-color":"#ffffff #f6f6f6",
  725. "x":"80%",
  726. "y":"16%",
  727. "border-width":1,
  728. "border-color":"#888",
  729. "cursor":"hand",
  730. "label":{
  731. "text":"< Back",
  732. "color": "#606060"
  733. },
  734. "hover-state":{
  735. "background-color":"#1976D2 #ffffff",
  736. "border-color":"#57a2ff",
  737. "fill-angle": -180
  738. }
  739. }
  740. });
  741. });
  742. }
  743. };
  744.  
  745. zingchart.render({
  746. id : 'myChart',
  747. data : myConfig,
  748. });
  749.  
  750. zingchart.bind('myChart','node_click',updateChart);
  751.  
  752. zingchart.bind('myChart', 'shape_click', function(p){ // Listen for back button click
  753. zingchart.unbind(p.id,'animation_end');
  754. if (p.shapeid == "back_btn"){
  755. zingchart.exec(p.id,'setdata',{ // Set the data back to the state it was in when the node was clicked
  756. data:initState
  757. });
  758. zingchart.bind(p.id,'node_click',updateChart);
  759. }
  760. });
  761.  
  762. let tabsAssoc =["graphich1", "graphich2", "graphich3", "graphich4", "graphich5"];
  763.  
  764. $(document).ready(function() {
  765. verificaHash();
  766. function navegarAteTab(tabid)
  767. {
  768. let ativa = $('.active');
  769. ativa.removeClass('active');
  770.  
  771. $("."+tabid).addClass('active');
  772. $(".tabss-" + tabid).addClass('active');
  773. }
  774.  
  775. function verificaHash()
  776. {
  777. let hash = window.location.hash;
  778. if (hash !== '')
  779. {
  780. hash = hash.replace("#", "");
  781. if (tabsAssoc.indexOf(hash) > -1) {
  782. navegarAteTab(hash);
  783. }else if(hash.indexOf(".") > -1){
  784. let id = hash.split(".");
  785. $("."+id[1]).prop("checked", true);
  786. navegarAteTab(id[0]);
  787. }
  788. }
  789. }
  790.  
  791. $(".tab-item").click(function() {
  792. let tab_id = $(this).data('tab-id');
  793. navegarAteTab(tab_id);
  794. });
  795. });
  796.  
  797. </script>
  798. <script>
  799. $('.side-nav').sidenav({closeOnClick: true});
  800. $('.dropdown-button, .dropdown-trigger').dropdown();
  801. $('.collapsible').collapsible();
  802.  
  803. $('select').formSelect();
  804.  
  805. </script>
  806. </body>
  807. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!