手把手从零开始教你用htmlayout/sciter写漂亮ui界面(二)

最新推荐文章于 2025-07-16 11:49:03 发布
原创 最新推荐文章于 2025-07-16 11:49:03 发布 · 2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #css3 #ui

书接上回: 手把手从零开始教你用htmlayout/sciter写漂亮ui界面(一)

再次鸣谢下aardio软件对htmlayout的大力封装, 所以用起来就简单多了. 只需要考虑html和css的耦合部分

上次学到, 如何用htmlahyout来贴图, 还有一些csss!属性的使用

这次我们写一个完整的 UI界面皮肤管理界面.

参考主界面的html和css,稍作修改即可.如下:

<html>
    <link href="skin.css" rel="stylesheet" type="text/css"/>
    <body>
        <div #header command="window-caption">
            <div #space>更改外观</div>
            <div #btn-close command="window-close"/>
        </div>
    </body>
</html>
body{
    margin:0px;
    background-image:url(img/001/skin.png);
    background-repeat:expand stretch-left stretch-middle  stretch-right;
    background-position:280 2 2 680;
    foreground-image:url(img/border.png);
    foreground-repeat:expand stretch-left stretch-middle  stretch-right;
    foreground-position:5 5 5 5;
}
#header{
    //background-color:red;
    width:100%;
    height:70px;
    flow:horizontal;
    behavior:windowCommand;
}
#space{
    width:100%%;
    height:20px;
    font-weight:bold;
    font-size:14px;
    color:white;
    padding:5 0 0 8;
}
#btn-close{
    background-image:url(img/btn_close_normal.png);
    width:39px;
    height:19px;
}
#btn-close:hover{
    background-image:url(img/btn_close_highlight.png);
}
#btn-close:active{
    background-image:url(img/btn_close_down.png);
}

增加一个蒙版main:

<html>
    <link href="skin.css" rel="stylesheet" type="text/css"/>
    <body>
        <div #header command="window-caption">
            <div #space>更改外观</div>
            <div #btn-close command="window-close"/>
        </div>
        <div #main>
             
        </div>
    </body>
</html>

修改这个蒙版的css属性

#main{
    background-color:rgba(255,255,255,0.6);
    margin:0 -5 -5 -5;
    padding:0 5 5 5;
    width:100%%;
    height:100%%;
}

在main节点中增加两个区域, 一个用来显示皮肤框,, 一个用来作为底部按键

先来设置下皮肤显示区

我们增加mainarea节点和main-bottom节点

<html>
    <link href="skin.css" rel="stylesheet" type="text/css"/>
    <body>
        <div #header command="window-caption">
            <div #space>更改外观</div>
            <div #btn-close command="window-close"/>
        </div>
        <div #main>
            <div #mainarea>
 
            </div>
            <div #main-bottom>
 
            </div>
        </div>
    </body>
</html>

定义一下css样式

#mainarea{
    background-color:rgba(0,66,33,0.3);//随便写的,便于观察
    margin:0 1 1 1;
    width:100%%;
    height:100%%;
}
#main-bottom{
    background-color:rgba(88,88,88,0.3);//随便写的,便于观察
    margin:0 5 0 5;
    width:100%%;
    height:35;
}

预设底部是35高的一个底部框, 上面剩下的都是显示区域, 效果如下:

下面在mainarea那块区域内添加皮肤列表.

<div #mainarea>
    <div #skin-area>
 
    </div>
</div>

并设置css为

#skin-area{
    background-color:white;
    margin:7;
    padding:1 1 1 1;
    width:100%%;
    height:100%%;
}

下面就是往皮肤区放入内容了

在html的skin-area区域添加内容

<div #skin-area>
    <img src="img\001\preview.png"/>
</div>

再接再厉, 继续添加看看

<div #skin-area>
    <img src="img\001\preview.png"/>
 
    <img src="img\002\preview.png"/>
 
    <img src="img\003\preview.png"/>
 
    <img src="img\004\preview.png"/>
 
    <img src="img\005\preview.png"/>
 
    <img src="img\006\preview.png"/>
 
    <img src="img\007\preview.png"/>
 
    <img src="img\008\preview.png"/>
 
    <img src="img\009\preview.png"/>
 
    <img src="img\010\preview.png"/>
</div>

变成了这副样子,滚动条也好丑, 为了让滚动条显示只显示在skin-area区域, 而不是整个窗口,那么需要在skin-area的父节点mainarea设置内容超出边界则隐藏滚动条

#mainarea{
    background-color:rgba(0,66,33,0.3);
    margin:0 1 1 1;
    width:100%%;
    height:100%%;
    overflow:hidden;
}

滚动条消失了, 可是,图片列表显示也很奇怪, 我们需要它横向显示, 并且在超出边界的时候换行并能显示滚动条,htmlayout的flow属性里面刚好有这个模式,

#skin-area{
    background-color:white;
    margin:7;
    padding:1 1 1 1;
    width:100%%;
    height:100%%;
    flow:h-flow;
    overflow-y:auto;
}

测试了overflow的其他几个属性, 发现hidden-scroll和scroll-indicator都没效果,

(经测试换成sciter是支持的,估计htmlayout还不支持)

 目前先用auto吧, 就是丑了点

为了让滚动条好看一点,细一点, 那么我们可以自定义垂直滚动条, 参考htmlayout的手册示例,

我们在css中添加如下代码:

@set small-v-scrollbar
{
    .slider 
    { 
    background-color: rgba(114,150,60,0.7);
    }
    .base { width: 3px; } /* explicit declaration of scrollbar width */
}
* { vertical-scrollbar: small-v-scrollbar; } /* all scrollable elements will have our small scrollbar now */

上面就是自定义的简短的代码, 更详细的介绍还是参考官方的文档,

为了让图片间距可控, 需要用div再次嵌套下. 我们把每个img都放入到div中去, 然后去操作div

<div #skin-area>
    <div .listimg>
        <img src="img\001\preview.png"/>
    </div>
    <div .listimg>
        <img src="img\002\preview.png"/>
    </div>
    <div .listimg>
        <img src="img\003\preview.png"/>
    </div>
    <div .listimg>   
        <img src="img\004\preview.png"/>
    </div>
    <div .listimg>
        <img src="img\005\preview.png"/>
    </div>
    <div .listimg>
        <img src="img\006\preview.png"/>
    </div>
    <div .listimg>
        <img src="img\007\preview.png"/>
    </div>
    <div .listimg>
        <img src="img\008\preview.png"/>
    </div>
    <div .listimg>
        <img src="img\009\preview.png"/>
    </div>
    <div .listimg>
        <img src="img\010\preview.png"/>
    </div>
</div>

看到上面的 .listimg 了吗? 这里要用圆点 . , 圆点的意思是这个属性可以被重复使用, 就是名字可以重复, 相同名字的节点属性一致, 而我们上面一直用的是# , #表示的是此名字是唯一的, 不能重复使用.

ok , 去css里面设置下属性

#skin-area{
    background-color:white;
    margin:7;
    padding:1 1 1 0;
    width:100%%;
    height:100%%;
    flow:h-flow;
    overflow-y:auto;
}
.listimg{
    width:120px;
    height:120px;
    padding:0 0 1 1;
}
img
{
    max-width:120px; 
    max-height:120px;
}

以上, 设置内边距的 底部和左边为1 ,其他是0, 因为我们的div是靠左靠上对齐的. 所以间距就刚刚好都是1了, 看起来整齐多了.

点击图片实现切换背景

为了能够动态切换背景图片, 需要把每个图片的div设置一个自定义的属性用来区分点击的是哪个图片.

html中修改, 增加了自定义的属性Lname,区分不同的节点

<div #skin-area>
    <div .listimg Lname="001">
        <img src="img\001\preview.png"/>
    </div>
    <div .listimg Lname="002">
        <img src="img\002\preview.png"/>
    </div>
    <div .listimg Lname="003">
        <img src="img\003\preview.png"/>
    </div>
    <div .listimg Lname="004">  
        <img src="img\004\preview.png"/>
    </div>
    <div .listimg Lname="005">
        <img src="img\005\preview.png"/>
    </div>
    <div .listimg Lname="006">
        <img src="img\006\preview.png"/>
    </div>
    <div .listimg Lname="007">
        <img src="img\007\preview.png"/>
    </div>
    <div .listimg Lname="008">
        <img src="img\008\preview.png"/>
    </div>
    <div .listimg Lname="009">
        <img src="img\009\preview.png"/>
    </div>
    <div .listimg Lname="010">
        <img src="img\010\preview.png"/>
    </div>
</div>

为了产生交互, 需要在aardio工程中定义一个behavior, 在aardio里对html进行修改

skin.aardio代码如下: 添加个名字为myselect的自定义行为

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=541;bottom=392;border="none")
winform.add()
/*}}*/
 
import web.layout;
import web.layout.behavior.windowCommand;
var wb = web.layout(winform,0xFFFF/*_HL_HANDLE_ALL*/);
 
namespace web.layout.behavior.myselect {
    onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {
        var cmd = ltTarget.Lname or ltOwner.Lname;
        var wbLayout = ltOwner.getLayout();
                var ltEleBody = wbLayout.querySelector("body");
        ltEleBody.style["background-image"]="url(img\"++cmd++"\skin.png)";
     }  
}
 
wb.go("\html\skin.html")
 
winform.show();
win.loopMessage();
return winform;

并且在css中引用这个行为

.listimg{
    width:120px;
    height:120px;
    padding:0 0 1 1;
    behavior:myselect;
    active-on!: $1(div.listimg:checked):checked = false , 
                self:checked = true;
}

ok,实现了切换背景功能....

 

html中按钮配色推荐,分享一组按钮配色CSS - htmlayout/sciter - aardio官方社区 - Powered by Discuz!...
weixin_30587041的博客
06-23 893
import win.ui;/*DSG{{*/var winform = win.form(text="一组按钮配色CSS";right=599;bottom=399)/*}}*/import web.layout;var wbLayout = web.layout( winform );wbLayout.html = /**html,body{ height:100%; margin:20;}/...
HTMLayout-Sciter Tiscript脚本语法
01-27
HTMLayout-Sciter Tiscript脚本语法的简单使用！
手把手从零开始教你用htmlayout/sciter写漂亮ui界面(一)
popdes的专栏
10-10 8626
本文首发于:https://chengxu.xyz/t/396 下面代码编写中使用了:　aardio编程软件 , editplus文本编辑器 ui界面参考:https://blog.csdn.net/QQ282881515/article/details/51525985 本文目的:　一步一步手写ｈｔｍｌ和css 代码, 通过编写过程来学习和思考htmlayout应该怎么用 这里说下, aardio是一款很不错的国产编程软件, 集成了很多使用的功能, 免费开源, 其中就有htmla...
【HTMLayout学习】1.Hello world，你懂的
热门推荐
笨笨D幸福 - 后花园
08-07 1万+
每种编程语言都有它的Hello world，这已经是大家的共识了，所以我也不能免俗。 1、需求软件： VS软件 + HTMLayout SDK SDK下载地址：http://www.terrainformatica.com/htmlayout/HTMLayoutSDK.zip 也可以在页面右侧查看对应的使用说明。 2、配置 将下载的文档解压到任意目录，现对于重要文档加以说明： bin
零基础HTML入门：手把手教你写网页（3分钟教会你会爬虫要回的HTML知识）
最新发布
weixin_73958875的博客
07-16 2499
本文介绍了HTML基础知识和常用标签的使用方法。主要内容包括：1）HTML基本结构，包含DOCTYPE声明、语言设置、头部和内容标签；2）常用标签如标题标签（h1-h6）、段落标签（p）、超链接标签（a）及其属性；3）文本格式设置，包括加粗、斜体、上下标、颜色和大小调整；4）多媒体元素添加，如图片（img）、音频（audio）和视频（video）；5）容器创建（div）及其布局属性；6）表格制作（table、tr、td、th）及表头、标题添加。这些HTML基础知识为后续学习网页爬虫技术奠定了基础。
轻量级界面库htmlayout入门教程
编程之路
02-27 1万+
制作htmlayout的helloworld。 首先下载htmlayout的sdk，http://www.terrainformatica.com/htmlayout/HTMLayoutSDK.zip 我使用的VS2010，WIN7的环境。 把下载好的sdk解压出来，我们需要用到里边的东西有，include目录，bin目录和lib目录。 用vs生成一个win32程序，不要使用预编译头，在工
易语言-HTMLayout自绘登录界面
06-26
HTMLayout自绘登录界面
HTMLayout-Sciter：Tiscript脚本基础与实例
HTMLayout-Sciter Tiscript脚本语法是一种在HTMLayout框架中使用的高级编程语言，它允许开发者在Sciter渲染引擎下创建交互式的用户界面。Tiscript结合了JavaScript的强大功能和HTML布局的能力，为Web开发提供了一种...
HTMLayout界面类模块.rar
04-05
根据"易语言HTMLayout界面类模块源码"这个文件名，我们可以推断出压缩包内包含的是使用易语言编写的HTMLayout界面模块的源代码。开发者可以通过查看和学习这些源代码，理解如何在易语言中集成和使用HTMLayout，以及...
sciter2-界面库及demo(比duilib还好用的界面库)
06-27
最近帮朋友做导航界面，明确要求用HTMLayout，网上搜索了下，看了下介绍，感觉sciter2比HTMLayout做的界面还炫丽，朋友同意后，今天就开始接触。目的是继承CWnd，生成sciterWnd，然后将sciter2封装在里面，通过换...
HTmlayout学习文档说明和帮助
05-31
HTMLayout可让程序员通过CSS+HTML方式来写应用程序界面的库. 非常漂亮,可非常容易的实现2D动画效果
HTMLayout学习手册
10-31
HTMLayout is a basic and light-weight ui repository to develop!
sciter SDK
12-25
sciter SDK 用于Windows桌面的开发。使用html+css语言实现布局，皮肤等功能
sciter引擎
07-05
htmlayout的升级版，支持xp，使用html、css和脚本进行界面编程。
HTMLayout界面
12-12
params.置指针 (paramPointer) .判断开始 (局部_方法名称 ＝ “login”) user ＝ RootElement.S1ELE (“#input_user”).取文本 () pass ＝ RootElement.S1ELE (“#input_passwd”).取文本 () 信息框 (“用户登录：” ＋ user ＋ “ 密码：” ＋ pass, 0, ) .判断 (局部_方法名称 ＝ “close”) 销毁 ()
【HTMLayout-1】在aardio中使用HTMLayout搭建界面
weixin_34221775的博客
11-14 1301
在aardio中使用HTMLayout搭建界面1.打开aardio软件2.新建窗体设计器（创建一个独立的临时窗体）3.从界面视图（默认）切换到代码视图（快捷键Ctrl+U）4.在自动生成的代码之上进行来构造5.运行（快捷键F5）6.展示效果图示：步骤1： 步骤2： 效果： 完整代码： import win.ui; /*DSG{{*/ var winform = win.form(text="HTM...
go语言html界面,[译] sciter: 使用 HTML/CSS 构建 Golang 图形界面程序
weixin_33803878的博客
05-31 1274
作者：Manish ChampaneriGolang 可视化库 sciter这是来自 sciter 网站的几句话，sciter 桌面 UI 开发带来了一系列网页技术。网页设计者和开发者可以复用他们的经验和专长来构建看起来现代的桌面应用。多种多样的 GUI 框架提供了不同的 UI 声明和格式语言，比如 QML 和 XAML(Microsoft WPF)。不同的是， sciter 使用长期证明的、健壮...
go语言使用go-sciter创建桌面应用(一) 简单的通过html,css写ui
weixin_34301132的博客
06-18 2002
我们使用go-sciter，就不得不提Sciter，Sciter 是一个嵌入式的 HTML/CSS/脚本引擎，旨在为桌面应用创建一个 UI 框架层。 说简单点就是我们通过它可以像写html,css那样写桌面UI。 一、环境准备 第一步：从https://sciter.com/download/地址下载sciter-sdk 解压，找到sciter-sdk\bin\64\sciter...
手把手带你打造自己的UI样式库（第五章）之常用页面切图的设计与开发
qq_40665861的博客
07-26 643
常用页面切图的设计与开发 在一些大的前端团队中，前端工程师这个职位会出现一个分支，叫做重构工程师。重构工程师主要负责 HTML 和 CSS 的制作，也就是把设计稿转换成 HTML 和 CSS 代码。重构工作完成以后，把制作好的 HTML 和 CSS 交给 JS 工程师来完成 JS 逻辑的部分。 一、首页的制作 首页整个网站的核心，也是主要功能的入口位置。所以在设计这个页面的时候，我们会把最重要的内容安排进去。这个应用的首页会有搜索功能来直达各个模块，然后会使用网格组件来制作网站的导航，再下面会是一些推荐的文
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值