调用Javascript/jQuery UI Widgets
By
admin
at 2018-11-02 • 0人收藏 • 1416人看过
jqwidgets.com 网站提供了各种web控件,
一直不太喜欢winform中的各种滚动条 , 又不好自绘, skinsb这个皮肤库也差强人意,
这个web控件完全可以实现我的要求.
本地版UI学习,已经上传到了网盘, 有兴趣的可以一起学习下:
https://pan.baidu.com/s/1jyOmJuX63WHVxd9MST_8dg
首先, 做个示例 , 看看在web的listbox控件在aar中的显示是否有问题:
定义一个网页代码页 main.aardio
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.metrodark.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<style type="text/css">
#jqxWidget { height:100% ; width:100%; position:absolute;}
body { margin:0px; padding:0px; overflow:hidden;background-color:#000000"}
</style>
</head>
<body>
<div id='content' style="height:100%">
<script type="text/javascript">
$(document).ready(function () {
var source = [
"全职猎人 ",
"闪灵二人组 ",
"浪客剑心 ",
"七虹香电击作战 ",
"一骑当千 ",
"甲贺忍法帖 ",
"鬼眼狂刀 ",
"舞HIME ",
"圣枪修女 ",
"新撰组异闻录 ",
"真月潭月姬 ",
"梦幻妖子 ",
"风魔小次郎 ",
"幽游白书 ",
"圣斗士 ",
"火魅子传 ",
"天上天下 ",
"速写者 ",
"天空战记 ",
"烈火之炎 ",
"女恶魔人 ",
"枪墓 ",
"侍铳 ",
"水瓶新世纪 ",
"BOY圣子到 ",
"吸血姬美夕 ",
"神臂ARMS ",
"逮捕令 ",
"NOIR ",
"MADLAX ",
"AIR ",
"读与死 ",
"海岸物语 ",
"快餐店之恋 ",
"钢之炼金术师 ",
"圣传 ",
"高校女忍者 ",
"天使禁猎区 ",
"侍魂 ",
"铠传 ",
"推理之绊 ",
"钢铁神兵 ",
"爆走猎人 ",
"宇宙骑士 ",
"白色猎人 ",
"出云战记 ",
"魔法老师 ",
"战奇潭 ",
"莱姆色战奇潭 ",
"间奏曲 ",
"超神姬 ",
"圣魔之血 ",
"北斗神拳 ",
"高达SEED ",
"冒险王比特 ",
"扑杀天使 ",
"机械女神 ",
"纯情房东俏房客 ",
"武器种族传说 ",
"灌篮高手 ",
"中华小当家 ",
"生化体 ",
"这丑陋又美丽的世界 ",
"樱花大战 ",
"强殖装甲凯普 ",
"空霸 ",
"街霸 ",
"忘却的旋律 ",
"城市猎人 ",
"曙光少女 ",
"陆奥圆明流外传--修罗之刻 ",
"FATE/STAY NIGHT ",
"怪物 ",
"青出于蓝 ",
"复仇天使 ",
"愿此刻永恒 ",
"魔女之刃 ",
"黑礁 ",
"第一神拳 ",
"银河铁道物语 ",
"JOJO的奇妙冒险 ",
"孔雀王 ",
"下级生 ",
"刃牙 ",
"黑猫 ",
"草莓百分百 ",
"水星领航员 ",
"弹道 ",
"X战记 ",
"BLOOD+ ",
"妖精的旋律 ",
"格斗美神武龙 ",
"爆裂天使 ",
"兽王星 ",
"天使特警 ",
"暗之末裔 ",
"地狱之歌 ",
"玻璃舰队 ",
"青空少女队 ",
"地狱少女 ",
"海底娇娃蓝华 ",
"舞乙—HIME ",
"天才少女闪士 ",
"灼眼的夏娜 ",
"圣洁的维纳斯 ",
"永恒恋曲 ",
"电影少女 ",
"超能力少年 ",
"青涩宝贝 ",
"魔法骑士龙威 ",
"贫乏姐妹物语 ",
"圣石小子 ",
"高桥留美子剧场 ",
"爱情泡泡糖 ",
"柠檬天使计划 "
];
// Create a jqxListBox
$("#jqxWidget").jqxListBox({ selectedIndex: 3,theme:'metrodark', source: source, width: '100%', height: '100%' });
});
</script>
<div id='jqxWidget'>
</div>
</div>
</body>
</html>在aar的主界面代码里写入:
import win.ui;
/*DSG{{*/
mainForm = win.form(text="js控件listbox调用 By chengxu.xyz";right=559;bottom=362;mode="popup")
mainForm.add()
/*}}*/
import web.kit.form
var wb = web.kit.form(mainForm);
import wsock.tcp.simpleHttpServer;
wb.go( wsock.tcp.simpleHttpServer.startUrl("/html/main.aardio") );
import win.ui.shadow;
win.ui.shadow(mainForm);
mainForm.show();
win.loopMessage();
2 个回复 | 最后更新于 2018-11-04
调用表格控件:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/html/css/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/html/css/jqx.metrodark.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="/html/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/html/js/demos.js"></script>
<script type="text/javascript" src="/html/js/jqxcore.js"></script>
<script type="text/javascript" src="/html/js/jqxdata.js"></script>
<script type="text/javascript" src="/html/js/jqxbuttons.js"></script>
<script type="text/javascript" src="/html/js/jqxscrollbar.js"></script>
<script type="text/javascript" src="/html/js/jqxmenu.js"></script>
<script type="text/javascript" src="/html/js/jqxcheckbox.js"></script>
<script type="text/javascript" src="/html/js/jqxlistbox.js"></script>
<script type="text/javascript" src="/html/js/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/html/js/jqxgrid.js"></script>
<script type="text/javascript" src="/html/js/jqxgrid.selection.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = {};
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
var generaterow = function (i) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
return row;
}
for (var i = 0; i < 5; i++) {
var row = generaterow(i);
data[i] = row;
}
var source =
{
localdata: data,
datatype: "local",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
],
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server - send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
deleterow: function (rowid, commit) {
// synchronize with the server - send delete command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
commit(true);
},
updaterow: function (rowid, newdata, commit) {
// synchronize with the server - send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#grid").jqxGrid(
{
width: '100%',
height: '100%',
source: dataAdapter,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $("<div style='margin: 5px;'></div>");
toolbar.append(container);
container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
container.append('<input style="margin-left: 5px;" id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />');
container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Update Selected Row" />');
$("#addrowbutton").jqxButton();
$("#addmultiplerowsbutton").jqxButton();
$("#deleterowbutton").jqxButton();
$("#updaterowbutton").jqxButton();
// update row.
$("#updaterowbutton").on('click', function () {
var datarow = generaterow();
var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
var commit = $("#grid").jqxGrid('updaterow', id, datarow);
$("#grid").jqxGrid('ensurerowvisible', selectedrowindex);
}
});
// create new row.
$("#addrowbutton").on('click', function () {
var datarow = generaterow();
var commit = $("#grid").jqxGrid('addrow', null, datarow);
});
// create new rows.
$("#addmultiplerowsbutton").on('click', function () {
$("#grid").jqxGrid('beginupdate');
for (var i = 0; i < 10; i++) {
var datarow = generaterow();
var commit = $("#grid").jqxGrid('addrow', null, datarow);
}
$("#grid").jqxGrid('endupdate');
});
// delete row.
$("#deleterowbutton").on('click', function () {
var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
var commit = $("#grid").jqxGrid('deleterow', id);
}
});
},
columns: [
{ text: 'First Name', datafield: 'firstname', width: 200 },
{ text: 'Last Name', datafield: 'lastname', },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
]
});
});
</script>
<style type="text/css">
#grid { height:100% ; width:100%; position:absolute;}
body { margin:0px; padding:0px; overflow:hidden;background-color:#000000"}
</style>
</head>
<body>
<div id='grid'>
</div>
</div>
</body>
</html>登录后方可回帖
利用aar的播放器示例, 测试发现:
拖动边框调整大小会导致js这个listbox出现残影?????
完整工程代码:
https://pan.baidu.com/s/1ugIolM3sQzrr_4u0Tkb2Pg
谁遇到过???怎么解决??
如果没人知道, 那么我就慢慢研究了....