This commit is contained in:
GEGULA�
2017-09-18 14:40:58 +08:00
5 changed files with 335 additions and 189 deletions
+335 -189
View File
@@ -66,6 +66,10 @@ License: You must have a valid license purchased only from themeforest(the above
margin-left: 63%;
margin-top:0.7%;
}
.btiv {
background: transparent;
border: none !important;
}
</style>
</head>
<!-- END HEAD -->
@@ -324,104 +328,106 @@ License: You must have a valid license purchased only from themeforest(the above
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<h3 class="block"><b>List Forwarder</b></h3>
<div class="row">
<form class="form-horizontal" role="form">
<div class="col-md-12">
<div class="form-group">
<div class="form-group">
<label for="so" class="col-md-2 control-label">Type</label>
<div class="col-md-4">
<select id="folder" class="form-control">
<option>Please Select</option>
<option value="000">New Order</option>
<option value="001">Purchase Oder</option>
</select>
</div>
</div>
<div class="tab-pane active" id="issue1" style="display: none;">
<form role="form" action="#">
<br/>
<div class="portlet light bordered">
<span class="caption-subject font-dark bold uppercase"><h4><strong>Details</strong></h4></span>
<div class="form-group">
<div class="form-group">
<label for="so" class="col-md-2 control-label">Forwarder</label>
<div class="col-md-9" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Please Choose Forwarder
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Followed Company</li>
<li>
<a href="#" title="Select this card"><img src="../assets/layouts/layout/img/comp1.png" style="width:77px"> CIEF Worldwide</a>
</li>
<li>
<a href="#" title="Select this card"><img src="../assets/layouts/layout/img/comp2.png" style="width:77px"> Magic Cyberjaya</a>
</li>
<li>
<a href="#" title="Select this card"><img src="../assets/layouts/layout/img/comp5.jpg" style="width:77px"> Home Made Market</a>
</li>
</ul>
</div>
<br/>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Marking</label>
<div class="col-md-4">
<input type="text" class="form-control" id="marking" placeholder="CIEF/00123">
</div>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Supplier</label>
<div class="col-md-4">
<input type="text" class="form-control" id="supplier" placeholder="Infinite co.">
</div>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Warehouse Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="marking" placeholder="IFNT">
</div>
</div>
</form>
</div>
<div class="tab-pane active" id="issue2" style="display: none;">
<form role="form" action="#">
<div class="form-group">
<label for="so" class="col-md-2 control-label">Order No.</label>
<label for="so" class="col-md-2 control-label">Type</label>
<div class="col-md-4">
<select class="form-control">
<option>Please choose your order</option>
<option value="000">00012</option>
<option value="001">00114</option>
<option value="002">00216</option>
<option value="004">00418</option>
<option value="006">00624</option>
<select id="folder" class="form-control">
<option>Please Select</option>
<option value="000">New Order</option>
<option value="001">Purchase Oder</option>
</select>
</div>
</div>
<div class="tab-pane active" id="issue1" style="display: none;">
<form role="form" action="#">
<br/>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Forwarder</label>
<div class="col-md-9" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Please Choose Forwarder
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Marking</label>
<div class="col-md-4">
<input type="text" class="form-control" id="marking" placeholder="CIEF/00123">
<ul class="dropdown-menu">
<li class="dropdown-header">Followed Company</li>
<li>
<a href="#" title="Select this card"><img src="../assets/layouts/layout/img/comp1.png" style="width:77px"> CIEF Worldwide</a>
</li>
<li>
<a href="#" title="Select this card"><img src="../assets/layouts/layout/img/comp2.png" style="width:77px"> Magic Cyberjaya</a>
</li>
<li>
<a href="#" title="Select this card"><img src="../assets/layouts/layout/img/comp5.jpg" style="width:77px"> Home Made Market</a>
</li>
</ul>
</div>
<br/>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Marking</label>
<div class="col-md-4">
<input type="text" class="form-control" id="marking" placeholder="CIEF/00123">
</div>
</div>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Supplier</label>
<div class="col-md-4">
<input type="text" class="form-control" id="supplier" placeholder="Infinite co.">
<div class="form-group">
<label for="so" class="col-md-2 control-label">Supplier</label>
<div class="col-md-4">
<input type="text" class="form-control" id="supplier" placeholder="Infinite co.">
</div>
</div>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Warehouse Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="marking" placeholder="IFNT">
<div class="form-group">
<label for="so" class="col-md-2 control-label">Warehouse Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="marking" placeholder="IFNT">
</div>
</div>
</form>
</div>
<div class="tab-pane active" id="issue2" style="display: none;">
<form role="form" action="#">
<div class="form-group">
<label for="so" class="col-md-2 control-label">Order No.</label>
<div class="col-md-4">
<select class="form-control">
<option>Please choose your order</option>
<option value="000">00012</option>
<option value="001">00114</option>
<option value="002">00216</option>
<option value="004">00418</option>
<option value="006">00624</option>
</select>
</div>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Marking</label>
<div class="col-md-4">
<input type="text" class="form-control" id="marking" placeholder="CIEF/00123">
</div>
</div>
</div>
</form>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Supplier</label>
<div class="col-md-4">
<input type="text" class="form-control" id="supplier" placeholder="Infinite co.">
</div>
</div>
<div class="form-group">
<label for="so" class="col-md-2 control-label">Warehouse Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="marking" placeholder="IFNT">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@@ -442,85 +448,113 @@ License: You must have a valid license purchased only from themeforest(the above
<div class="tab-pane" id="tab2">
<div class="col-md-13">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="">
<i class="icon-social-dribbble font-green hide"></i>
<span class="caption-subject font-dark bold uppercase">Details Goods</span>
<div class="">
<div class="">
<div class = "">
<table id="user2" class="table table-bordered table-striped">
<thead>
<th>No</th>
<th>Product Name</th>
<th>Model</th>
<th>UOM</th>
<th>Qty</th>
<th>CMB</th>
<th>Weight</th>
<th>Photo</th>
<th>Remark</th>
</thead>
<tbody>
<tr>
<td>Hello </td>
<td> </td>
<td> </td>
<th> </th>
<td> </td>
<td> </td>
<td> </td>
<td>Hello </td>
<td> </td>
</tr>
<tr>
<td>Hello </td>
<td> </td>
<td> </td>
<Th> </Th>
<td> </td>
<td> </td>
<td> </td>
<td>Hello </td>
<td> </td>
</tr>
<tr>
<td>Hello </td>
<td> </td>
<td> </td>
<td>Hello </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Hello </td>
<td> </td>
<td> </td>
<td> </td>
<th> </th>
<td> </td>
<td> </td>
<td>Hello </td>
<td> </td>
</tr>
</tbody>
</table>
<a class="btn btn-circle btn-default" style="margin-left: 15px;" data-toggle="modal" href="#addnew">
<i class="fa fa-plus"></i> Add </a>
</div>
</div>
</div>
</div>
</div>
<table id="table1" class="table table-bordered table-striped">
<thead>
<th>No</th>
<th>Product Name</th>
<th>Model</th>
<th>UOM</th>
<th>Qty</th>
<th>CMB</th>
<th>Weight</th>
<th>Photo</th>
<th>Remark</th>
</thead>
<tbody>
<tr>
<td>1 </td>
<td>Television </td>
<td>CS110 </td>
<td>Unit </td>
<td>10 </td>
<td><div class='btn-group'>
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>142m3<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li>Height = 12</li>
<li>Widht = 15</li>
<li>Depth = 12</li></ul>
</div> </td>
<td><div class='btn-group'>
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>145kg<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li>Cross = 12</li>
<li>Nett = 15</li></ul>
</div> </td>
<td><img src="../assets/global/img/tv.jpg" alt="" style="width:100px;height:75px;" /></td>
<td> </td>
</tr>
<tr>
<td>2 </td>
<td>Tire </td>
<td>CS251 </td>
<td>Unit </td>
<td>20 </td>
<td><div class='btn-group'>
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>452m3<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li>Height = 12</li>
<li>Widht = 15</li>
<li>Depth = 12</li></ul>
</div> </td>
<td><div class='btn-group'>
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>142kg<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li>Cross = 12</li>
<li>Nett = 15</li></ul>
</div></td>
<td><img src="../assets/global/img/tire.jpg" alt="" style="width:100px;height:100px;" /> </td>
<td> </td>
</tr>
<tr>
<td>3 </td>
<td>Chair </td>
<td>CS486 </td>
<td>Unit </td>
<td>5 </td>
<td><div class='btn-group'>
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>145m3<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li>Height = 12</li>
<li>Widht = 15</li>
<li>Depth = 12</li></ul>
</div> </td>
<td><div class='btn-group'>
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>186kg<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li>Cross = 12</li>
<li>Nett = 15</li></ul>
</div> </td>
<td><img src="../assets/global/img/chair.jpg" alt="" style="width:100px;height:100px;" /> </td>
<td> </td>
</tr>
<tr>
<td>4 </td>
<td>Table </td>
<td>CS125 </td>
<td>Unit </td>
<td>5 </td>
<td><div class='btn-group'>
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>154m3<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li>Height = 12</li>
<li>Widht = 15</li>
<li>Depth = 12</li></ul>
</div> </td>
<td><div class='btn-group'>
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>541kg<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li>Cross = 12</li>
<li>Nett = 15</li></ul>
</div> </td>
<td><img src="../assets/global/img/table.jpg" alt="" style="width:100px;height:100px;" /> </td>
<td> </td>
</tr>
</tbody>
</table>
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<a onclick="addNewColumn();" class="btn green"> New Column
<i class="fa fa-plus"></i>
</a>
</div>
<a class="btn green" style="margin-left: 15px;" data-toggle="modal" href="#addnew">
<i class="fa fa-plus"></i> Add New Item </a>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-5 col-md-9">
@@ -576,7 +610,7 @@ License: You must have a valid license purchased only from themeforest(the above
<a href="#item" data-toggle="tab" class="step">
<span class="number"> 1 </span>
<span class="desc">
<i class="fa fa-check"></i>Details</span>
<i class="fa fa-check"></i>Item</span>
</a>
</li>
<li>
@@ -584,7 +618,7 @@ License: You must have a valid license purchased only from themeforest(the above
<span class="number"> 2 </span>
<span class="desc">
<i class="fa fa-check"></i> Items </span>
<i class="fa fa-check"></i> Packing </span>
</a>
</li>
</ul>
@@ -593,34 +627,132 @@ License: You must have a valid license purchased only from themeforest(the above
</div>
<div class="tab-content">
<div class="tab-pane active" id="item">
<h3 class="block">Provide your account details</h3>
<div class="form-group">
<label class="control-label col-md-3">Username
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input type="text" class="form-control" name="username" />
<span class="help-block"> Provide your username </span>
</div>
</div>
<h3 class="block">Product Details</h3>
<div class="col-md-6">
<h5><strong> </strong></h5>
<div class="form-group">
<label class="control-label col-md-3">Product Name
<span class="required"> * </span>
</label>
<div class="col-md-6">
<input type="text" class="form-control" name="productname" placeholder="Television"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Description
<span class="required"> * </span>
</label>
<div class="col-md-6">
<input type="textarea" class="form-control" name="description" placeholder="42 inch"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Photo
<span class="required"> * </span>
</label>
<div class="col-md-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
</div>
<div>
<span class="fileinput-new"></span>
<span class="fileinput-exists"></span>
<input type="file" name="...">
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Brand
<span class="required"> * </span>
</label>
<div class="col-md-6">
<input type="text" class="form-control" name="brand" placeholder="Sharp"/>
</div>
</div>
</div>
<div class="col-md-6">
<h5><strong> </strong></h5>
<div class="form-group">
<label class="control-label col-md-3">Model
<span class="required"> * </span>
</label>
<div class="col-md-6">
<input type="text" class="form-control" name="model" placeholder="ESW1452"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">UOM
<span class="required"> * </span>
</label>
<div class="col-md-6">
<input type="text" class="form-control" name="uom" placeholder="Roll"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Quantity
<span class="required"> * </span>
</label>
<div class="col-md-6">
<input type="text" class="form-control" name="quantity" placeholder="4"/>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="packing">
<h3 class="block">lalalalalalala</h3>
<div class="form-group">
<label class="control-label col-md-3">Usernfasfasfasfsaame
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input type="text" class="form-control" name="username" />
<span class="help-block"> Provide your username </span>
</div>
</div>
</div>
<h3 class="block">Packing Details</h3>
<div class="col-md-6">
<h5><strong>Measurement</strong></h5>
<div class="form-group">
<label class="control-label col-md-3">Height
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input type="text" class="form-control" name="height" placeholder="30"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Width
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input type="text" class="form-control" name="width" placeholder="20"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Depth
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input type="text" class="form-control" name="depth" placeholder="15"/>
</div>
</div>
</div>
<div class="col-md-6">
<h5><strong>Weight</strong></h5>
<div class="form-group">
<label class="control-label col-md-3">Cross
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input type="text" class="form-control" name="cross" placeholder="30"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Nett
<span class="required"> * </span>
</label>
<div class="col-md-4">
<input type="text" class="form-control" name="nett" placeholder="20"/>
</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<div class="col-md-offset-5 col-md-9">
<a href="javascript:;" class="btn default button-previous2">
<i class="fa fa-angle-left"></i> Back </a>
<a href="javascript:;" class="btn btn-outline green button-next2"> Next
@@ -632,18 +764,19 @@ License: You must have a valid license purchased only from themeforest(the above
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<br/>
<div class="modal-footer">
<!--<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" class="btn green">Add</button>
</div>
</div>
</div>-->
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
@@ -931,6 +1064,19 @@ License: You must have a valid license purchased only from themeforest(the above
};
}();
function addNewColumn(){
$('#table1 thead').find('tr').each(function(){
$(this).find('th').eq(7).after('<th>Remark</th>');
});
$('#table1 tbody').find('tr').each(function(){
$(this).find('td').eq(7).after('<td><textarea style="width: 34px;"></textarea></td>');
});
$('#table1 tfoot').find('tr').each(function(){
$(this).find('td').eq(7).after('<td><textarea style="width: 34px;"></textarea></td>');
});
}
jQuery(document).ready(function() {
FormWizard.init();
Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB