USART HMI 资料中心

官方技术交流QQ群:916560014

站点工具


5.控件详解:7.复选框控件

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
5.控件详解:7.复选框控件 [2020/06/24 10:17]
tjcqiu
5.控件详解:7.复选框控件 [2020/06/29 14:05] (当前版本)
tjcqiu
行 1: 行 1:
-<h1 style="​white-space:​ normal; text-align: center;">​复选框控件使用说明</​h1><​hr/><​p style="​white-space:​ normal;"><​br/></​p><​table><​tbody><​tr class="​firstRow"><​td width="​181"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​名称</​td><​td width="​151"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​操作</​td><​td width="​90"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​版本</​td><​td width="​133"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​日期<​br/></​td><​td valign="​middle"​ colspan="​1"​ rowspan="​1"​ width="​275"​ align="​center"​ style="​word-break:​ break-all;">​说明</​td><​td valign="​middle"​ colspan="​1"​ rowspan="​1"​ align="​center"​ width="​166"​ style="​word-break:​ break-all;">​编辑</​td></​tr><​tr><​td width="​181"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​《复选框控件使用说明》</​td><​td width="​151"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​创建中</​td><​td width="​90"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​V1.0</​td><​td width="​133"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​2019-01-17</​td><​td valign="​middle"​ colspan="​1"​ rowspan="​1"​ width="​275"​ align="​center"​ style="​word-break:​ break-all;">​第一次编辑完成,正式发布。</​td><​td valign="​middle"​ colspan="​1"​ rowspan="​1"​ align="​center"​ width="​166"​ style="​word-break:​ break-all;"><​p>​yxj</​p></​td></​tr><​tr><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;"><​span style="​text-align:​ -webkit-center;">​《复选框控件使用说明》</​span><​br/></​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;">​修订</​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;">​V1.1</​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;">​2020-06-22<​br/></​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;"><​span style="​font-family:​ Arial, sans-serif; font-size: 14px; text-align: -webkit-center;​ background-color:​ rgb(255, 255, 255);">​补充本控件中所有属性详解</​span></​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;">​qjj</​td></​tr></​tbody></​table><​p style="​white-space:​ normal;"><​br/></​p><​hr/><​p style="​white-space:​ normal; line-height:​ 1.75em;"><​strong>​【目录】<​br/></​strong></​p><​p style="​white-space:​ normal; line-height:​ 1.75em;"><​strong>​一、<​a href="#​r0_1"​ target="​_self">​复选框控件-概述</​a></​strong></​p><​p style="​white-space:​ normal; line-height:​ 1.75em;"><​strong>​二、<​a href="#​r0_2"​ target="​_self">​复选框控件-简单使用</​a></​strong></​p><​p style="​white-space:​ normal; line-height:​ 1.75em;"><​strong>​三、<​a href="#​r0_3"​ target="​_self">​复选框控件-属性详解</​a></​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">​3.1、<​a href="#​r0_31"​ target="​_self">​控件属性描述</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">​3.2、<​a href="#​r0_32"​ target="​_self">​控件属性编辑</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 3.2.1、<​a href="#​r0_321"​ target="​_self">​编辑属性</​a>&​nbsp;​ &​nbsp;</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 3.2.2、<​a href="#​r0_322"​ target="​_self">​读属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 3.2.3、<​a href="#​r0_323"​ target="​_self">​写属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">​3.3 、<a href="#​r0_33"​ target="​_self">​属性详解</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &nbsp; 3.3.1、<​a href="#​r0_331"​ target="​_self">​x,y属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.2、<​a href="#​r0_332"​ target="​_self">​w,h属性</​a><​br/>&​nbsp;​ &nbsp; &nbsp; &nbsp; &nbsp; &​nbsp;<​span style="​text-indent:​ 2em;">&​nbsp;​ 3.3.3、</​span><​a href="#​r0_333"​ target="​_self">​pco属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &nbsp; 3.3.4、<​a href="#​r0_334"​ target="​_self">​bco属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;<​span style="​text-indent:​ 2em;">&​nbsp;​3.3.5、</​span><​a href="#​r0_335"​ target="​_self">​time属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.6、<​a href="#​r0_336"​ target="​_self">​first属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.7、<​a href="#​r0_337"​ target="​_self">​effect属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.8、<​a href="#​r0_338"​ target="​_self">​aph属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.9、<​a href="#​r0_339"​ target="​_self">​drag属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.10、<​a href="#​r0_3310"​ target="​_self">​vscope属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.11、<​a href="#​r0_3311"​ target="​_self">​objname属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.12、<​a href="#​r0_3312"​ target="​_self">​id属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.13、<​a href="#​r0_3313"​ target="​_self">​type属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​ 3.3.14、<​a href="#​sanshisi"​ target="​_self">​val属性</​a><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​ 3.3.15、<​a href="#​sansanshiwu"​ target="​_self">​disup属性</​a><​br/></​p><​p style="​text-indent:​ 0em; white-space:​ normal;"><​strong>​四、<​a href="#​r0_4"​ target="​_self">​复选框控件-使用详解</​a></​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​4.1、<​a href="#​r0_41"​ target="​_self">​在页面上新建复选框控件</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​4.2、<​a href="#​r0_42"​ target="​_self">​复选框控件外观调整</​a></​p><​hr/><​h3 style="​white-space:​ normal;"><​a name="​r0_1"></​a>​一、复选框控件-概述<​br/></​h3><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​1.1、复选框控件是串口屏诸多功能控件里面的其中一个。</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​1.2、用于人机交互中的客户选择和状态显示</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​1.3、在《USART HMI》软件左侧工具箱里面,位置如下图所示。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190316/​1552699432319898.png"​ title="​1552699432319898.png"​ alt="​image.png"/></​p><​hr/><​h3 style="​white-space:​ normal;"><​a name="​r0_2"></​a>​二、复选框控件-简单使用<​br/></​h3><​p>&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​ &​nbsp;<​strong>​参考单选框控件</​strong><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​用单选框控件,做<​span style="​text-indent:​ 2em;">​一个选项工程(如下图所示)。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190316/​1552699802875481.png"​ title="​1552699802875481.png"​ alt="​image.png"/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​如果没有在控件的事件里写逻辑的话,单选框控件和复选框控件的用法是一样的,只是外形不同,要实现单选功能,就要在点击任一单选框控件的时候,清零其他单选框控件的val值,val值是记录被选中的状态,选中val=1,不选val=0,如下图<​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​span style="​text-indent:​ 2em;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190318/​1552876746112446.png"​ title="​1552876746112446.png"​ alt="​image.png"/></​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​span style="​text-indent:​ 2em;"><​br/></​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​br/></​p><​h3 style="​white-space:​ normal;"><​strong><​a name="​r0_3"></​a>​三、复选框控件-属性详解</​strong></​h3><​p style="​white-space:​ normal; text-indent:​ 2em;">​串口屏所有控件操作的实质都是对属性的修改。单选框控件具有的属性如下表所示。<​strong><​br/></​strong></​p><​p style="​white-space:​ normal; text-align: center;"><​img src="/​dokuwiki/​ueditor/​php/​upload/​image/​20200622/​1592794313432254.png"​ title="​1592794313432254.png"​ alt="​复选框.png"/></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​strong><​a name="​r0_31"></​a>​3.1、控件属性描述</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​如下图所示,当鼠标选中对应属性时,会在属性窗口的最下方出现该属性的详细描述信息。</​p><​p style="​white-space:​ normal; text-indent:​ 2em; text-align: center;"><​img src="/​dokuwiki/​ueditor/​php/​upload/​image/​20200622/​1592794424598270.png"​ title="​1592794424598270.png"​ alt="​复选框.png"​ width="​210"​ height="​410"/></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​strong><​a name="​r0_32"></​a>​3.2、控件属性编辑</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_321"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.2.1、编辑属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 用户可以随时调整、编辑列表中的属性参数。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​注意:type和id属性由开发环境指定,用户不可修改。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_322"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.2.2、读属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 如上图所示的控件属性列表,可以在设备运行中随时读取。</​p><​pre class="​brush:​cpp;​toolbar:​false">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​sys0=c0.id&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;//​将控件的id号赋值给sys0变量+<h1 style="​white-space:​ normal; text-align: center;">​复选框控件使用说明</​h1><​hr/><​p style="​white-space:​ normal;"><​br/></​p><​table><​tbody><​tr class="​firstRow"><​td width="​181"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​名称</​td><​td width="​151"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​操作</​td><​td width="​90"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​版本</​td><​td width="​133"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​日期<​br/></​td><​td valign="​middle"​ colspan="​1"​ rowspan="​1"​ width="​275"​ align="​center"​ style="​word-break:​ break-all;">​说明</​td><​td valign="​middle"​ colspan="​1"​ rowspan="​1"​ align="​center"​ width="​166"​ style="​word-break:​ break-all;">​编辑</​td></​tr><​tr><​td width="​181"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​《复选框控件使用说明》</​td><​td width="​151"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​创建中</​td><​td width="​90"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​V1.0</​td><​td width="​133"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all;">​2019-01-17</​td><​td valign="​middle"​ colspan="​1"​ rowspan="​1"​ width="​275"​ align="​center"​ style="​word-break:​ break-all;">​第一次编辑完成,正式发布。</​td><​td valign="​middle"​ colspan="​1"​ rowspan="​1"​ align="​center"​ width="​166"​ style="​word-break:​ break-all;"><​p>​yxj</​p></​td></​tr><​tr><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;"><​span style="​text-align:​ -webkit-center;">​《复选框控件使用说明》</​span><​br/></​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;">​修订</​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;">​V1.1</​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;">​2020-06-22<​br/></​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;"><​span style="​font-family:​ Arial, sans-serif; font-size: 14px; text-align: -webkit-center;​ background-color:​ rgb(255, 255, 255);">​补充本控件中所有属性详解</​span></​td><​td valign="​middle"​ align="​center"​ colspan="​1"​ rowspan="​1"​ style="​word-break:​ break-all;">​qjj</​td></​tr></​tbody></​table><​p style="​white-space:​ normal;"><​br/></​p><​hr/><​p style="​white-space:​ normal; line-height:​ 1.75em;"><​strong>​【目录】<​br/></​strong></​p><​p style="​white-space:​ normal; line-height:​ 1.75em;"><​strong>​一、<​a href="#​r0_1"​ target="​_self">​复选框控件-概述</​a></​strong></​p><​p style="​white-space:​ normal; line-height:​ 1.75em;"><​strong>​二、<​a href="#​r0_2"​ target="​_self">​复选框控件-简单使用</​a></​strong></​p><​p style="​white-space:​ normal; line-height:​ 1.75em;"><​strong>​三、<​a href="#​r0_3"​ target="​_self">​复选框控件-属性详解</​a></​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">​3.1、<​a href="#​r0_31"​ target="​_self">​控件属性描述</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">​3.2、<​a href="#​r0_32"​ target="​_self">​控件属性编辑</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 3.2.1、<​a href="#​r0_321"​ target="​_self">​编辑属性</​a>&​nbsp;​ &​nbsp;</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 3.2.2、<​a href="#​r0_322"​ target="​_self">​读属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 3.2.3、<​a href="#​r0_323"​ target="​_self">​写属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">​3.3 、<a href="#​r0_33"​ target="​_self">​属性详解</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &nbsp; 3.3.1、<​a href="#​r0_331"​ target="​_self">​x,y属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.2、<​a href="#​r0_332"​ target="​_self">​w,h属性</​a><​br/>&​nbsp;​ &nbsp; &nbsp; &nbsp; &nbsp; &​nbsp;<​span style="​text-indent:​ 2em;">&​nbsp;​ 3.3.3、</​span><​a href="#​r0_333"​ target="​_self">​pco属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &nbsp; 3.3.4、<​a href="#​r0_334"​ target="​_self">​bco属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;<​span style="​text-indent:​ 2em;">&​nbsp;​3.3.5、</​span><​a href="#​r0_335"​ target="​_self">​time属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.6、<​a href="#​r0_336"​ target="​_self">​first属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.7、<​a href="#​r0_337"​ target="​_self">​effect属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.8、<​a href="#​r0_338"​ target="​_self">​aph属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.9、<​a href="#​r0_339"​ target="​_self">​drag属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.10、<​a href="#​r0_3310"​ target="​_self">​vscope属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.11、<​a href="#​r0_3311"​ target="​_self">​objname属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.12、<​a href="#​r0_3312"​ target="​_self">​id属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​3.3.13、<​a href="#​r0_3313"​ target="​_self">​type属性</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​ 3.3.14、<​a href="#​sanshisi"​ target="​_self">​val属性</​a><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.5em;">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​ 3.3.15、<​a href="#​sansanshiwu"​ target="​_self">​disup属性</​a><​br/​></​p><​p style="​white-space:​ normal; padding: 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; text-indent:​ 2em; line-height:​ 1.5em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &nbsp; &​nbsp;​3.3.16、</​span><​a href="#​sansanshiliu"​ target="​_self"><​span style="​font-size:​ 16px;">​borderc属性</​span></​a></​p><​p style="​white-space:​ normal; padding: 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; text-indent:​ 2em; line-height:​ 1.5em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &nbsp; &​nbsp;​3.3.17、</​span><​a href="#​sansanshiqi"​ target="​_self"><​span style="​font-size:​ 16px;">​borderw属性</​span></​a></​p><​p style="​text-indent:​ 0em; white-space:​ normal;"><​strong>​四、<​a href="#​r0_4"​ target="​_self">​复选框控件-使用详解</​a></​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​4.1、<​a href="#​r0_41"​ target="​_self">​在页面上新建复选框控件</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​4.2、<​a href="#​r0_42"​ target="​_self">​复选框控件外观调整</​a></​p><​hr/><​h3 style="​white-space:​ normal;"><​a name="​r0_1"></​a>​一、复选框控件-概述<​br/></​h3><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​1.1、复选框控件是串口屏诸多功能控件里面的其中一个。</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​1.2、用于人机交互中的客户选择和状态显示</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​1.3、在《USART HMI》软件左侧工具箱里面,位置如下图所示。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190316/​1552699432319898.png"​ title="​1552699432319898.png"​ alt="​image.png"/></​p><​hr/><​h3 style="​white-space:​ normal;"><​a name="​r0_2"></​a>​二、复选框控件-简单使用<​br/></​h3><​p>&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​ &​nbsp;<​strong>​参考单选框控件</​strong><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​用单选框控件,做<​span style="​text-indent:​ 2em;">​一个选项工程(如下图所示)。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190316/​1552699802875481.png"​ title="​1552699802875481.png"​ alt="​image.png"/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​如果没有在控件的事件里写逻辑的话,单选框控件和复选框控件的用法是一样的,只是外形不同,要实现单选功能,就要在点击任一单选框控件的时候,清零其他单选框控件的val值,val值是记录被选中的状态,选中val=1,不选val=0,如下图<​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​span style="​text-indent:​ 2em;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190318/​1552876746112446.png"​ title="​1552876746112446.png"​ alt="​image.png"/></​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​span style="​text-indent:​ 2em;"><​br/></​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​br/></​p><​h3 style="​white-space:​ normal;"><​strong><​a name="​r0_3"></​a>​三、复选框控件-属性详解</​strong></​h3><​p style="​white-space:​ normal; text-indent:​ 2em;">​串口屏所有控件操作的实质都是对属性的修改。单选框控件具有的属性如下表所示。<​strong><​br/></​strong></​p><​p style="​white-space:​ normal; text-align: center;"><​img src="/​dokuwiki/​ueditor/​php/​upload/​image/​20200622/​1592794313432254.png"​ title="​1592794313432254.png"​ alt="​复选框.png"/></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​strong><​a name="​r0_31"></​a>​3.1、控件属性描述</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​如下图所示,当鼠标选中对应属性时,会在属性窗口的最下方出现该属性的详细描述信息。</​p><​p style="​white-space:​ normal; text-indent:​ 2em; text-align: center;"><​img src="/​dokuwiki/​ueditor/​php/​upload/​image/​20200622/​1592794424598270.png"​ title="​1592794424598270.png"​ alt="​复选框.png"​ width="​210"​ height="​410"/></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​strong><​a name="​r0_32"></​a>​3.2、控件属性编辑</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_321"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.2.1、编辑属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 用户可以随时调整、编辑列表中的属性参数。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​注意:type和id属性由开发环境指定,用户不可修改。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_322"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.2.2、读属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 如上图所示的控件属性列表,可以在设备运行中随时读取。</​p><​pre class="​brush:​cpp;​toolbar:​false">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​sys0=c0.id&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;//​将控件的id号赋值给sys0变量
 &​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​c0.x+=10&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;//​将控件在屏幕上的位置向右移动10个像素点。 &​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​c0.x+=10&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;//​将控件在屏幕上的位置向右移动10个像素点。
-&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​prints&​nbsp;​c0.val,​0&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;//​将c0的状态从串口发送出去。</​pre><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​注意:objname属性不可以读取。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_323"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.2.3、写属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 所有绿色控件可以在运行中实时修改。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​注意:因产品系列不同,属性的写权限也不完全相同。比如X系列可以在运行该过程中修改x,y属性。但是T0,​K0系列不能在运行过程中修改x,y属性!</​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​strong><​a name="​r0_33"></​a>​3.3 、属性详解</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;<​a name="​r0_331"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.1、x,y属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​x,y属性描述控件在屏幕上的像素坐标位置。以屏幕左上角为像素坐标原点(x=0,​y=0)。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​T0,​K0系列产品,x,y属性只能从:0--最大分辨率。不能超出屏幕显示区域。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​X系列产品,x,y属性可以超出屏幕坐标范围(-6000~+6000),但是超出屏幕将被裁减,不会显示出来。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​技巧:如果想做一个控件,但是不想让用户看到,触摸到。可以把该控件放在屏幕显示区域以外。开发人员使用的时候,使用<​a href="​http://​wiki.tjc1688.com/​doku.php?​id=6.%E6%8C%87%E4%BB%A4%E9%9B%86:​1.%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4%E9%9B%86#​click"​ target="​_self">​click</​a>​指令,</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">​或者绑定<​a href="​http://​wiki.tjc1688.com/​doku.php?​id=6.%E6%8C%87%E4%BB%A4%E9%9B%86:​1.%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4%E9%9B%86#​cfgpio"​ target="​_self">​用户IO</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_332"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">&​nbsp;​3.3.2、w,h属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​w,h属性描述控件在屏幕上宽度和高度(像素大小为单位)。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​T0,​K0系列产品,w,h属性只能从:0--最大分辨率。不能超出屏幕显示区域。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​X系列产品,x+w,y+h的值可以超出屏幕坐标范围,但是超出屏幕将被裁减,不会显示出来。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;<​span style="​text-indent:​ 2em;">&​nbsp;</​span><​a name="​r0_333"></​a><​span style="​text-indent:​ 2em;">&​nbsp;</​span><​span style="​text-indent:​ 2em; border: 1px solid rgb(0, 0, 0);">​3.3.3、pco属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​pco属性。控件的字体颜色属性,RGB565的颜色值。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_334"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.4、bco属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​bco属性。控件背景色熟悉,RGB565的颜色值。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;<​span style="​text-indent:​ 2em;">&​nbsp;</​span><​a name="​r0_335"></​a><​span style="​text-indent:​ 2em;">&​nbsp;</​span><​span style="​text-indent:​ 2em; border: 1px solid rgb(0, 0, 0);">​3.3.5、time属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;​ time属性。控件特效执行时间属性。仅X系列支持,且effect设置不为0以后才存在该属性。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​ 当设置了控件的加载特效以后,控件在time的时间内,以设置的特效方式飞到控件所在屏幕的坐标位置。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_336"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.6、first属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​ first属性。控件加载特效的优先级属性。仅X系列支持,且effect设置不为0以后才存在该属性。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;​ first可设置的值为0-100。支持多个有特效的控件为同一级别优先级。同一优先级的控件,将在同时被加载到屏幕上显示。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;​ 不同优先级的优先级中,将根据设置值从大到小依次完成加载。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_337"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.7、effect属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​effect属性。控件加载特效属性。目前一共支持9种效果。仅X系列支持该属性。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​0-立即加载;​1-上边飞入;​2-下边飞入;​3-左边飞入;​4-右边飞入;​5-左上角飞入;​6-右上角飞入;​7-左下角飞入;​8-右下角飞入</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_338"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.8、aph属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​aph属性。控件半透明属性。仅X系列支持。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​aph可设置的值范围为0-127 。为0时控件将全透明(效果为不显示),为127时全显示(没有半透明效果);</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_339"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.9、drag属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;​ drag属性。控件运行过程中是否支持拖动属性。仅X系列支持。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_3310"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.10、vscope属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​ vscope属性。控件内存占用属性。控件支持私有和全局属性。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​ 当设置为全局时,控件分配的内存在所有页面都可以访问。离开当前页面后,控件属性数据也不会丢失。缺点是,占用系统总内存。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_3311"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.11、objname属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​objname属性。控件名称属性。该属性在运行中不能获取。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_3312"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.12、id属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​id属性。控件id是每个控件在当前页面的唯一标识号。由系统分配,不可修改。<​span style="​color:​ rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; text-indent:​ 28px; background-color:​ rgb(255, 255, 255);">​(可通过软件左上角置顶置底间接修改)</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_3313"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.13、type属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​type属性。控件类型属性。由系统分别固定数据,比如复选框控件属性为56。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​sanshisi"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.14、val属性</​span><​span style="​text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​val属性。当前状态(0或1)。选中val=1,不选val=0。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;"></​span></​p><​p style="​padding:​ 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; white-space:​ normal; text-indent:​ 2em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;</​span><​a name="​sansanshiwu"></​a><​span style="​font-size:​ 16px;">&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0); font-size: 16px; text-indent:​ 32px;">​3.3.15、disup属性</​span></​span></​p><​p style="​padding:​ 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; white-space:​ normal; text-indent:​ 2em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &​nbsp;​disup属性。产生拖动后是否禁用弹起事件:​0-否;​1-是。默认为否,即拖动的时候是会触发弹起事件。<​span style="​font-size:​ 16px; text-indent:​ 32px;">​仅当drag=是时,才存在该属性</​span></​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​br/></​p><​h3 style="​white-space:​ normal;"><​a name="​r0_4"></​a>​四、复选框控件-使用详解</​h3><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​a name="​r0_41"></​a><​strong><​span style="​color:​ rgb(255, 255, 255); background-color:​ rgb(0, 0, 0);">​4.1</​span></​strong>​、<​strong>​在页面上新建复选框控件</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​strong><​img src="/​dokuwiki/​ueditor/​php/​upload/​image/​20200622/​1592794837116357.png"​ title="​1592794837116357.png"​ alt="​复选框.png"/></​strong></​p><​table align="​center"><​tbody><​tr class="​firstRow"><​td valign="​middle"​ align="​center"​ style="​border-color:​ rgb(255, 255, 255); word-break: break-all;"><​p style="​text-indent:​ 0em;"><​span style="​color:​ rgb(127, 127, 127);">​1、打开一个新的空白界面▲</​span></​p></​td><​td valign="​middle"​ align="​center"​ style="​border-color:​ rgb(255, 255, 255); word-break: break-all;"><​span style="​color:​ rgb(127, 127, 127);">​2、点击左侧&​lt;​工具箱&​gt;​里面的&​lt;​复选框&​gt;​按钮,当前页面出现一个c0复选框▲</​span></​td></​tr></​tbody></​table><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​a name="​r0_42"></​a><​span style="​color:​ rgb(255, 255, 255); background-color:​ rgb(0, 0, 0);"><​strong>​4.2</​strong></​span><​strong>​、复选框控件外观调整</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​上一步我们创建了一个复选框控件,现在我们编辑控件的外观(显示效果)。</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​span style="​border:​ 1px solid rgb(0, 0, 0);"><​a name="​r0_421"></​a>​4.2.1调整位置和尺寸</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​strong>​参考文本控件</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​将文本控件移显示区中心位置,并调大到能放下。</​p><​table><​tbody><​tr class="​firstRow"><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127); color: rgb(255, 255, 255);">​I.</​span>​新添加上“文本控件”预览</​td><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​font-family:​ &​quot;​comic sans ms&​quot;;​ color: rgb(255, 255, 255); background-color:​ rgb(127, 127, 127);">​II.</​span>​摆放到指定位置并调整到需要尺寸预览</​td><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127); color: rgb(255, 255, 255);">​III.</​span>​操作说明</​td></​tr><​tr><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547619678818808.png"​ title="​1547619678818808.png"​ alt="​image.png"​ width="​351"​ height="​213"/></​td><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547620164409103.png"​ title="​1547620164409103.png"​ alt="​image.png"​ width="​354"​ height="​210"/></​td><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​p style="​line-height:​ 1.75em;">​▷移动位置:鼠标选中控件,拖到需要摆放的位置。</​p><​p style="​line-height:​ 1.75em;">​▷调整大小:鼠标指针选中控件的任意一条边,或任意一个角,拖动即可调整大小。</​p><​p style="​line-height:​ 1.75em;"><​span style="​border:​ 1px solid rgb(0, 0, 0);">​其他方法:如果不想使用鼠标,也可以通过修改属性列表中的“x、y坐标”来调整位置,修改属性列表中的“宽度和高度”来调整大小。</​span></​p></​td></​tr></​tbody></​table><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">&​nbsp;<​a name="​r0_422"></​a><​span style="​border:​ 1px solid rgb(0, 0, 0);">​4.2.2背景单色填充</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​strong>​参考文本控件</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​文本控件背景显示指定的“单一颜色”,(例:显示蓝色)。</​p><​table><​tbody><​tr class="​firstRow"><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​color:​ rgb(255, 255, 255); font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127);">​I.</​span>​显示预览</​td><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​color:​ rgb(255, 255, 255); font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127);">​II.</​span>​属性设置</​td><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​color:​ rgb(255, 255, 255); font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127);">​III.</​span>​操作说明</​td></​tr><​tr><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547621709231597.png"​ title="​1547621709231597.png"​ alt="​image.png"​ width="​345"​ height="​222"/></​td><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547622964554034.png"​ title="​1547622964554034.png"​ alt="​image.png"​ width="​150"​ height="​191"/>&​nbsp;<​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547623186213265.png"​ title="​1547623186213265.png"​ alt="​image.png"​ width="​147"​ height="​145"/>&​nbsp;<​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547623463777110.png"​ title="​1547623463777110.png"​ alt="​image.png"​ width="​301"​ height="​245"/></​td><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​p style="​line-height:​ 1.75em;">​▷鼠标单击选中控件;</​p><​p style="​line-height:​ 1.75em;">​▷拉动属性列表滑块 → 找到背景色属性“左图①所示”→ 点击颜色选择框“左图②所示”→ 点击选择更多“左图③所示”,软件弹出配色对话框,点击蓝色“左图④所示”→ 点击确定“左图⑤所示”。即完成此文本控件的背景色修改成蓝色。</​p><​p style="​line-height:​ 1.75em;"><​span style="​border:​ 1px solid rgb(0, 0, 0);">​其他:控件单色背景填充时还能设置边框效果,根据属性列表里面,相应的属性项进行设置。</​span></​p><​p><​br/></​p><​p>​注:</​p><​p>&​nbsp;​ &nbsp; &nbsp; &​nbsp;​当颜色被使用过后,下次点击选择颜色的时候,使用过的颜色会直接出现在“选择颜色”的下拉选项中。</​p><​p><​br/></​p><​p>&​nbsp;​ &nbsp; &nbsp; &​nbsp;​控件属性如果不清楚怎么使用,请查阅“认识控件中的【<​a href="​http://​wiki.tjc1688.com/​doku.php?​id=5.%E6%8E%A7%E4%BB%B6%E8%AF%A6%E8%A7%A3:​1.%E8%AE%A4%E8%AF%86%E6%8E%A7%E4%BB%B6#​san"​ target="​_self"​ style="​border:​ none;">​控件属性讲解</​a>​】”</​p><​p><​br/></​p></​td></​tr></​tbody></​table><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​前景色填充和背景色填充操作一样,只是更改的变量是pco。</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​span style="​border:​ 1px solid rgb(0, 0, 0);"><​a name="​r0_423"></​a>​4.2.3背景透明填充</​span><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​更改aph值,实现控件的透明度</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190318/​1552897607406650.png"​ title="​1552897607406650.png"​ alt="​image.png"/></​p><​p style="​white-space:​ normal;"><​br/></​p><​p><​br/></​p>​+&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​prints&​nbsp;​c0.val,​0&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;//​将c0的状态从串口发送出去。</​pre><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​注意:objname属性不可以读取。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_323"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.2.3、写属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;">&​nbsp;​ &nbsp; &nbsp; 所有绿色控件可以在运行中实时修改。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​注意:因产品系列不同,属性的写权限也不完全相同。比如X系列可以在运行该过程中修改x,y属性。但是T0,​K0系列不能在运行过程中修改x,y属性!</​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​strong><​a name="​r0_33"></​a>​3.3 、属性详解</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;<​a name="​r0_331"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.1、x,y属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​x,y属性描述控件在屏幕上的像素坐标位置。以屏幕左上角为像素坐标原点(x=0,​y=0)。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​T0,​K0系列产品,x,y属性只能从:0--最大分辨率。不能超出屏幕显示区域。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​X系列产品,x,y属性可以超出屏幕坐标范围(-6000~+6000),但是超出屏幕将被裁减,不会显示出来。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​技巧:如果想做一个控件,但是不想让用户看到,触摸到。可以把该控件放在屏幕显示区域以外。开发人员使用的时候,使用<​a href="​http://​wiki.tjc1688.com/​doku.php?​id=6.%E6%8C%87%E4%BB%A4%E9%9B%86:​1.%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4%E9%9B%86#​click"​ target="​_self">​click</​a>​指令,</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">​或者绑定<​a href="​http://​wiki.tjc1688.com/​doku.php?​id=6.%E6%8C%87%E4%BB%A4%E9%9B%86:​1.%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4%E9%9B%86#​cfgpio"​ target="​_self">​用户IO</​a></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_332"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">&​nbsp;​3.3.2、w,h属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​w,h属性描述控件在屏幕上宽度和高度(像素大小为单位)。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​T0,​K0系列产品,w,h属性只能从:0--最大分辨率。不能超出屏幕显示区域。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​X系列产品,x+w,y+h的值可以超出屏幕坐标范围,但是超出屏幕将被裁减,不会显示出来。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;<​span style="​text-indent:​ 2em;">&​nbsp;</​span><​a name="​r0_333"></​a><​span style="​text-indent:​ 2em;">&​nbsp;</​span><​span style="​text-indent:​ 2em; border: 1px solid rgb(0, 0, 0);">​3.3.3、pco属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​pco属性。控件的字体颜色属性,RGB565的颜色值。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_334"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.4、bco属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​bco属性。控件背景色熟悉,RGB565的颜色值。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;<​span style="​text-indent:​ 2em;">&​nbsp;</​span><​a name="​r0_335"></​a><​span style="​text-indent:​ 2em;">&​nbsp;</​span><​span style="​text-indent:​ 2em; border: 1px solid rgb(0, 0, 0);">​3.3.5、time属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;​ time属性。控件特效执行时间属性。仅X系列支持,且effect设置不为0以后才存在该属性。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​ 当设置了控件的加载特效以后,控件在time的时间内,以设置的特效方式飞到控件所在屏幕的坐标位置。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_336"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.6、first属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​ first属性。控件加载特效的优先级属性。仅X系列支持,且effect设置不为0以后才存在该属性。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;​ first可设置的值为0-100。支持多个有特效的控件为同一级别优先级。同一优先级的控件,将在同时被加载到屏幕上显示。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;​ 不同优先级的优先级中,将根据设置值从大到小依次完成加载。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_337"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.7、effect属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​effect属性。控件加载特效属性。目前一共支持9种效果。仅X系列支持该属性。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​0-立即加载;​1-上边飞入;​2-下边飞入;​3-左边飞入;​4-右边飞入;​5-左上角飞入;​6-右上角飞入;​7-左下角飞入;​8-右下角飞入</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_338"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.8、aph属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​aph属性。控件半透明属性。仅X系列支持。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​aph可设置的值范围为0-127 。为0时控件将全透明(效果为不显示),为127时全显示(没有半透明效果);</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_339"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.9、drag属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;&​nbsp;​ drag属性。控件运行过程中是否支持拖动属性。仅X系列支持。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_3310"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.10、vscope属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​ vscope属性。控件内存占用属性。控件支持私有和全局属性。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​ 当设置为全局时,控件分配的内存在所有页面都可以访问。离开当前页面后,控件属性数据也不会丢失。缺点是,占用系统总内存。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_3311"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.11、objname属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​objname属性。控件名称属性。该属性在运行中不能获取。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_3312"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.12、id属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​id属性。控件id是每个控件在当前页面的唯一标识号。由系统分配,不可修改。<​span style="​color:​ rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; text-indent:​ 28px; background-color:​ rgb(255, 255, 255);">​(可通过软件左上角置顶置底间接修改)</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​r0_3313"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.13、type属性</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​type属性。控件类型属性。由系统分别固定数据,比如复选框控件属性为56。</​p><​p style="​white-space:​ normal; text-indent:​ 2em;">&​nbsp;​ &nbsp; &​nbsp;<​a name="​sanshisi"></​a>&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0);">​3.3.14、val属性</​span><​span style="​text-indent:​ 2em;">&​nbsp;​ &​nbsp;&​nbsp;</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;">&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​val属性。当前状态(0或1)。选中val=1,不选val=0。</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em;"><​span style="​text-indent:​ 2em;"></​span></​p><​p style="​padding:​ 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; white-space:​ normal; text-indent:​ 2em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;</​span><​a name="​sansanshiwu"></​a><​span style="​font-size:​ 16px;">&​nbsp;<​span style="​border:​ 1px solid rgb(0, 0, 0); font-size: 16px; text-indent:​ 32px;">​3.3.15、disup属性</​span></​span></​p><​p style="​padding:​ 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; white-space:​ normal; text-indent:​ 2em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &​nbsp;​disup属性。产生拖动后是否禁用弹起事件:​0-否;​1-是。默认为否,即拖动的时候是会触发弹起事件。<​span style="​font-size:​ 16px; text-indent:​ 32px;">​仅当drag=是时,才存在该属性</​span></​span></​p><​p style="​white-space:​ normal; padding: 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; text-indent:​ 2em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;</​span><​a name="​sansanshiliu"></​a><​span style="​font-size:​ 16px;">&​nbsp;<​span style="​font-size:​ 16px; border: 1px solid rgb(0, 0, 0);">​3.3.16、borderc属性</​span></​span></​p><​p style="​white-space:​ normal; padding: 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; text-indent:​ 2em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​borderc属性。边框颜色属性。RGB565的颜色值。仅当style=边框时,才存在该属性。</​span></​p><​p style="​white-space:​ normal; padding: 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; text-indent:​ 2em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;</​span><​a name="​sansanshiqi"></​a><​span style="​font-size:​ 16px;">&​nbsp;<​span style="​font-size:​ 16px; border: 1px solid rgb(0, 0, 0);">​3.3.17、borderw属性</​span></​span></​p><​p style="​white-space:​ normal; padding: 0px; color: rgb(51, 51, 51); font-family:​ Arial, sans-serif; font-size: 14px; text-indent:​ 2em;"><​span style="​font-size:​ 16px;">&​nbsp;​ &nbsp; &​nbsp;&​nbsp;​ &nbsp; &​nbsp;&​nbsp;&​nbsp;​borderw属性。边框粗细属性。最大值:​255。仅当style=边框时,才存在该属性。<​/span></​p><​h3 style="​white-space:​ normal;"><​a name="​r0_4"></​a>​四、复选框控件-使用详解</​h3><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​a name="​r0_41"></​a><​strong><​span style="​color:​ rgb(255, 255, 255); background-color:​ rgb(0, 0, 0);">​4.1</​span></​strong>​、<​strong>​在页面上新建复选框控件</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​strong><​img src="/​dokuwiki/​ueditor/​php/​upload/​image/​20200622/​1592794837116357.png"​ title="​1592794837116357.png"​ alt="​复选框.png"/></​strong></​p><​table align="​center"><​tbody><​tr class="​firstRow"><​td valign="​middle"​ align="​center"​ style="​border-color:​ rgb(255, 255, 255); word-break: break-all;"><​p style="​text-indent:​ 0em;"><​span style="​color:​ rgb(127, 127, 127);">​1、打开一个新的空白界面▲</​span></​p></​td><​td valign="​middle"​ align="​center"​ style="​border-color:​ rgb(255, 255, 255); word-break: break-all;"><​span style="​color:​ rgb(127, 127, 127);">​2、点击左侧&​lt;​工具箱&​gt;​里面的&​lt;​复选框&​gt;​按钮,当前页面出现一个c0复选框▲</​span></​td></​tr></​tbody></​table><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​a name="​r0_42"></​a><​span style="​color:​ rgb(255, 255, 255); background-color:​ rgb(0, 0, 0);"><​strong>​4.2</​strong></​span><​strong>​、复选框控件外观调整</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​上一步我们创建了一个复选框控件,现在我们编辑控件的外观(显示效果)。</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​span style="​border:​ 1px solid rgb(0, 0, 0);"><​a name="​r0_421"></​a>​4.2.1调整位置和尺寸</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​strong>​参考文本控件</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​将文本控件移显示区中心位置,并调大到能放下。</​p><​table><​tbody><​tr class="​firstRow"><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127); color: rgb(255, 255, 255);">​I.</​span>​新添加上“文本控件”预览</​td><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​font-family:​ &​quot;​comic sans ms&​quot;;​ color: rgb(255, 255, 255); background-color:​ rgb(127, 127, 127);">​II.</​span>​摆放到指定位置并调整到需要尺寸预览</​td><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127); color: rgb(255, 255, 255);">​III.</​span>​操作说明</​td></​tr><​tr><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547619678818808.png"​ title="​1547619678818808.png"​ alt="​image.png"​ width="​351"​ height="​213"/></​td><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547620164409103.png"​ title="​1547620164409103.png"​ alt="​image.png"​ width="​354"​ height="​210"/></​td><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​p style="​line-height:​ 1.75em;">​▷移动位置:鼠标选中控件,拖到需要摆放的位置。</​p><​p style="​line-height:​ 1.75em;">​▷调整大小:鼠标指针选中控件的任意一条边,或任意一个角,拖动即可调整大小。</​p><​p style="​line-height:​ 1.75em;"><​span style="​border:​ 1px solid rgb(0, 0, 0);">​其他方法:如果不想使用鼠标,也可以通过修改属性列表中的“x、y坐标”来调整位置,修改属性列表中的“宽度和高度”来调整大小。</​span></​p></​td></​tr></​tbody></​table><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">&​nbsp;<​a name="​r0_422"></​a><​span style="​border:​ 1px solid rgb(0, 0, 0);">​4.2.2背景单色填充</​span></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​strong>​参考文本控件</​strong></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​文本控件背景显示指定的“单一颜色”,(例:显示蓝色)。</​p><​table><​tbody><​tr class="​firstRow"><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​color:​ rgb(255, 255, 255); font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127);">​I.</​span>​显示预览</​td><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​color:​ rgb(255, 255, 255); font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127);">​II.</​span>​属性设置</​td><​td width="​354"​ valign="​middle"​ align="​center"​ style="​word-break:​ break-all; background-color:​ rgb(219, 229, 241);"><​span style="​color:​ rgb(255, 255, 255); font-family:​ &​quot;​comic sans ms&​quot;;​ background-color:​ rgb(127, 127, 127);">​III.</​span>​操作说明</​td></​tr><​tr><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547621709231597.png"​ title="​1547621709231597.png"​ alt="​image.png"​ width="​345"​ height="​222"/></​td><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547622964554034.png"​ title="​1547622964554034.png"​ alt="​image.png"​ width="​150"​ height="​191"/>&​nbsp;<​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547623186213265.png"​ title="​1547623186213265.png"​ alt="​image.png"​ width="​147"​ height="​145"/>&​nbsp;<​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190116/​1547623463777110.png"​ title="​1547623463777110.png"​ alt="​image.png"​ width="​301"​ height="​245"/></​td><​td width="​354"​ valign="​top"​ style="​word-break:​ break-all;"><​p style="​line-height:​ 1.75em;">​▷鼠标单击选中控件;</​p><​p style="​line-height:​ 1.75em;">​▷拉动属性列表滑块 → 找到背景色属性“左图①所示”→ 点击颜色选择框“左图②所示”→ 点击选择更多“左图③所示”,软件弹出配色对话框,点击蓝色“左图④所示”→ 点击确定“左图⑤所示”。即完成此文本控件的背景色修改成蓝色。</​p><​p style="​line-height:​ 1.75em;"><​span style="​border:​ 1px solid rgb(0, 0, 0);">​其他:控件单色背景填充时还能设置边框效果,根据属性列表里面,相应的属性项进行设置。</​span></​p><​p><​br/></​p><​p>​注:</​p><​p>&​nbsp;​ &nbsp; &nbsp; &​nbsp;​当颜色被使用过后,下次点击选择颜色的时候,使用过的颜色会直接出现在“选择颜色”的下拉选项中。</​p><​p><​br/></​p><​p>&​nbsp;​ &nbsp; &nbsp; &​nbsp;​控件属性如果不清楚怎么使用,请查阅“认识控件中的【<​a href="​http://​wiki.tjc1688.com/​doku.php?​id=5.%E6%8E%A7%E4%BB%B6%E8%AF%A6%E8%A7%A3:​1.%E8%AE%A4%E8%AF%86%E6%8E%A7%E4%BB%B6#​san"​ target="​_self"​ style="​border:​ none;">​控件属性讲解</​a>​】”</​p><​p><​br/></​p></​td></​tr></​tbody></​table><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​前景色填充和背景色填充操作一样,只是更改的变量是pco。</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​span style="​border:​ 1px solid rgb(0, 0, 0);"><​a name="​r0_423"></​a>​4.2.3背景透明填充</​span><​br/></​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;">​更改aph值,实现控件的透明度</​p><​p style="​white-space:​ normal; text-indent:​ 2em; line-height:​ 1.75em;"><​img src="​http://​wiki.tjc1688.com/​dokuwiki/​ueditor/​php/​upload/​image/​20190318/​1552897607406650.png"​ title="​1552897607406650.png"​ alt="​image.png"/></​p><​p style="​white-space:​ normal;"><​br/></​p><​p><​br/></​p>​
5.控件详解/7.复选框控件.txt · 最后更改: 2020/06/29 14:05 由 tjcqiu        浏览次数:712/2568369(本页/全站)