起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 19603|回复: 26

改变界面样式

  [复制链接]

88

主题

9455

帖子

5033

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5033
QQ
发表于 2012-1-6 16:30:41 | 显示全部楼层 |阅读模式
X5的组件都使用CSS样式,来展现字体、颜色、边距等样式效果,因此只要修改组件的CSS,即可改变组件的样式。
系统为每个组件都定义了样式,因此有2种方法可以改变组件的样式:
1、重新定义系统的CSS
2、给组件增加新的CSS

下面,详细说明一下这两种方式
1、重新定义系统的CSS,按照不同的作用域,可实现改变全部功能的组件样式,改变部分功能的组件样式,改变某个功能的组件样式。

(1)、改变全部功能的组件样式
在/UI/system/config/user.css文件中,重新定义系统CSS。每个w文件都会自动引用这个CSS文件,因此可实现改变全部功能的组件样式。

(2)、改变部分功能的组件样式
自己新建一个CSS文件,重新定义系统CSS。在需要的w文件中,引用这个CSS文件即可实现凡是引用了该CSS的w文件的组件样式得到改变。

(3)、改变某个功能的组件样式
在需要改变样式的w文件的CSS页签中,重新定义系统CSS,系统自动生成w文件的同名CSS文件,并在w文件中引用了该文件,可实现某个功能的组件样式改变。

2、给组件增加新的CSS
在CSS文件中,定义新的CSS,在组件的class属性中选择新定义的CSS,即可实现该组件的样式改变。

下面给出几个具体的例子

86

主题

12万

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
28155
发表于 2012-11-7 14:31:21 | 显示全部楼层
修改gridSelect的样式

a、修改选择后input框的颜色(单个下拉)
justep.xbl('gridSelect的id').input.style.backgroundColor="green";

b、修改选择区域的颜色(单个下拉)
justep.xbl("gridSelect的id").optionDiv.style.backgroundColor='red';

c、修改选择区域中选中时显示的黄色(所有功能中的)
/UI/system/config/user.css
div.gridbox_xp table.obj tr.rowselected td{
    background-color:green;
    color:black;
}

d、修改选择区域中的内容居中
justep.xbl("gridSelect的id").optionDiv.style.textAlign = "center";

e、修改选择后input框的字体
.xforms-ext-select-input{
     font-size:24px;
}

f、修改选择区域的字体
.row-h-18{
            font-size:15pt;
            height:36px;
            line-height:36px;
}
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴

88

主题

9455

帖子

5033

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5033
QQ
 楼主| 发表于 2012-1-6 16:33:42 | 显示全部楼层

Input显示数字时,不需要右对齐

系统中全不使用右对齐,可以统一修改
打开/UI/system/config/user.css文件
加input.xforms-number{ text-align:left; }


一个view中的input右对齐
$("#view的id input").css("text-align","right");

单个input右对齐
$(justep.xbl("input组件的id").input).css({"text-align":"right"});

88

主题

9455

帖子

5033

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5033
QQ
 楼主| 发表于 2012-1-6 17:18:22 | 显示全部楼层

如何获取组件中系统定义的class名称

想要改变组件中系统定义的样式,就需要知道系统定义的class名称。这个我们可以通过IE浏览器的开发人员工具来看。在IE浏览器里,打开一个功能后,按F12,打开开发人员工具。如下图。
CSS.png (71.77 KB, 下载次数: 3088)

F12.png

38.21 KB, 下载次数: 2556

86

主题

12万

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
28155
发表于 2012-2-28 17:18:30 | 显示全部楼层
所有的Input框输入字体设置为红色:
/UI/system/config/user.css文件中添加如下
input.xforms-value{
        color:red;
}

86

主题

12万

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
28155
发表于 2012-10-11 14:41:17 | 显示全部楼层
所有的input框输入字符时从右向左
/UI/system/config/user.css文件中如下控制
input.xforms-value{
        text-align:right;
}

19

主题

98

帖子

203

积分

中级会员

Rank: 3Rank: 3

积分
203
发表于 2013-5-16 16:17:53 | 显示全部楼层
相见恨晚呀

3

主题

23

帖子

102

积分

初级会员

Rank: 2

积分
102
发表于 2013-5-28 08:57:44 | 显示全部楼层
很有用,收藏了!

86

主题

12万

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
28155
发表于 2013-6-8 15:48:55 | 显示全部楼层
单个input样式的控制

1.       html input单个样式的控制
css的定义
   .bb{background-color: red; padding:20px;}
input中写法
   <xhtml:input type="text" value="" id="input1" class="bb"/>

2.       xfoms:inpput单个样式控制
    方法一:
       css的定义
            .aa .xforms-value{background-color: gray; padding: 20px;}
         或者
             .aa input {background-color: gray; padding: 20px;}
            注意aa后面有一个空格
        input中写法
           <xforms:input id="input1" ref="data('data2')/fCode" class="aa"/>
    方法二:
            #input1 .xforms-value{background-color: gray; padding: 20px;}
         或者
            #input1 input {background-color: gray; padding: 20px;}
            注意input1后面有一个空格
            #
后面的是xforms:input组件的id
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴

8

主题

34

帖子

149

积分

初级会员

Rank: 2

积分
149
发表于 2013-7-18 16:41:17 | 显示全部楼层
mark一下下
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2019-7-21 03:43 , Processed in 0.128547 second(s), 29 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表