mirror of
https://github.com/esiur/iui.git
synced 2025-05-06 06:42:58 +00:00
322 lines
8.2 KiB
HTML
322 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
<title>GO Command & Control 1.0</title>
|
|
<link href="../css/iui.css" rel="stylesheet">
|
|
<script type="module" src="../iui.js"></script>
|
|
<script>
|
|
|
|
var g;
|
|
function init()
|
|
{
|
|
|
|
var graphData = [
|
|
{
|
|
value: 1398283,
|
|
label: "Thu",
|
|
time: 1489515144
|
|
},
|
|
{
|
|
value: 1450120,
|
|
label: "Fri",
|
|
time: 1489601544
|
|
},
|
|
{
|
|
value: 1552182,
|
|
label: "Sat",
|
|
time: 1489687944
|
|
},
|
|
{
|
|
value: 1463981,
|
|
label: "Sun",
|
|
time: 1489774344
|
|
},
|
|
{
|
|
value: 1343399,
|
|
label: "Mon",
|
|
time: 1489860744
|
|
},
|
|
{
|
|
value: 1024392,
|
|
label: "Tue",
|
|
time: 1489947144
|
|
},
|
|
{
|
|
value: 1181991,
|
|
label: "Wed",
|
|
time: 1490033544
|
|
},
|
|
{
|
|
value: 1372919,
|
|
label: "Thu",
|
|
time: 1490119944
|
|
},
|
|
{
|
|
value: 1231992,
|
|
label: "Fri",
|
|
time: 1490206344
|
|
},
|
|
];
|
|
|
|
return;
|
|
|
|
iui("range").setData(graphData);
|
|
|
|
//var a = new IUIAutocomplete("s", "s");
|
|
|
|
iui("divAutocomplete").autocomplete({layout: {text:{field:"name"}, menu:{field:"name", formatter:function(v){
|
|
return "<b>" + v + "</b>";
|
|
}}}}).on("query", function(query, result){
|
|
|
|
console.log(query, result);
|
|
|
|
var res = [];
|
|
for(var i = 0; i < 1000; i++)
|
|
res.push({name: query+i, text:query + i});
|
|
|
|
result.success(res);
|
|
});
|
|
|
|
|
|
iui("divMultiselect").multiselect2().on("query", function(query, result){
|
|
|
|
console.log(query, result);
|
|
|
|
var res = [];
|
|
for(var i = 0; i < 1000; i++)
|
|
res.push({action: query+i, text:query + i});
|
|
|
|
result.success(res);
|
|
});
|
|
|
|
iui("divBar").bar();
|
|
iui("divDialog").dialog().show();
|
|
iui("divCheck").checkbutton();
|
|
iui("divRadio").radiolist();
|
|
|
|
var colors = ["#bbc6ce", "#ff4800","#dbefed","#113f3a","#061715","#17534d","#b3eae5","#e9c392","#c45f2f","#5f2fc4","#94c42f","#b3dd2a","#bf5e75","#5e75bf",
|
|
"#bfa85e","#ffd968","#fa9ede","#9edefa","#faba9e","#57144e","#144e57","#571d14", "#5f2602","#34be88","#be8834","#346abe","#4334be","#c51d99",
|
|
"#1d99c5","#c5491d","#c03624","#42716d","#424671","#1d1831","#f82758","#2758f8","#f8c727","#c1f827","#58402d","#582d30","#2d5855","#1a635f"];
|
|
iui("divColors").colorpicker(colors).on("select", function(color){
|
|
document.getElementById("divPicker").style.backgroundColor = color.action;
|
|
});
|
|
|
|
iui("divTooltip").tooltip();
|
|
|
|
iui("divTabs").tabs();
|
|
//iui("divGrid").sort("name");
|
|
iui("divDrop").dropdown();
|
|
iui("divDropUp").dropdown({direction: "up"});
|
|
|
|
iui("divPicker").dropdown();
|
|
|
|
iui("ulMenu").menu();
|
|
iui("divSelect").selectlist().on("select", function(action){alert(action);});
|
|
|
|
|
|
var resizers = document.getElementsByClassName("resizer");
|
|
for(var i = 0; i < resizers.length; i++)
|
|
iui(resizers[i]).resizer();
|
|
|
|
var g = iui("divTable").table({layout:
|
|
[{name: "name", title:"Object Name", width: "100px", formatter: function(e){return e + " *";}},
|
|
{name: "iid", width: "50px", title: "iid"},
|
|
{name: "des", width: "200px", title: "Description", type: "select"}],
|
|
data:
|
|
[{iid: 1, name: "Ahmed", des: "IT Director"},
|
|
{iid: 2, name: "Haydar", des: "CEO"},
|
|
{iid: 3, name: "Abbas", des: "Technical"},
|
|
{iid: 4, name: "Laith", des: "Technical"},
|
|
{iid: 5, name: "Ahmed Mahdi", des: "Programmer"},
|
|
]});
|
|
var dad = {iid: 6, name: "Ahmed", des: "IT Director"};
|
|
var mom = {iid: 7, name: "Idrees", des: "IT"};
|
|
var child = {iid: 8, name: "Abud", des: "Child", parents: [dad, mom]};
|
|
var grandson = {iid: 9, name: "Ali", des: "Grandson", parents: [child]};
|
|
var grand2 = {iid: 10, name: "Saif", des: "Grand 2", parents: [grandson]};
|
|
var child2 = {iid: 11, name: "AAAA", des: "S 4", parents: [mom]};
|
|
var grandson2 = {iid:12, name: "Layth", des: "Grandson2", parents: [child]};
|
|
|
|
g.add(dad);
|
|
g.add(mom);
|
|
g.add(child);
|
|
g.add(child2);
|
|
g.add(grandson);
|
|
g.add(grand2);
|
|
g.add(grandson2);
|
|
|
|
g.on("click", function(){
|
|
iui("divTooltip").show(4,4);
|
|
});
|
|
|
|
g.on("contextmenu", function(item, e){
|
|
e.preventDefault();
|
|
iui("ulMenu").show(e.pageX, e.pageY, item);
|
|
console.log(item, e);
|
|
});
|
|
|
|
iui("divDTP").datetimepicker();
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="init()" >
|
|
<br>
|
|
|
|
|
|
<div >
|
|
<i-radio id="divRadio" style="display: inline-block">
|
|
<div class="radio">hi</div>
|
|
<div class="radio">hi</div>
|
|
<div class="radio">hi</div>
|
|
<div class="radio">hi</div>
|
|
<div class="radio">hi</div>
|
|
</i-radio>
|
|
<i-dropdown id="divDrop" style="display: inline-block">
|
|
<img src="../img/icon.png" width="16px">Drop Down
|
|
<div class="dropdown-menu">
|
|
Hi world
|
|
</div>
|
|
</i-dropdown>
|
|
|
|
<i-dropdown id="divDropUp" style="display: inline-block">
|
|
<img src="../img/icon.png" width="16px">Drop Up
|
|
<div class="dropdown-menu">
|
|
Hi world
|
|
</div>
|
|
</i-dropdown>
|
|
|
|
<i-colorpicker id="divPicker" style="display: inline-block; background-image: none">
|
|
|
|
<div class="dropdown-menu">
|
|
<div id="divColors" style="display: inline-block; width: 10em">
|
|
</div>
|
|
</div>
|
|
</i-colorpicker>
|
|
|
|
<i-checkbutton id="divCheck" style="display: inline-block">
|
|
Hello
|
|
</i-checkbutton>
|
|
|
|
</div>
|
|
|
|
<div class="panel-horizontal" style="width: 100%; ;">
|
|
|
|
<div class="panel">
|
|
<i-tabs id="tabs">
|
|
<i-tab selected>
|
|
<i-tab-label>Table</i-tab-label>
|
|
<i-table id="table" style="height: 500px; width: 500px">
|
|
<i-layout>
|
|
<i-field for="name" :formatter="x => x.toUpperCase()"></i-field>
|
|
</i-layout>
|
|
<i-datalist>
|
|
<i-item firstname="Ahmed" lastname="Zamil"></i-item>
|
|
<i-item firstname="Abbas" lastname="Essam"></i-item>
|
|
<i-item firstname="Hayder" lastname="Alsaidy"></i-item>
|
|
</i-datalist>
|
|
</i-table>
|
|
</i-tab>
|
|
<i-tab>
|
|
<i-tab-label>Autocomplete</i-tab-label>
|
|
<i-autocomplete id="autocomplete">
|
|
<!--
|
|
<i-layout>
|
|
<i-field for="name" :formatter="x => '{' + x.name '}'"></i-field>
|
|
</i-layout>
|
|
-->
|
|
</i-autocomplete>
|
|
</i-tab>
|
|
<i-tab>
|
|
<i-tab-label>Select</i-tab-label>
|
|
<i-selectlist id="select">
|
|
<!--
|
|
<i-datalist>
|
|
<i-item>Option 1</i-item>
|
|
<i-item>Option 2</i-item>
|
|
<i-item>Option 3</i-item>
|
|
</i-data>
|
|
-->
|
|
</i-selectlist>
|
|
</i-tab>
|
|
</i-tabs>
|
|
|
|
<i-menu id="ulMenu" class='menu'>
|
|
<li data-action = "first">First thing</li>
|
|
<li data-action = "second">Second thing</li>
|
|
<li data-action = "third">Third thing</li>
|
|
</i-menu>
|
|
</div>
|
|
<i-resizer class="resizer"></i-resizer>
|
|
<div class="panel panel-vertical">
|
|
<div class="panel">
|
|
<div id="divBar">
|
|
<ul>
|
|
<li>
|
|
<img src="../img/icon.png">
|
|
</li>
|
|
<li>
|
|
<img src="../img/icon.png">
|
|
</li>
|
|
<li>
|
|
<img src="../img/icon.png">
|
|
</li>
|
|
<li>
|
|
<img src="../img/icon.png">
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="divDTP" style="max-height: 300px"></div>
|
|
|
|
<i-range id="range" style="height: 200px">
|
|
|
|
</i-range>
|
|
|
|
<i-resizer class="resizer"></i-resizer>
|
|
<div class="panel" >
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!--
|
|
<div class="panel-vertical" id="divContent">
|
|
<div class="panel" style="width: 300px; background-color: yellow"></div>
|
|
<div class="panel" style="background-color: blue">
|
|
<div class="panel-horizontal">
|
|
<div class="panel" style="height: 300px; background-color: green"> </div>
|
|
<div class="panel" style="background-color: pink"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
</br>
|
|
|
|
<i-dialog id="divDialog" title="Login" style="top: 400px">
|
|
<table class="dialog-body">
|
|
<tr><td>Username: </td><td><input id="txtUsername" /></td></tr>
|
|
<tr><td>Password: </td><td><input id="txtPassword" type="password" onkeydown="if (event.keyCode == 13) login()"/></td></tr>
|
|
<tr><td></td><td>
|
|
<input type="checkbox" id="chkRemember" checked="checked" /><label for="chkLoginRemember">Remember my ID and password.</label>
|
|
</td></tr>
|
|
</table>
|
|
<div class="dialog-footer">
|
|
<a class="button" onclick="login()">Login</a>
|
|
<a class="button" onclick="login()">Cancel</a>
|
|
</div>
|
|
</i-dialog>
|
|
|
|
|
|
|
|
<i-tooltip id="divTooltip">Hello World</i-tooltip>
|
|
|
|
</body>
|
|
</html> |