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;">  3.2.1、<a href="#r0_321" target="_self">编辑属性</a>   </p><p style="white-space: normal; text-indent: 2em;">  3.2.2、<a href="#r0_322" target="_self">读属性</a></p><p style="white-space: normal; text-indent: 2em;">  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;">  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;">    3.3.2、<a href="#r0_332" target="_self">w，h属性</a><br/>   <span style="text-indent: 2em;">  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;">  3.3.4、<a href="#r0_334" target="_self">bco属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">   <span style="text-indent: 2em;"> 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;">    3.3.6、<a href="#r0_336" target="_self">first属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.7、<a href="#r0_337" target="_self">effect属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.8、<a href="#r0_338" target="_self">aph属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.9、<a href="#r0_339" target="_self">drag属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.10、<a href="#r0_3310" target="_self">vscope属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.11、<a href="#r0_3311" target="_self">objname属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.12、<a href="#r0_3312" target="_self">id属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.13、<a href="#r0_3313" target="_self">type属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">      3.3.14、<a href="#sanshisi" target="_self">val属性</a><br/></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">      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>       <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;">    如下图所示，当鼠标选中对应属性时，会在属性窗口的最下方出现该属性的详细描述信息。</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;">   <a name="r0_321"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.2.1、编辑属性</span></p><p style="white-space: normal; text-indent: 2em;">  用户可以随时调整、编辑列表中的属性参数。</p><p style="white-space: normal; text-indent: 2em;">    注意：type和id属性由开发环境指定，用户不可修改。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_322"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.2.2、读属性</span></p><p style="white-space: normal; text-indent: 2em;">  如上图所示的控件属性列表，可以在设备运行中随时读取。</p><pre class="brush:cpp;toolbar:false">      sys0=c0.id            //将控件的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;">  3.2.1、<a href="#r0_321" target="_self">编辑属性</a>   </p><p style="white-space: normal; text-indent: 2em;">  3.2.2、<a href="#r0_322" target="_self">读属性</a></p><p style="white-space: normal; text-indent: 2em;">  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;">  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;">    3.3.2、<a href="#r0_332" target="_self">w，h属性</a><br/>   <span style="text-indent: 2em;">  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;">  3.3.4、<a href="#r0_334" target="_self">bco属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">   <span style="text-indent: 2em;"> 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;">    3.3.6、<a href="#r0_336" target="_self">first属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.7、<a href="#r0_337" target="_self">effect属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.8、<a href="#r0_338" target="_self">aph属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.9、<a href="#r0_339" target="_self">drag属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.10、<a href="#r0_3310" target="_self">vscope属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.11、<a href="#r0_3311" target="_self">objname属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.12、<a href="#r0_3312" target="_self">id属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">    3.3.13、<a href="#r0_3313" target="_self">type属性</a></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">      3.3.14、<a href="#sanshisi" target="_self">val属性</a><br/></p><p style="white-space: normal; text-indent: 2em; line-height: 1.5em;">      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;">   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;">   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>       <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;">    如下图所示，当鼠标选中对应属性时，会在属性窗口的最下方出现该属性的详细描述信息。</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;">   <a name="r0_321"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.2.1、编辑属性</span></p><p style="white-space: normal; text-indent: 2em;">  用户可以随时调整、编辑列表中的属性参数。</p><p style="white-space: normal; text-indent: 2em;">    注意：type和id属性由开发环境指定，用户不可修改。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_322"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.2.2、读属性</span></p><p style="white-space: normal; text-indent: 2em;">  如上图所示的控件属性列表，可以在设备运行中随时读取。</p><pre class="brush:cpp;toolbar:false">      sys0=c0.id            //将控件的id号赋值给sys0变量 |
|       c0.x+=10              //将控件在屏幕上的位置向右移动10个像素点。 |       c0.x+=10              //将控件在屏幕上的位置向右移动10个像素点。 | ||
| - |       prints c0.val,0       //将c0的状态从串口发送出去。</pre><p style="white-space: normal; text-indent: 2em;">    注意：objname属性不可以读取。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_323"></a> <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;">  所有绿色控件可以在运行中实时修改。</span></p><p style="white-space: normal; text-indent: 2em;">    注意：因产品系列不同，属性的写权限也不完全相同。比如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;">    <a name="r0_331"></a> <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;">    x，y属性描述控件在屏幕上的像素坐标位置。以屏幕左上角为像素坐标原点(x=0,y=0)。</span></p><p style="white-space: normal; text-indent: 2em;">    T0,K0系列产品，x，y属性只能从：0--最大分辨率。不能超出屏幕显示区域。</p><p style="white-space: normal; text-indent: 2em;">    X系列产品，x，y属性可以超出屏幕坐标范围(-6000~+6000)，但是超出屏幕将被裁减，不会显示出来。</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#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;">   <a name="r0_332"></a> <span style="border: 1px solid rgb(0, 0, 0);"> 3.3.2、w，h属性</span></p><p style="white-space: normal; text-indent: 2em;"><span style="text-indent: 2em;">       w，h属性描述控件在屏幕上宽度和高度（像素大小为单位）。</span></p><p style="white-space: normal; text-indent: 2em;">    T0,K0系列产品，w，h属性只能从：0--最大分辨率。不能超出屏幕显示区域。</p><p style="white-space: normal; text-indent: 2em;">    X系列产品，x+w，y+h的值可以超出屏幕坐标范围，但是超出屏幕将被裁减，不会显示出来。</p><p style="white-space: normal; text-indent: 2em;">    <span style="text-indent: 2em;"> </span><a name="r0_333"></a><span style="text-indent: 2em;"> </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;">        pco属性。控件的字体颜色属性，RGB565的颜色值。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_334"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.4、bco属性</span></p><p style="white-space: normal; text-indent: 2em;">        bco属性。控件背景色熟悉，RGB565的颜色值。</p><p style="white-space: normal; text-indent: 2em;">    <span style="text-indent: 2em;"> </span><a name="r0_335"></a><span style="text-indent: 2em;"> </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;">          time属性。控件特效执行时间属性。仅X系列支持，且effect设置不为0以后才存在该属性。</p><p style="white-space: normal; text-indent: 2em;">          当设置了控件的加载特效以后，控件在time的时间内，以设置的特效方式飞到控件所在屏幕的坐标位置。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_336"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.6、first属性</span></p><p style="white-space: normal; text-indent: 2em;">          first属性。控件加载特效的优先级属性。仅X系列支持，且effect设置不为0以后才存在该属性。</p><p style="white-space: normal; text-indent: 2em;">          first可设置的值为0-100。支持多个有特效的控件为同一级别优先级。同一优先级的控件，将在同时被加载到屏幕上显示。</p><p style="white-space: normal; text-indent: 2em;">          不同优先级的优先级中，将根据设置值从大到小依次完成加载。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_337"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.7、effect属性</span></p><p style="white-space: normal; text-indent: 2em;">        effect属性。控件加载特效属性。目前一共支持9种效果。仅X系列支持该属性。</p><p style="white-space: normal; text-indent: 2em;">          0-立即加载;1-上边飞入;2-下边飞入;3-左边飞入;4-右边飞入;5-左上角飞入;6-右上角飞入;7-左下角飞入;8-右下角飞入</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_338"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.8、aph属性</span></p><p style="white-space: normal; text-indent: 2em;">        aph属性。控件半透明属性。仅X系列支持。</p><p style="white-space: normal; text-indent: 2em;">        aph可设置的值范围为0-127 。为0时控件将全透明(效果为不显示)，为127时全显示(没有半透明效果);</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_339"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.9、drag属性</span></p><p style="white-space: normal; text-indent: 2em;">          drag属性。控件运行过程中是否支持拖动属性。仅X系列支持。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_3310"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.10、vscope属性</span></p><p style="white-space: normal; text-indent: 2em;">          vscope属性。控件内存占用属性。控件支持私有和全局属性。</p><p style="white-space: normal; text-indent: 2em;">          当设置为全局时，控件分配的内存在所有页面都可以访问。离开当前页面后，控件属性数据也不会丢失。缺点是，占用系统总内存。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_3311"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.11、objname属性</span></p><p style="white-space: normal; text-indent: 2em;">        objname属性。控件名称属性。该属性在运行中不能获取。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_3312"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.12、id属性</span></p><p style="white-space: normal; text-indent: 2em;">        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;">   <a name="r0_3313"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.13、type属性</span></p><p style="white-space: normal; text-indent: 2em;">        type属性。控件类型属性。由系统分别固定数据，比如复选框控件属性为56。</p><p style="white-space: normal; text-indent: 2em;">   <a name="sanshisi"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.14、val属性</span><span style="text-indent: 2em;">    </span></p><p style="white-space: normal; text-indent: 2em;"><span style="text-indent: 2em;">            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;">    </span><a name="sansanshiwu"></a><span style="font-size: 16px;"> <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;">   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、点击左侧<工具箱>里面的<复选框>按钮，当前页面出现一个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: "comic sans ms"; 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: "comic sans ms"; 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: "comic sans ms"; 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;"> <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: "comic sans ms"; 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: "comic sans ms"; 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: "comic sans ms"; 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"/> <img src="http://wiki.tjc1688.com/dokuwiki/ueditor/php/upload/image/20190116/1547623186213265.png" title="1547623186213265.png" alt="image.png" width="147" height="145"/> <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>   当颜色被使用过后，下次点击选择颜色的时候，使用过的颜色会直接出现在“选择颜色”的下拉选项中。</p><p><br/></p><p>   控件属性如果不清楚怎么使用，请查阅“认识控件中的【<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> | + |       prints c0.val,0       //将c0的状态从串口发送出去。</pre><p style="white-space: normal; text-indent: 2em;">    注意：objname属性不可以读取。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_323"></a> <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;">  所有绿色控件可以在运行中实时修改。</span></p><p style="white-space: normal; text-indent: 2em;">    注意：因产品系列不同，属性的写权限也不完全相同。比如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;">    <a name="r0_331"></a> <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;">    x，y属性描述控件在屏幕上的像素坐标位置。以屏幕左上角为像素坐标原点(x=0,y=0)。</span></p><p style="white-space: normal; text-indent: 2em;">    T0,K0系列产品，x，y属性只能从：0--最大分辨率。不能超出屏幕显示区域。</p><p style="white-space: normal; text-indent: 2em;">    X系列产品，x，y属性可以超出屏幕坐标范围(-6000~+6000)，但是超出屏幕将被裁减，不会显示出来。</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#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;">   <a name="r0_332"></a> <span style="border: 1px solid rgb(0, 0, 0);"> 3.3.2、w，h属性</span></p><p style="white-space: normal; text-indent: 2em;"><span style="text-indent: 2em;">       w，h属性描述控件在屏幕上宽度和高度（像素大小为单位）。</span></p><p style="white-space: normal; text-indent: 2em;">    T0,K0系列产品，w，h属性只能从：0--最大分辨率。不能超出屏幕显示区域。</p><p style="white-space: normal; text-indent: 2em;">    X系列产品，x+w，y+h的值可以超出屏幕坐标范围，但是超出屏幕将被裁减，不会显示出来。</p><p style="white-space: normal; text-indent: 2em;">    <span style="text-indent: 2em;"> </span><a name="r0_333"></a><span style="text-indent: 2em;"> </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;">        pco属性。控件的字体颜色属性，RGB565的颜色值。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_334"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.4、bco属性</span></p><p style="white-space: normal; text-indent: 2em;">        bco属性。控件背景色熟悉，RGB565的颜色值。</p><p style="white-space: normal; text-indent: 2em;">    <span style="text-indent: 2em;"> </span><a name="r0_335"></a><span style="text-indent: 2em;"> </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;">          time属性。控件特效执行时间属性。仅X系列支持，且effect设置不为0以后才存在该属性。</p><p style="white-space: normal; text-indent: 2em;">          当设置了控件的加载特效以后，控件在time的时间内，以设置的特效方式飞到控件所在屏幕的坐标位置。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_336"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.6、first属性</span></p><p style="white-space: normal; text-indent: 2em;">          first属性。控件加载特效的优先级属性。仅X系列支持，且effect设置不为0以后才存在该属性。</p><p style="white-space: normal; text-indent: 2em;">          first可设置的值为0-100。支持多个有特效的控件为同一级别优先级。同一优先级的控件，将在同时被加载到屏幕上显示。</p><p style="white-space: normal; text-indent: 2em;">          不同优先级的优先级中，将根据设置值从大到小依次完成加载。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_337"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.7、effect属性</span></p><p style="white-space: normal; text-indent: 2em;">        effect属性。控件加载特效属性。目前一共支持9种效果。仅X系列支持该属性。</p><p style="white-space: normal; text-indent: 2em;">          0-立即加载;1-上边飞入;2-下边飞入;3-左边飞入;4-右边飞入;5-左上角飞入;6-右上角飞入;7-左下角飞入;8-右下角飞入</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_338"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.8、aph属性</span></p><p style="white-space: normal; text-indent: 2em;">        aph属性。控件半透明属性。仅X系列支持。</p><p style="white-space: normal; text-indent: 2em;">        aph可设置的值范围为0-127 。为0时控件将全透明(效果为不显示)，为127时全显示(没有半透明效果);</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_339"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.9、drag属性</span></p><p style="white-space: normal; text-indent: 2em;">          drag属性。控件运行过程中是否支持拖动属性。仅X系列支持。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_3310"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.10、vscope属性</span></p><p style="white-space: normal; text-indent: 2em;">          vscope属性。控件内存占用属性。控件支持私有和全局属性。</p><p style="white-space: normal; text-indent: 2em;">          当设置为全局时，控件分配的内存在所有页面都可以访问。离开当前页面后，控件属性数据也不会丢失。缺点是，占用系统总内存。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_3311"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.11、objname属性</span></p><p style="white-space: normal; text-indent: 2em;">        objname属性。控件名称属性。该属性在运行中不能获取。</p><p style="white-space: normal; text-indent: 2em;">   <a name="r0_3312"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.12、id属性</span></p><p style="white-space: normal; text-indent: 2em;">        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;">   <a name="r0_3313"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.13、type属性</span></p><p style="white-space: normal; text-indent: 2em;">        type属性。控件类型属性。由系统分别固定数据，比如复选框控件属性为56。</p><p style="white-space: normal; text-indent: 2em;">   <a name="sanshisi"></a> <span style="border: 1px solid rgb(0, 0, 0);">3.3.14、val属性</span><span style="text-indent: 2em;">    </span></p><p style="white-space: normal; text-indent: 2em;"><span style="text-indent: 2em;">            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;">    </span><a name="sansanshiwu"></a><span style="font-size: 16px;"> <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;">   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;">    </span><a name="sansanshiliu"></a><span style="font-size: 16px;"> <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;">        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;">    </span><a name="sansanshiqi"></a><span style="font-size: 16px;"> <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;">        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、点击左侧<工具箱>里面的<复选框>按钮，当前页面出现一个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: "comic sans ms"; 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: "comic sans ms"; 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: "comic sans ms"; 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;"> <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: "comic sans ms"; 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: "comic sans ms"; 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: "comic sans ms"; 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"/> <img src="http://wiki.tjc1688.com/dokuwiki/ueditor/php/upload/image/20190116/1547623186213265.png" title="1547623186213265.png" alt="image.png" width="147" height="145"/> <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>   当颜色被使用过后，下次点击选择颜色的时候，使用过的颜色会直接出现在“选择颜色”的下拉选项中。</p><p><br/></p><p>   控件属性如果不清楚怎么使用，请查阅“认识控件中的【<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 浏览次数:165/2153866(本页/全站)