88 lines
3.0 KiB
88 lines
3.0 KiB
<html>
|
|
<head>
|
|
<style>
|
|
.annotated
|
|
{
|
|
position:relative;
|
|
}
|
|
.annotated img
|
|
{
|
|
display:block;
|
|
}
|
|
.annotated a
|
|
{
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
</style>
|
|
|
|
<link rel='stylesheet' href='../share/static/css/ngcp-annotate.css'>
|
|
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
|
|
<script src="../share/static/js/libs/ngcp-annotate.js"></script>
|
|
<script>
|
|
$(function() {
|
|
dialog = $("#subselect").dialog({
|
|
autoOpen: false,
|
|
height: 400,
|
|
width: 500,
|
|
modal: true,
|
|
buttons: {
|
|
"Cancel": function() {
|
|
dialog.dialog("close");
|
|
},
|
|
"Assign": function() {
|
|
dialog.dialog("close");
|
|
}
|
|
},
|
|
close: function() {
|
|
}
|
|
});
|
|
|
|
$("div.annotated").each(function(){
|
|
$(this).find("div.caption").annotate(this).click(function(event) {
|
|
event.preventDefault();
|
|
dialog.dialog("open");
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<h1>Line Selection</h1>
|
|
<div class="annotated">
|
|
<img src="spa504g-front.jpg" alt="Cisco SPA504g" />
|
|
<div class="caption assigned" style="top:76px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-user fa-fw"></i> anne.miller@example.org (107)</a></div>
|
|
<div class="caption assigned" style="top:93px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-rss fa-fw"></i> john.doe@example.org (243)</a></div>
|
|
<div class="caption assigned" style="top:109px; left:473px;" data-pos="left"><a href="#"><i class="fa fa-users fa-fw"></i> sales@example.org (100)</a></div>
|
|
<div class="caption unassigned" style="top:127px; left:493px;" data-pos="right"><a href="#"><i class="fa fa-plus-square fa-fw"></i> Assign Subscriber</a></div>
|
|
</div>
|
|
|
|
<div id="subselect" title="Assign Subscriber">
|
|
<h3>Subscriber</h3>
|
|
<select>
|
|
<option value="1">aaa@example.org</option>
|
|
<option value="2">bbb@example.org</option>
|
|
<option value="3">ccc@example.org</option>
|
|
<option value="4">ddd@example.org</option>
|
|
</select>
|
|
<h3>Line Type</h3>
|
|
<select>
|
|
<option value="private">private</option>
|
|
<option value="shared">shared</option>
|
|
<option value="blf">blf</option>
|
|
<option value="speeddial">speeddial</option>
|
|
<option value="forward">forward</option>
|
|
<option value="transfer">transfer</option>
|
|
</select>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim: set tabstop=4 syntax=html expandtab: -->
|