plus控件仿element的样式库
By
风行者
at 2022-05-13 • 2人收藏 • 1430人看过
使用plus控件仿element样式，加封装一些常用组件，用了这个库好处是，拉一个plus控件，再加一句代码就可设置完成一个控件，快速简单漂亮大方......
例子代码：
//plus-element样式演示
import fonts.fontAwesome;
import win.ui;
import process;
/*DSG{{*/
var winform = win.form(text="plus-element样式演示";right=1264;bottom=630;border="none")
winform.add(
bkplus={cls="bkplus";left=1;top=30;right=96;bottom=630;bgcolor=65280;db=1;dl=1;dt=1;z=1};
bkplus2={cls="bkplus";left=0;top=-2;right=1265;bottom=30;forecolor=16776960;z=49};
groupbox={cls="groupbox";text="分组1";left=113;top=291;right=534;bottom=373;db=1;dl=1;dr=1;dt=1;edge=1;font=LOGFONT(h=-16);z=44};
groupbox2={cls="groupbox";text="分组2";left=552;top=291;right=973;bottom=373;db=1;dr=1;dt=1;edge=1;font=LOGFONT(h=-16);z=48};
listItem={cls="plus";text="项目1";left=997;top=134;right=1250;bottom=179;bgcolor=11525002;border={left=1;right=1;bottom=1;color=-3546113};font=LOGFONT(h=-16);tabstop=1;textPadding={right=20};z=2};
listItem2={cls="plus";text="项目2";left=997;top=179;right=1250;bottom=224;bgcolor=11525002;border={left=1;right=1;bottom=1;color=-3546113};font=LOGFONT(h=-16);ont=LOGFONT(name='FontAwesome';charset=0);tabstop=1;textPadding={right=20};z=3};
menuItem1={cls="plus";text="项目1";left=826;top=98;right=968;bottom=145;bgcolor=16777215;dr=1;dt=1;font=LOGFONT(h=-16);z=10};
menuItem2={cls="plus";text="项目2";left=826;top=144;right=968;bottom=191;bgcolor=16777215;dr=1;dt=1;font=LOGFONT(h=-16);z=12};
menuItem3={cls="plus";text="项目3";left=826;top=190;right=968;bottom=237;bgcolor=16777215;dr=1;dt=1;font=LOGFONT(h=-16);z=15};
menuItem4={cls="plus";text="菜单1";left=816;top=447;right=988;bottom=482;bgcolor=15793151;db=1;dr=1;z=4};
menuItem5={cls="plus";text="菜单2";left=816;top=481;right=988;bottom=516;bgcolor=15793151;db=1;dr=1;z=6};
menuItem6={cls="plus";text="菜单3";left=816;top=515;right=988;bottom=550;bgcolor=15793151;db=1;dr=1;z=8};
plus={cls="plus";text="主要按钮";left=118;top=45;right=241;bottom=95;bgcolor=-28642;border={radius=30};color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=7};
plus10={cls="plus";text="信息按钮";left=660;top=108;right=783;bottom=158;bgcolor=-6712432;color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=21};
plus11={cls="plus";text='\uF040';left=137;top=177;right=187;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=22};
plus12={cls="plus";text='\uF00C';left=213;top=177;right=263;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=23};
plus13={cls="plus";text='\uF005';left=288;top=177;right=338;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=24};
plus14={cls="plus";text='\uF014';left=363;top=177;right=413;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=25};
plus15={cls="plus";text='\uF003';left=439;top=177;right=489;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=26};
plus16={cls="plus";text=" 等待按钮";left=660;top=176;right=783;bottom=226;bgcolor=-28642;color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=9}};iconText='\uF254';notify=1;z=28};
plus17={cls="plus";text="点击效果";left=525;top=176;right=648;bottom=226;bgcolor=-28642;color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=27};
plus18={cls="plus";left=126;top=250;right=208;bottom=292;dl=1;dt=1;z=29};
plus19={cls="plus";left=238;top=250;right=320;bottom=292;dl=1;dt=1;z=30};
plus2={cls="plus";text="成功按钮";left=253;top=45;right=376;bottom=95;bgcolor=-12926361;border={radius=30};color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=9};
plus20={cls="plus";left=350;top=250;right=432;bottom=292;dl=1;dt=1;z=31};
plus21={cls="plus";left=462;top=250;right=544;bottom=292;dl=1;dr=1;dt=1;z=32};
plus22={cls="plus";left=150;top=414;right=482;bottom=452;db=1;dl=1;z=33};
plus23={cls="plus";left=545;top=394;right=745;bottom=594;db=1;dr=1;z=34};
plus24={cls="plus";text="进度条演示";left=241;top=563;right=391;bottom=613;align="left";bgcolor=15780518;color=16777215;db=1;dl=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-16;name='FontAwesome');padding={left=15}};iconText='\uF00C';textPadding={left=40};z=35};
plus25={cls="plus";left=148;top=485;right=479;bottom=523;border={radius=25};db=1;dl=1;z=36};
plus26={cls="plus";text="下拉按钮";left=826;top=50;right=968;bottom=97;dr=1;dt=1;font=LOGFONT(h=-16);z=5};
plus27={cls="plus";left=816;top=409;right=988;bottom=441;bgcolor=0;border={color=-5846288};color=16711680;db=1;dr=1;z=11};
plus28={cls="plus";text="首页";left=0;top=53;right=96;bottom=134;color=16777215;dl=1;dt=1;font=LOGFONT(h=-20);iconStyle={font=LOGFONT(h=-35;name='FontAwesome');padding={bottom=20}};iconText='\uF015';textPadding={right=-5;bottom=10};valign="bottom";z=37};
plus29={cls="plus";text="推荐";left=1;top=135;right=97;bottom=216;color=16777215;dl=1;dt=1;font=LOGFONT(h=-20);iconStyle={font=LOGFONT(h=-35;name='FontAwesome');padding={bottom=34}};iconText='\uF27B';notify=1;textPadding={right=-5;bottom=10};valign="bottom";z=38};
plus3={cls="plus";text="警告按钮";left=389;top=45;right=512;bottom=95;bgcolor=-12803354;border={radius=30};color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=13};
plus30={cls="plus";left=559;top=253;right=683;bottom=290;color=255;dr=1;dt=1;z=39};
plus31={cls="plus";left=690;top=253;right=835;bottom=290;dr=1;dt=1;z=40};
plus32={cls="plus";left=130;top=317;right=242;bottom=352;db=1;dl=1;dt=1;z=41};
plus33={cls="plus";left=252;top=317;right=379;bottom=352;db=1;dl=1;dt=1;z=42};
plus34={cls="plus";left=388;top=317;right=513;bottom=352;db=1;dl=1;dt=1;z=43};
plus35={cls="plus";left=563;top=316;right=678;bottom=351;db=1;dr=1;dt=1;z=45};
plus36={cls="plus";left=685;top=316;right=800;bottom=351;db=1;dr=1;dt=1;z=46};
plus37={cls="plus";left=821;top=316;right=936;bottom=351;db=1;dr=1;dt=1;z=47};
plus38={cls="plus";left=823;top=591;right=1245;bottom=609;z=50};
plus39={cls="plus";left=1001;top=48;right=1246;bottom=79;z=51};
plus4={cls="plus";text="危险按钮";left=524;top=45;right=647;bottom=95;bgcolor=-9671435;border={radius=30};color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=14};
plus40={cls="plus";left=1001;top=91;right=1246;bottom=122;color=8421376;font=LOGFONT(h=-14);password=1;z=52};
plus5={cls="plus";text="信息按钮";left=659;top=45;right=782;bottom=95;bgcolor=-6712432;border={radius=30};color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=16};
plus6={cls="plus";text="主要按钮";left=119;top=108;right=242;bottom=158;bgcolor=-28642;color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=17};
plus7={cls="plus";text="成功按钮";left=254;top=108;right=377;bottom=158;bgcolor=-12926361;color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=18};
plus8={cls="plus";text="警告按钮";left=389;top=111;right=512;bottom=161;bgcolor=-12803354;color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=19};
plus9={cls="plus";text="危险按钮";left=525;top=108;right=648;bottom=158;bgcolor=-9671435;color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=20}
)
/*}}*/
import win.ui.simpleWindow2;
win.ui.simpleWindow2(winform)
import win.ui.css;
css = win.ui.css();
//bkplus,设置固定边距为左，上，下。plus设置固定边距左，上
//文本垂直设置为底对齐，下边距10,文本颜色为白色(按实际修改)
//字体图标，下边距为20，图标颜色为白色(按实际修改)
var nav = win.ui.tabs( //转为选项卡形式
winform.plus28,
winform.plus29
);
//可以一次性设置样式,设置导航样式
nav.skin(css.navigation)
nav.selIndex = 1; //设置默认选项
winform.plus29.oncommand = function( id,event ){
process.openUrl("https://gitee.com/wengjianhua/aardio")
}
//图标按钮,border={radius=30}
winform.plus.skin(css.primary)
winform.plus2.skin(css.success)
winform.plus3.skin(css.warning)
winform.plus4.skin(css.danger)
winform.plus5.skin(css.info)
winform.plus6.skin(css.primary)
winform.plus7.skin(css.success)
winform.plus8.skin(css.warning)
winform.plus9.skin(css.danger)
winform.plus10.skin(css.info)
//图标按钮,border={radius=-1}
winform.plus11.skin(css.primary)
winform.plus12.skin(css.success)
winform.plus13.skin(css.warning)
winform.plus14.skin(css.danger)
winform.plus15.skin(css.info)
//加入旋转动画
css.rotate(winform.plus11)
css.rotate(winform.plus12)
css.rotate(winform.plus13)
css.rotate(winform.plus14)
css.rotate(winform.plus15)
//点击效果
winform.plus17.skin(css.primary)
css.click(winform.plus17,0.95)
winform.plus16.skin(css.success)
winform.plus16.disabledText = {
'\uF254';
'\uF251';
'\uF252';
'\uF253';
'\uF250';
text = " 请稍候"
};
//开关铵钮
css.switch(winform.plus18)
css.switch(winform.plus19, , css.green, css.yellow)
css.switch(winform.plus20, , css.red, css.green)
css.switch(winform.plus21, , css.yellow, css.red)
//复选框，可在设计视图设置字体颜色
css.checkbox(winform.plus30)
//第二参数为tru,为圆形边框
css.checkbox(winform.plus31,true,"复选框2")
//单选框，可在设计视图设置字体颜色
//注意包含单选框的groupbox控件文本不能跟groupbox控件文本相同，作用是用来分组的
winform.group() //必须先设置所有groupbox下控件为子控件
css.radio(winform.plus32)
css.radio(winform.plus33,,"单选框2")
css.radio(winform.plus34,,"单选框3")
winform.plus32.checked = true //设置第一个为勾选状态
//加入点击效果
for(i=32;34;1){
css.click(winform["plus"+i]) //所有单选框加入点击效果
}
//分组2，第二参数为true, checked为圆形勾选样式
css.radio(winform.plus35,true,"单选框4")
css.radio(winform.plus36,true,"单选框5")
css.radio(winform.plus37,true,"单选框6")
winform.plus36.checked = true //设置第二个为勾选状态
//单选框响应事件
for(i=35;37;1){
winform["plus"+i].oncommand = function(id,event){
if (owner.checked) winform.msgbox(owner.text)
}
}
//进度条
css.progress(winform.plus22)
css.progress(winform.plus25, , , css.green)
//圆环进度条
winform.plus23.smoothingMode = true
css.pieProgress(winform.plus23, , , css.yellow)
winform.plus24.skin(css.danger)
winform.plus24.oncommand = function(id, event) {
for (i = 1; 100; 1) {
//设置进度条百分比
css.setProgressPercentage(winform.plus22, i)
css.setProgressPercentage(winform.plus25, i)
winform.plus23.progressPercentage = i
win.delay(10)
}
}
//简单列表框，最多显示10个，多个建议用标准控件listbox
import web.rest.jsonLiteClient;
var http = web.rest.jsonLiteClient();
var suggestion = http.api("http://suggestion.baidu.com/su?cb=&wd={0}") //{0}会替换为请求关键字并以UTF8编码
var result = suggestion["aardio"].get();
//result.s是一个table,模板至少两个plus,边框在设计视图调，默认边框（左1，右1，下1)
listbox = css.listbox(result.s,winform.listItem,winform.listItem2)
// listbox.skin(css.dark) 可用skin函数换肤
listbox.onSelchange = function(idx,strip,form){
winform.msgbox(strip.text,idx)
}
css.trackbar(winform.plus38)
/*文本框{{*/
//无图标文本框
css.textbox(winform.plus39)
//有图标文本框,字体大小,颜色,密码文本可设计视图设置
css.textbox(winform.plus40,'\uF2A8')
//点击图标事件
winform.plus40.oncommand = function( id,event ){
if (owner.iconText = '\uF2A8') {
owner.iconText = '\uF06E' //更换图标
winform.plus40.editBox.passwordChar = null //取消隐藏文本
}
else {
owner.iconText = '\uF2A8'
winform.plus40.editBox.passwordChar = "*" //指定隐藏文本字符
}
winform.plus40.redraw(); //刷新一下，不然会有重叠感
}
/*}}*/
// winform.plus38.progressPos 获取值跟进度条一样
/*下拉按钮{{*/
//设置为下拉按钮
menu = css.dropdown(winform.plus26,,,winform.menuItem1, winform.menuItem2, winform.menuItem3)
//设置下拉列表样式,风格由自己
winform.menuItem1.skin(css.success)
winform.menuItem2.skin(css.warning)
winform.menuItem3.skin(css.danger)
// 用户点选菜单项触发此事件,strip参数是点选的控件
menu.onOk = function(strip) {
winform.msgbox(strip.text)
}
/*}}*/
/*下拉组合框{{*/
//设置下拉列表样式,风格由自己
winform.menuItem4.skin(css.success)
winform.menuItem5.skin(css.success)
winform.menuItem6.skin(css.success)
//需要边框可在设计视图设置
css.combobox(winform.plus27,,,winform.menuItem4, winform.menuItem5, winform.menuItem6)
//改变文本框字体颜色RGB,默认是黑色
winform.plus27.editBox.color = 0xff0000;
/*}}*/
winform.show();
win.loopMessage();整个打包，包括库源码：
7 个回复 | 最后更新于 2022-05-16
登录后方可回帖
感谢分享，很漂亮，赞