API tools faq
paste
Advertisement
gsmashik

inventory transfer

gsmashik
Jun 27th, 2018
272
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  5.  
  6.  
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  9.  
  10.  
  11.   <!-- font Awesome 4.5.0 -->
  12.  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  13.  
  14.  
  15. <!-- For Modal Mimimize Maximize -->  
  16. <style type="text/css">  
  17.     .modal-header .btnGrp{
  18.       position: absolute;
  19.       top: 8px;
  20.       right: 10px;
  21.     }
  22.  
  23.  
  24.     .min{
  25.         width: 250px;
  26.         height: 35px;
  27.         overflow: hidden !important;
  28.         padding: 0px !important;
  29.         margin: 0px;    
  30.  
  31.         float: left;  
  32.         position: static !important;
  33.       }
  34.  
  35.     .min .modal-dialog, .min .modal-content{
  36.         height: 100%;
  37.         width: 100%;
  38.         margin: 0px !important;
  39.         padding: 0px !important;
  40.       }
  41.  
  42.     .min .modal-header{
  43.         height: 100%;
  44.         width: 100%;
  45.         margin: 0px !important;
  46.         padding: 3px 5px !important;
  47.       }
  48.  
  49.     .display-none{display: none;}
  50.  
  51.     button .fa{
  52.         font-size: 16px;
  53.         margin-left: 10px;
  54.       }
  55.  
  56.     .min .fa{
  57.         font-size: 14px;
  58.       }
  59.  
  60.     .min .menuTab{display: none;}
  61.  
  62.     button:focus { outline: none; }
  63.  
  64.     .minmaxCon{
  65.       height: 35px;
  66.       bottom: 1px;
  67.       left: 1px;
  68.       position: fixed;
  69.       right: 1px;
  70.       z-index: 9999;
  71.     }
  72.  
  73.   </style>
  74. <!-- For Modal Mimimize Maximize End -->  
  75. <style>
  76.     .light-gray{background-color: #f5f5f5;
  77. border: 1px solid #e3e3e3;box-shadow: inset 0 1px 1px rgba(0,0,0,.05);color: #000 !important;}
  78.  
  79.  
  80.     .light-blue{background-color: #6BD9EC;
  81. border: 1px solid #6BD9EC;set 0 1px 1px rgba(0,0,0,.05);color: #fff !important;}
  82.  
  83. .panel-body {
  84.     padding: 0px !important;
  85. }
  86.  
  87. .container-fluid {
  88.     padding-right: 0px;
  89.     padding-left: 0px;
  90.     margin-right: auto;
  91.     margin-left: auto;
  92. }
  93.  
  94.  
  95. </style>
  96. </head>
  97.  
  98. <body>
  99.  
  100. <div class="container-fluid">
  101.     <div class="panel panel-default">
  102.   <div class="panel-heading">
  103.  
  104.   </div>
  105.   <div class="panel-body">
  106.               <!-- Top Menu Area -->
  107.               <div class="light-blue "  style="width: 100%;height: 100%;overflow: auto;">
  108.       <ul class="navbar-nav nav list-unstyled" >
  109.         <li class="nav-item">
  110.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">File</a>
  111.         </li>
  112.         <li class="nav-item">
  113.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Edit</a>
  114.         </li>
  115.         <li class="nav-item">
  116.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">View</a>
  117.         </li>
  118.         <li class="nav-item">
  119.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Data</a>
  120.         </li>
  121.        
  122.         <li class="nav-item">
  123.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Goto</a>
  124.         </li>
  125.        
  126.         <li class="nav-item">
  127.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Tools</a>
  128.         </li>
  129.        
  130.         <li class="nav-item">
  131.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Module</a>
  132.         </li>
  133.        
  134.         <li class="nav-item">
  135.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Window</a>
  136.         </li>
  137.         <li class="nav-item">
  138.           <a class="nav-link" style="padding: 5px 5px; color:black;" href="#">Help</a>
  139.         </li>
  140.       </ul>
  141.       <!-- Top Menu Area -->
  142.  </div>
  143.  
  144. <div class="clearfix"></div>
  145.        <!-- Top Module Area -->
  146.   <div class="light-gray" style="width: 100%;height: 100%;overflow: auto;">
  147.   <ul class="navbar-nav nav list-unstyled">
  148.     <li class="nav-item">
  149.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><i class="fa fa-search"></i></a>
  150.     </li>
  151.         <li class="nav-item">
  152.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-print"></span></a>
  153.     </li>
  154.         <li class="nav-item">
  155.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  156.     </li>  
  157.        <li class="nav-item">
  158.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-fax"></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-excel-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-file-word-o"></span></a>
  167.     </li>  
  168.  
  169.        <li class="nav-item">
  170.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-file-pdf-o"></span></a>
  171.     </li>  
  172.  
  173.        <li class="nav-item">
  174.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="fa fa-eye"></span></a>
  175.     </li>  
  176.  
  177.  
  178.        <li class="nav-item">
  179.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="glyphicon glyphicon-fast-backward"></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-chevron-left"></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-chevron-right"></span></a>
  188.     </li>  
  189.  
  190.            <li class="nav-item">
  191.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-fast-forward"></span></a>
  192.     </li>  
  193.  
  194.                <li class="nav-item">
  195.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-filter"></span></a>
  196.     </li>                 <li class="nav-item">
  197.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-equalizer"></span></a>
  198.     </li>             <li class="nav-item">
  199.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class="  glyphicon glyphicon-paste"></span></a>
  200.     </li>             <li class="nav-item">
  201.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-copy"></span></a>
  202.     </li>   <li class="nav-item">
  203.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-usd"></span></a>
  204.     </li>   <li class="nav-item">
  205.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" fa fa-balance-scale"></span></a>
  206.     </li>  
  207.  
  208.        <li class="nav-item">
  209.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-pencil"></span></a>
  210.     </li>  
  211.        <li class="nav-item">
  212.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-cog"></span></a>
  213.     </li>         <li class="nav-item">
  214.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-alert"></span></a>
  215.     </li>  
  216.  
  217.           <li class="nav-item">
  218.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" glyphicon glyphicon-calendar"></span></a>
  219.     </li>
  220.           <li class="nav-item">
  221.       <a class="nav-link" style="padding: 5px 5px; color:black;" href="#"><span class=" fa fa-question"></span></a>
  222.     </li>  
  223.  
  224.  
  225.   </ul>
  226. </div>
  227. <div class="clearfix"></div>
  228.  
  229. <!-- for Accordion Menu -->
  230. <div class="col-sm-3 col-md-3">
  231.             <div class="panel-group" id="accordion">
  232.                 <div class="panel panel-default">
  233.                     <div class="panel-heading">
  234.                         <h4 class="panel-title">
  235.                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
  236.                             </span>Content</a>
  237.                         </h4>
  238.                     </div>
  239.                     <div id="collapseOne" class="panel-collapse collapse "> For Auto Collapse A Body Include panel-collapse collapse class
  240.                         <div class="panel-body">
  241.                             <table class="table">
  242.                                 <tr>
  243.                                     <td>
  244.                                         <span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Articles</a>
  245.                                     </td>
  246.                                 </tr>
  247.                                 <tr>
  248.                                     <td>
  249.                                         <span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">News</a>
  250.                                     </td>
  251.                                 </tr>
  252.                                 <tr>
  253.                                     <td>
  254.                                         <span class="glyphicon glyphicon-file text-info"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
  255.                                     </td>
  256.                                 </tr>
  257.                                 <tr>
  258.                                     <td>
  259.                                         <span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">Comments</a>
  260.                                         <span class="badge">42</span>
  261.                                     </td>
  262.                                 </tr>
  263.                             </table>
  264.                         </div>
  265.                     </div>
  266.                 </div>
  267.                 <div class="panel panel-default">
  268.                     <div class="panel-heading">
  269.                         <h4 class="panel-title">
  270.                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
  271.                             </span>Modules</a>
  272.                         </h4>
  273.                     </div>
  274.                     <div id="collapseTwo" class="panel-collapse collapse">
  275.                         <div class="panel-body">
  276.                             <table class="table">
  277.                                 <tr>
  278.                                     <td>
  279.                                         <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
  280.                                     </td>
  281.                                 </tr>
  282.                                 <tr>
  283.                                     <td>
  284.                                         <a href="http://www.jquery2dotnet.com">Invoices</a>
  285.                                     </td>
  286.                                 </tr>
  287.                                 <tr>
  288.                                     <td>
  289.                                         <a href="http://www.jquery2dotnet.com">Shipments</a>
  290.                                     </td>
  291.                                 </tr>
  292.                                 <tr>
  293.                                     <td>
  294.                                         <a href="http://www.jquery2dotnet.com">Tex</a>
  295.                                     </td>
  296.                                 </tr>
  297.                             </table>
  298.                         </div>
  299.                     </div>
  300.                 </div>
  301.                 <div class="panel panel-default">
  302.                     <div class="panel-heading">
  303.                         <h4 class="panel-title">
  304.                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
  305.                             </span>Account</a>
  306.                         </h4>
  307.                     </div>
  308.                     <div id="collapseThree" class="panel-collapse collapse">
  309.                         <div class="panel-body">
  310.                             <table class="table">
  311.                                 <tr>
  312.                                     <td>
  313.                                         <a href="http://www.jquery2dotnet.com">Change Password</a>
  314.                                     </td>
  315.                                 </tr>
  316.                                 <tr>
  317.                                     <td>
  318.                                         <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
  319.                                     </td>
  320.                                 </tr>
  321.                                 <tr>
  322.                                     <td>
  323.                                         <a href="http://www.jquery2dotnet.com">Import/Export</a>
  324.                                     </td>
  325.                                 </tr>
  326.                                 <tr>
  327.                                     <td>
  328.                                         <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
  329.                                             Delete Account</a>
  330.                                     </td>
  331.                                 </tr>
  332.                             </table>
  333.                         </div>
  334.                     </div>
  335.                 </div>
  336.                 <div class="panel panel-default">
  337.                     <div class="panel-heading">
  338.                         <h4 class="panel-title">
  339.                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
  340.                             </span>Reports</a>
  341.                         </h4>
  342.                     </div>
  343.                     <div id="collapseFour" class="panel-collapse collapse">
  344.                         <div class="panel-body">
  345.                             <table class="table">
  346.                                 <tr>
  347.                                     <td>
  348.                                         <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a>
  349.                                     </td>
  350.                                 </tr>
  351.                                 <tr>
  352.                                     <td>
  353.                                         <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a>
  354.                                     </td>
  355.                                 </tr>
  356.                                 <tr>
  357.                                     <td>
  358.                                         <span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a>
  359.                                     </td>
  360.                                 </tr>
  361.                                 <tr>
  362.                                     <td>
  363.                                         <span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a>
  364.                                     </td>
  365.                                 </tr>
  366.                             </table>
  367.                         </div>
  368.                     </div>
  369.                 </div>
  370.             </div>
  371.         </div>
  372.  
  373. <!-- for Accordion Menu End -->
  374.  
  375.  
  376. <!-- Middle Area -->
  377. <div class="col-md-9">
  378.      <!-- Trigger the modal with a button -->
  379.   <button type="button" class="btn btn-danger btn-lg mdlFire"  data-target="#modal-1" >Click here to open modal</button>
  380.  
  381.   <!-- Modal -->
  382.   <div class="modal fade mymodal" id="modal-1" role="dialog">
  383.     <div class="modal-dialog">
  384.    
  385.       <!-- Modal content-->
  386.       <div class="modal-content">
  387.         <div class="modal-header" style="padding:35px 50px;">
  388.           <button type="button" class="close" data-dismiss="modal"> <i class='fa fa-times'></i> </button>  
  389.  
  390.           <button class="close modalMinimize"> <i class='fa fa-minus'></i> </button>
  391.  
  392.           <h4 class="modal-title">A demo of modal with min/max options</h4>
  393.         </div>
  394.  
  395.         <div class="modal-body"  style="padding:40px 50px;">
  396.            
  397.            
  398.            
  399.         </div>
  400.  
  401.         <div class="modal-footer"  style="padding:40px 50px;">
  402.           <p>Place the footer options like Ok, Cancel buttons here</p>
  403.         </div>
  404.  
  405.       </div>      
  406.     </div>
  407.   </div>  
  408. </div>
  409. <!-- Middle Area End-->
  410.  
  411.   </div>
  412.     <div class="panel-footer">Panel Footer</div>
  413. </div>
  414.  
  415.  
  416. <div class="minmaxCon"></div>  
  417.  
  418.     </div>
  419.  
  420.  
  421.  
  422.  
  423.  
  424.  
  425.  
  426.  
  427.  
  428.  
  429.  
  430. <script>
  431.  
  432.   $(document).ready(function(){
  433.      
  434.  
  435.       var $content, $modal, $apnData, $modalCon;
  436.  
  437.       $content = $(".min");  
  438.  
  439.  
  440.       //To fire modal
  441.       $(".mdlFire").click(function(e){
  442.  
  443.           e.preventDefault();
  444.  
  445.           var $id = $(this).attr("data-target");
  446.  
  447.           $($id).modal({backdrop: false, keyboard: false});
  448.  
  449.         });
  450.  
  451.  
  452.       $(".modalMinimize").on("click", function(){
  453.  
  454.                   $modalCon = $(this).closest(".mymodal").attr("id");  
  455.  
  456.                   $apnData = $(this).closest(".mymodal");
  457.  
  458.                   $modal = "#" + $modalCon;
  459.  
  460.                   $(".modal-backdrop").addClass("display-none");  
  461.  
  462.                   $($modal).toggleClass("min");  
  463.  
  464.                     if ( $($modal).hasClass("min") ){
  465.  
  466.                         $(".minmaxCon").append($apnData);  
  467.  
  468.                         $(this).find("i").toggleClass( 'fa-minus').toggleClass( 'fa-clone');
  469.  
  470.                       }
  471.                       else {
  472.  
  473.                               $(".container").append($apnData);
  474.  
  475.                               $(this).find("i").toggleClass( 'fa-clone').toggleClass( 'fa-minus');
  476.  
  477.                             };
  478.  
  479.                   });
  480.  
  481.         $("button[data-dismiss='modal']").click(function(){  
  482.  
  483.                 $(this).closest(".mymodal").removeClass("min");
  484.  
  485.                 $(".container").removeClass($apnData);  
  486.  
  487.                 $(this).next('.modalMinimize').find("i").removeClass('fa fa-clone').addClass( 'fa fa-minus');
  488.  
  489.               });
  490.  
  491.   });
  492.  
  493. </script>
  494. </body>
  495. </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!