plus控件仿element的样式库
By
风行者
at 2022-05-13 • 2人收藏 • 1492人看过
使用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
登录后方可回帖
感谢分享,很漂亮,赞