API tools faq
paste
Advertisement
gsmashik

application design

gsmashik
Jun 28th, 2018
337
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 27.46 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>modal-minimize-and-maximize Example</title>
  8.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9.   <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-style.css">
  10.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  11.  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  12.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  13.       <script src="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-bundle.js"></script>
  14.  
  15.  
  16.   <script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>
  17.     <script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script>
  18.     <script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script>
  19.     <script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
  20.     <script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>
  21.     <script type="text/javascript" src="tableExport.min.js"></script>
  22.  
  23.      <script type="text/javascript" src="https://phpzag.com/demo/create-bootstrap-table-pagination-with-jquery/js/bootstrap-table-pagination.js"></script>
  24.  
  25.   <!-- font Awesome 4.5.0 -->
  26.   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  27.   <style type="text/css">
  28.   body { background-color:#fafafa;}
  29.  
  30. /*for Accordion Menu Glipikon Item*/
  31. .glyphicon { margin-right:10px; }
  32. .panel-body { padding:0px; }
  33. .panel-body table tr td { padding-left: 15px }
  34. .panel-body .table {margin-bottom: 0px; }
  35.  
  36.  
  37.  
  38.  
  39.   /*  for modal  background shadow remove */
  40. .modal-backdrop {
  41.    background-color: transparent;
  42. }
  43. .modal-header .btnGrp {
  44.   position: absolute;
  45.   top: 8px;
  46.   right: 10px;
  47. }
  48.  
  49. .min {
  50.   width: 250px;
  51.   height: 35px;
  52.   overflow: hidden !important;
  53.   padding: 0px !important;
  54.   margin: 0px;
  55.   float: left;
  56.   position: static !important;
  57. }
  58.  
  59. .min .modal-dialog, .min .modal-content {
  60.   height: 100%;
  61.   width: 100%;
  62.   margin: 0px !important;
  63.   padding: 0px !important;
  64. }
  65.  
  66. .min .modal-header {
  67.   height: 100%;
  68.   width: 100%;
  69.   margin: 0px !important;
  70.   padding: 3px 5px !important;
  71. }
  72.  
  73. .display-none { display: none; }
  74.  
  75. button .fa {
  76.   font-size: 16px;
  77.   margin-left: 10px;
  78. }
  79.  
  80. .min .fa { font-size: 14px; }
  81.  
  82. .min .menuTab { display: none; }
  83.  
  84. button:focus { outline: none; }
  85.  
  86. .minmaxCon {
  87.   height: 35px;
  88.   bottom: 1px;
  89.   left: 1px;
  90.   position: fixed;
  91.   right: 1px;
  92.   z-index: 9999;
  93. }
  94.   </style>
  95.   </head>
  96.  
  97.   <body>
  98. <div class="container-fluid">
  99.   <div class="col-md-12">
  100.      <!-- Links -->
  101.   <ul class="navbar-nav nav list-unstyled">
  102.     <li class="nav-item">
  103.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">File</a>
  104.     </li>
  105.         <li class="nav-item">
  106.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Edit</a>
  107.     </li>
  108.         <li class="nav-item">
  109.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">View</a>
  110.     </li>  
  111.        <li class="nav-item">
  112.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Data</a>
  113.     </li>
  114.  
  115.       <li class="nav-item">
  116.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Goto</a>
  117.     </li>  
  118.  
  119.     <li class="nav-item">
  120.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Tools</a>
  121.     </li>  
  122.  
  123.        <li class="nav-item">
  124.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Module</a>
  125.     </li>  
  126.  
  127.        <li class="nav-item">
  128.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Window</a>
  129.     </li>  
  130.        <li class="nav-item">
  131.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Help</a>
  132.     </li>  
  133.  
  134.  
  135.   </ul>
  136.  
  137. <div class="clearfix"></div>
  138.        <!-- Links -->
  139.   <ul class="navbar-nav nav list-unstyled">
  140.     <li class="nav-item">
  141.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><i class="fa fa-search"></i></a>
  142.     </li>
  143.         <li class="nav-item">
  144.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-print"></span></a>
  145.     </li>
  146.         <li class="nav-item">
  147.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  148.     </li>  
  149.        <li class="nav-item">
  150.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-fax"></span></a>
  151.     </li>
  152.  
  153.       <li class="nav-item">
  154.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-file-excel-o"></span></a>
  155.     </li>  
  156.  
  157.     <li class="nav-item">
  158.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-file-word-o"></span></a>
  159.     </li>  
  160.  
  161.        <li class="nav-item">
  162.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-file-pdf-o"></span></a>
  163.     </li>  
  164.  
  165.        <li class="nav-item">
  166.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-eye"></span></a>
  167.     </li>  
  168.  
  169.  
  170.        <li class="nav-item">
  171.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-fast-backward"></span></a>
  172.     </li>    
  173.    
  174.         <li class="nav-item">
  175.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-chevron-left"></span></a>
  176.     </li>      
  177.      
  178.        <li class="nav-item">
  179.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-chevron-right"></span></a>
  180.     </li>  
  181.  
  182.            <li class="nav-item">
  183.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-fast-forward"></span></a>
  184.     </li>  
  185.  
  186.                <li class="nav-item">
  187.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-filter"></span></a>
  188.     </li>                 <li class="nav-item">
  189.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-equalizer"></span></a>
  190.     </li>             <li class="nav-item">
  191.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="  glyphicon glyphicon-paste"></span></a>
  192.     </li>             <li class="nav-item">
  193.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-copy"></span></a>
  194.     </li>   <li class="nav-item">
  195.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-usd"></span></a>
  196.     </li>   <li class="nav-item">
  197.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" fa fa-balance-scale"></span></a>
  198.     </li>  
  199.  
  200.        <li class="nav-item">
  201.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-pencil"></span></a>
  202.     </li>  
  203.        <li class="nav-item">
  204.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-cog"></span></a>
  205.     </li>         <li class="nav-item">
  206.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-alert"></span></a>
  207.     </li>  
  208.  
  209.           <li class="nav-item">
  210.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-calendar"></span></a>
  211.     </li>
  212.           <li class="nav-item">
  213.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" fa fa-question"></span></a>
  214.     </li>  
  215.  
  216.  
  217.   </ul>
  218.  
  219.   </div>
  220. <div class="col-md-12">
  221.  
  222.     <!-- Trigger the modal with a button -->
  223.     <button type="button" class="btn btn-info btn-sm mdlFire"  data-target="#modal-1" >Open Modal</button>
  224.    
  225.     <!-- Modal -->
  226.     <div class="modal  mymodal" id="modal-1" role="dialog" data-backdrop="static" data-keyboard="false">
  227.     <div class="modal-dialog">
  228.        
  229.         <!-- Modal content-->
  230.         <div class="modal-content">
  231.         <div class="modal-header" style="padding:5px 30px;">
  232.             <button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>
  233.             <button class="close modalMinimize"> <i class='fa fa-minus'></i> </button>
  234.             <h4 class="modal-title">Modal Header</h4>
  235.           </div>
  236.         <div class="modal-body"  style="">
  237.             <p>Some text in the modal.</p>
  238.           </div>
  239.         <div class="modal-footer text-left text-justify"  style="">
  240.             <p class="text-justify">Some text in the modal.</p>
  241.           </div>
  242.       </div>
  243.       </div>
  244.   </div>
  245.  
  246.       <button type="button" class="btn btn-info btn-sm mdlFire"  data-target="#modal-2" >Open Modal</button>
  247.    
  248.     <!-- Modal -->
  249.     <div class="modal  mymodal" id="modal-2" role="dialog" style="z-index:1051" data-backdrop="static" data-keyboard="false">
  250.     <div class="modal-dialog">
  251.        
  252.         <!-- Modal content-->
  253.         <div class="modal-content">
  254.         <div class="modal-header" style="padding:5px 30px;">
  255.             <button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>
  256.             <button class="close modalMinimize"> <i class='fa fa-minus'></i> </button>
  257.             <h4 class="modal-title">Modal Header</h4>
  258.           </div>
  259.         <div class="modal-body"  style="">
  260.             <p>Some text in the modal.</p>
  261.           </div>
  262.         <div class="modal-footer text-left text-justify"  style="">
  263.             <p class="text-justify">Some text in the modal.</p>
  264.           </div>
  265.       </div>
  266.       </div>
  267.   </div>
  268.  
  269. <!-- for Accordion Menu -->
  270. <div class="col-sm-3 col-md-3">
  271.             <div class="panel-group" id="accordion">
  272.                 <div class="panel panel-default">
  273.                     <div class="panel-heading">
  274.                         <h4 class="panel-title">
  275.                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
  276.                             </span>Content</a>
  277.                         </h4>
  278.                     </div>
  279.                     <div id="collapseOne" class="panel-collapse collapse "> For Auto Collapse A Body Include panel-collapse collapse class
  280.                         <div class="panel-body">
  281.                             <table class="table">
  282.                                 <tr>
  283.                                     <td>
  284.                                         <span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Articles</a>
  285.                                     </td>
  286.                                 </tr>
  287.                                 <tr>
  288.                                     <td>
  289.                                         <span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">News</a>
  290.                                     </td>
  291.                                 </tr>
  292.                                 <tr>
  293.                                     <td>
  294.                                         <span class="glyphicon glyphicon-file text-info"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
  295.                                     </td>
  296.                                 </tr>
  297.                                 <tr>
  298.                                     <td>
  299.                                         <span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">Comments</a>
  300.                                         <span class="badge">42</span>
  301.                                     </td>
  302.                                 </tr>
  303.                             </table>
  304.                         </div>
  305.                     </div>
  306.                 </div>
  307.                 <div class="panel panel-default">
  308.                     <div class="panel-heading">
  309.                         <h4 class="panel-title">
  310.                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
  311.                             </span>Modules</a>
  312.                         </h4>
  313.                     </div>
  314.                     <div id="collapseTwo" class="panel-collapse collapse">
  315.                         <div class="panel-body">
  316.                             <table class="table">
  317.                                 <tr>
  318.                                     <td>
  319.                                         <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
  320.                                     </td>
  321.                                 </tr>
  322.                                 <tr>
  323.                                     <td>
  324.                                         <a href="http://www.jquery2dotnet.com">Invoices</a>
  325.                                     </td>
  326.                                 </tr>
  327.                                 <tr>
  328.                                     <td>
  329.                                         <a href="http://www.jquery2dotnet.com">Shipments</a>
  330.                                     </td>
  331.                                 </tr>
  332.                                 <tr>
  333.                                     <td>
  334.                                         <a href="http://www.jquery2dotnet.com">Tex</a>
  335.                                     </td>
  336.                                 </tr>
  337.                             </table>
  338.                         </div>
  339.                     </div>
  340.                 </div>
  341.                 <div class="panel panel-default">
  342.                     <div class="panel-heading">
  343.                         <h4 class="panel-title">
  344.                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
  345.                             </span>Account</a>
  346.                         </h4>
  347.                     </div>
  348.                     <div id="collapseThree" class="panel-collapse collapse">
  349.                         <div class="panel-body">
  350.                             <table class="table">
  351.                                 <tr>
  352.                                     <td>
  353.                                         <a href="http://www.jquery2dotnet.com">Change Password</a>
  354.                                     </td>
  355.                                 </tr>
  356.                                 <tr>
  357.                                     <td>
  358.                                         <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
  359.                                     </td>
  360.                                 </tr>
  361.                                 <tr>
  362.                                     <td>
  363.                                         <a href="http://www.jquery2dotnet.com">Import/Export</a>
  364.                                     </td>
  365.                                 </tr>
  366.                                 <tr>
  367.                                     <td>
  368.                                         <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
  369.                                             Delete Account</a>
  370.                                     </td>
  371.                                 </tr>
  372.                             </table>
  373.                         </div>
  374.                     </div>
  375.                 </div>
  376.                 <div class="panel panel-default">
  377.                     <div class="panel-heading">
  378.                         <h4 class="panel-title">
  379.                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  380.                             </span>Reports</a>
  381.                         </h4>
  382.                     </div>
  383.                     <div id="collapseFour" class="panel-collapse collapse">
  384.                         <div class="panel-body">
  385.                             <table class="table">
  386.                                 <tr>
  387.                                     <td>
  388.                                         <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a>
  389.                                     </td>
  390.                                 </tr>
  391.                                 <tr>
  392.                                     <td>
  393.                                         <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a>
  394.                                     </td>
  395.                                 </tr>
  396.                                 <tr>
  397.                                     <td>
  398.                                         <span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a>
  399.                                     </td>
  400.                                 </tr>
  401.                                 <tr>
  402.                                     <td>
  403.                                         <span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a>
  404.                                     </td>
  405.                                 </tr>
  406.                             </table>
  407.                         </div>
  408.                     </div>
  409.                 </div>
  410.             </div>
  411.         </div>
  412.  
  413. <!-- for Accordion Menu -->
  414.  
  415.  
  416.  
  417.  
  418. <div class="col-md-9">
  419. <!-- For Inventory Transfer -->
  420. <div class="panel panel-default">
  421.   <div class="panel-header">Header</div>
  422.   <div class="panel-body">
  423. <form action="">
  424.  
  425. <div class="col-md-8 pull-left">
  426.     <table class="table  table-responsive table-sm table-bordered  ">
  427.     <thead>
  428.       <tr>
  429.         <th><label for="email">Email address:</label></th>
  430.         <th><label for="pwd">Password:</label></th>
  431.         <th><label for="name">Name:</label></th>
  432.         <th><label for="name">Name:</label></th>
  433.         <th><label for="name">Name:</label></th>
  434.         <th><label for="name">Name:</label></th>
  435.         <th><label for="name">Name:</label></th>
  436.         <th><label for="name">Name:</label></th>
  437.         <th><label for="name">Name:</label></th>
  438.         <th><label for="name">Name:</label></th>
  439.         <th><label for="name">Name:</label></th>
  440.         <th><label for="name">Name:</label></th>
  441.         <th><label for="name">Name:</label></th>
  442.         <th><label for="name">Name:</label></th>
  443.       </tr>
  444.     </thead>
  445.     <tbody>
  446.       <tr>
  447.         <td><input type="email" class=" input-sm" id="email"></td>
  448.         <td><input type="password" class=" input-sm" id="pwd"></td>
  449.         <td><input type="text" class=" input-sm" id="name"></td>
  450.         <td><input type="text" class=" input-sm" id="name"></td>
  451.         <td><input type="text" class=" input-sm" id="name"></td>
  452.         <td><input type="text" class=" input-sm" id="name"></td>
  453.         <td><input type="text" class=" input-sm" id="name"></td>
  454.         <td><input type="text" class=" input-sm" id="name"></td>
  455.         <td><input type="text" class=" input-sm" id="name"></td>
  456.         <td><input type="text" class=" input-sm" id="name"></td>
  457.         <td><input type="text" class=" input-sm" id="name"></td>
  458.         <td><input type="text" class=" input-sm" id="name"></td>
  459.         <td><input type="text" class=" input-sm" id="name"></td>
  460.         <td><input type="text" class=" input-sm" id="name"></td>
  461.       </tr>
  462.  
  463.  
  464.     </tbody>
  465.   </table>
  466. <div class="col-md-6 pull-left " style="padding: 0px;padding-right: 30px;">
  467.     <div class="input-group mb-2">
  468.     <div class="input-group-prepend">
  469.       <span class="input-group-text  rounded-0">Person</span>
  470.     </div>
  471.     <input type="text" class="form-control" placeholder="First Name">
  472.   </div>
  473.     <div class="input-group mb-2 ">
  474.     <div class="input-group-prepend">
  475.       <span class="input-group-text rounded-0">Person</span>
  476.     </div>
  477.     <input type="text" class="form-control" placeholder="First Name">
  478.   </div>
  479.   </div>
  480.  
  481.   <div class="col-md-6 pull-right" style="padding: 0px;">
  482.     <div class="input-group mb-2">
  483.     <div class="input-group-prepend">
  484.       <span class="input-group-text  rounded-0">Person</span>
  485.     </div>
  486.     <input type="text" class="form-control" placeholder="First Name">
  487.   </div>
  488.     <div class="input-group mb-2 ">
  489.     <div class="input-group-prepend">
  490.       <span class="input-group-text rounded-0">Person</span>
  491.     </div>
  492.     <input type="text" class="form-control" placeholder="First Name">
  493.   </div>
  494.   </div>
  495.  
  496.  
  497. </div>
  498. <div class="col-md-4 pull-left ">
  499.     <div class="input-group  ">
  500.     <div class="input-group-prepend">
  501.       <span class="input-group-text rounded-0">Person</span>
  502.     </div>
  503.     <input type="text" class="form-control" placeholder="First Name">
  504.   </div>    <div class="input-group  ">
  505.     <div class="input-group-prepend">
  506.       <span class="input-group-text rounded-0">Person</span>
  507.     </div>
  508.     <input type="text" class="form-control" placeholder="First Name">
  509.   </div>    <div class="input-group  ">
  510.     <div class="input-group-prepend">
  511.       <span class="input-group-text rounded-0">Person</span>
  512.     </div>
  513.     <input type="text" class="form-control" placeholder="First Name">
  514.   </div>
  515.   </div>
  516.  
  517.  
  518. <div class="clearfix"></div>
  519.   <div class="form-group ml-3">
  520.       <button type="submit" class="btn btn-primary">Submit</button>
  521.  
  522.   </div>
  523. </form>
  524.   </div>
  525. </div>
  526.  
  527.  
  528.  
  529.  
  530.   <!-- for Table -->
  531.  
  532.   <table class="table table-bordered" id="tableID">
  533.     <thead>
  534.       <tr class="filters">
  535.         <th><input type="checkbox" id="checkall" /></th>
  536.         <th>Firstname</th>
  537.         <th>Lastname</th>
  538.         <th>Email</th>
  539.       </tr>
  540.     </thead>
  541.     <tbody id="id="developers"">
  542.       <tr>
  543.         <td><input type="checkbox" class="checkthis" /></td>
  544.         <td>John</td>
  545.         <td>Doe</td>
  546.         <td>john@example.com</td>
  547.       </tr>
  548.       <tr>
  549.         <td><input type="checkbox" class="checkthis" /></td>
  550.         <td>Mary</td>
  551.         <td>Moe</td>
  552.         <td>mary@example.com</td>
  553.       </tr>
  554.       <tr>
  555.         <td><input type="checkbox" class="checkthis" /></td>
  556.         <td>July</td>
  557.         <td>Dooley</td>
  558.         <td>july@example.com</td>
  559.       </tr>
  560.     </tbody>
  561.   </table>
  562.     <button class="csv">csv</button>
  563.     <button class="xls">xls</button>
  564.     <button class="pdf">pdf</button>
  565.     <button class="txt">txt</button>
  566.     <button class="json">json</button>
  567.     <button class="XLSX">XLSX</button>
  568.     <button class="DOC">DOC</button>
  569.     <button class="PNG">PNG</button>
  570.     <button class="SQL">SQL</button>
  571.     <button class="XML">XML</button>
  572.  
  573.     <button class="btn filter btn-info"><i class="fa fa-filter"></i></button>
  574.  
  575. </div>
  576. <!-- for Table -->
  577.  
  578.  
  579.   </div>
  580.   </div>
  581. <div class="minmaxCon"></div>
  582. <script>
  583.  
  584.   $(document).ready(function(){
  585.  
  586.  
  587. // For Table Filter Like fa-file-excel-o
  588.    $(".filter").click(function(event) {
  589.             $(this).removeClass('filter');
  590. $('table').excelTableFilter(function(){
  591.         });
  592.  
  593.     });
  594.  
  595. // Table Body Id id="developers"
  596.     $('#developers').pageMe({
  597.       pagerSelector: '#developer_page',
  598.       showPrevNext: true,
  599.       hidePageNumbers:false,perPage: 3
  600.     });
  601.  
  602. // For Table Input Checkbox
  603. $("#tableID #checkall").click(function () {
  604.         if ($("#tableID #checkall").is(':checked')) {
  605.             $("#tableID input[type=checkbox]").each(function () {
  606.                 $(this).prop("checked", true);
  607.             });
  608.  
  609.         } else {
  610.             $("#tableID input[type=checkbox]").each(function () {
  611.                 $(this).prop("checked", false);
  612.             });
  613.         }
  614.     });
  615.  
  616.           // for table export
  617.  
  618.             $(".csv").click(function(event) {
  619.             $('#tableID').tableExport({type:'csv'});
  620.             });    
  621.                
  622.    
  623.  
  624.  
  625.  
  626.             $(".xls").click(function(event) {
  627.             $('#tableID').tableExport({type:'xls'});
  628.             });
  629.  
  630.             $(".pdf").click(function(event) {
  631.             $('#tableID').tableExport({type:'pdf'});
  632.             });
  633.  
  634.  
  635.             $(".txt").click(function(event) {
  636.             $('#tableID').tableExport({type:'txt'});
  637.             });
  638.  
  639.                         $(".json").click(function(event) {
  640.             $('#tableID').tableExport({type:'json'});
  641.             });
  642.                     $(".XLSX").click(function(event) {
  643.             $('#tableID').tableExport({type:'xlsx'});
  644.             });    
  645.  
  646.  
  647.                         $(".DOC").click(function(event) {
  648.             $('#tableID').tableExport({type:'doc'});
  649.             });
  650.            
  651.                             $(".PNG").click(function(event) {
  652.             $('#tableID').tableExport({type:'png'});
  653.             });
  654.                                 $(".SQL").click(function(event) {
  655.             $('#tableID').tableExport({type:'sql'});
  656.             });
  657.                                 $(".XML").click(function(event) {
  658.             $('#tableID').tableExport({type:'xml'});
  659.             });
  660.  
  661.  
  662.  
  663.  
  664.  
  665.  
  666.  
  667.  
  668.  
  669.  
  670.  
  671.  
  672.  
  673.  
  674.  
  675.  
  676.  
  677.    // For Dragable Item Using Jquiery Ui  
  678.  $("#modal-1").draggable({
  679.       handle: ".modal-header"
  680.   });
  681.  
  682.   $("#modal-2").draggable({
  683.       handle: ".modal-header"
  684.   });
  685.  
  686. // This Code For Select Current Item
  687.   $(document).on("click",".appDetails", function () {
  688.    var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
  689.    css("z-index", "1055");
  690. });
  691.  
  692.  
  693.  
  694.  
  695. // For Show Modal On Load Window
  696.  
  697.          // $("#modal-1").modal('show');
  698.  
  699.  
  700.  
  701.  
  702.    // For Maximize And Minimize Window
  703.  
  704.       var $content, $modal, $apnData, $modalCon;
  705.  
  706.       $content = $(".min");  
  707.  
  708.  
  709.       //To fire modal
  710.       $(".mdlFire").click(function(e){
  711.  
  712.           e.preventDefault();
  713.  
  714.           var $id = $(this).attr("data-target");
  715.  
  716.           $($id).modal({backdrop: false, keyboard: false});
  717.  
  718.         });
  719.  
  720.  
  721.       $(".modalMinimize").on("click", function(){
  722.  
  723.                   $modalCon = $(this).closest(".mymodal").attr("id");  
  724.  
  725.                   $apnData = $(this).closest(".mymodal");
  726.  
  727.                   $modal = "#" + $modalCon;
  728.  
  729.                   $(".modal-backdrop").addClass("display-none");  
  730.  
  731.                   $($modal).toggleClass("min");  
  732.  
  733.                     if ( $($modal).hasClass("min") ){
  734.  
  735.                         $(".minmaxCon").append($apnData);  
  736.  
  737.                         $(this).find("i").toggleClass( 'fa-minus').toggleClass( 'fa-clone');
  738.  
  739.                       }
  740.                       else {
  741.  
  742.                               $(".container").append($apnData);
  743.  
  744.                               $(this).find("i").toggleClass( 'fa-clone').toggleClass( 'fa-minus');
  745.  
  746.                             };
  747.  
  748.                   });
  749.  
  750.         $("button[data-dismiss='modal']").click(function(){  
  751.  
  752.                 $(this).closest(".mymodal").removeClass("min");
  753.  
  754.                 $(".container").removeClass($apnData);  
  755.  
  756.                 $(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass( 'fa fa-minus');
  757.  
  758.               });
  759.  
  760.  
  761.         // bootstrap table bootstrap-table-pagination
  762.  
  763.  
  764.  
  765.  
  766.  
  767.   });
  768.  
  769. </script>
  770.  
  771. </body>
  772. </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!