<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="https://raw.githubusercontent.com/twitter/typeahead.js/master/dist/typeahead.bundle.min.js"></script>
<style>
ul.nav>li>div.dropdown {
padding: 8px;
}
thead > tr > th {
height: 0px;
}
thead > tr > th > span.label {
position: relative;
bottom: -10px;
left: -4px;
}
#bilag-dropdown {
position: relative;
top: -24px;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header"><a class="navbar-brand" href="#">SignFlow Faktura</a></div>
<ul class="nav navbar-nav">
<li><a href="x7KM" target="_top">Oversigt</a></li>
<li class="active"><a href="4AXB" target="_top">Faktura</a></li>
<li><a href="yRqV" target="_top">Noter <span class="badge">4</span></a></li>
<li>
<div class="dropdown btn-group pagination-centered">
<button type="button" class="btn btn-primary">Godkend</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Retur</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal">Til kollega</a></li>
</ul>
</div>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="pull-right"><a href="#">Rasmus Fuglsang</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Detaljer</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-5 control-label">Leverandør</label>
<div class="col-sm-7"><p class="form-control-static">pil.dk & Quickpay</p></div>
</div>
<div class="form-group hidden-sm hidden-xs">
<label class="col-sm-5 control-label">Adresse</label>
<div class="col-sm-7"><p class="form-control-static">FGE Rostrupvej 2<br/>8000 Aarhus C</p></div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Faktura</label>
<div class="col-sm-7"><p class="form-control-static pull-right">33360</p></div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Fakturadato</label>
<div class="col-sm-7"><p class="form-control-static pull-right">03-10-2011</p></div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Forfaldsdato</label>
<div class="col-sm-7"><p class="form-control-static pull-right">11-10-2011</p></div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Beløb</label>
<div class="col-sm-7"><p class="form-control-static pull-right">3000</p></div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Moms</label>
<div class="col-sm-7"><p class="form-control-static pull-right">750</p></div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Total</label>
<div class="col-sm-7"><p class="form-control-static pull-right">3750</p></div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-9 hidden-xs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Dokument</h3><div id="bilag-dropdown" class="dropdown panel-title pull-right"><button class="dropdown-toggle btn btn-sm btn-default" data-toggle="dropdown">faktura01.tif [1/2] <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">faktura01.tif [2/2]</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">bilag01.xsl [1/1]</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">kontrakt.doc [1/1]</a></li>
</ul>
</div>
</div>
<div class="panel-body">
<img src='http://i.imgur.com/ZAjR7m4.png?1' />
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Send til kollega</h4>
</div>
<div class="modal-body">
<form class="form form-horizontal" role="form">
<div class="form-group" id="the-basics" name="the-basics">
<input id="kollega_input" name="kollega_input" class="typeahead form-control" type="text" placeholder="Kollega" data-provide="typeahead"/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuller</button>
<button type="button" class="btn btn-default">Godkend & send</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
.twitter-typeahead .tt-hint {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small {
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large {
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
.twitter-typeahead {
width: 100%;
}
.tt-dropdown-menu {
width: 100%;
padding: 10px 16px;
border-radius: 4px;
border: solid 1px;
background: white;
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
.tt-hint {
width: 100%;
}
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
matches.push({ value: str });
}
});
cb(matches);
};
};
var states = ['Jan Gerner Kroberg - JGK', 'Jane Sild - JSO'
];
$(function() {
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
});
})