改变界面样式

zhaixin

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，即可实现该组件的样式改变。

下面给出几个具体的例子

jishuang

修改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;
}

zhaixin

系统中全不使用右对齐，可以统一修改
打开/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"});

zhaixin

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

2012-1-6 17:16 上传

点击文件名下载附件
点HTML页中的白色箭头，移动到界面上的一个input框。系统用蓝框表示选择的对象，input框中国显示出蓝框后，点鼠标左键，表示选中。此时看开发人员工具界面中的样式部分。如下图，可以看到每个正在生效的class的名称。

jishuang

所有的Input框输入字体设置为红色：
/UI/system/config/user.css文件中添加如下
input.xforms-value{
        color:red;
}

jishuang

所有的input框输入字符时从右向左
/UI/system/config/user.css文件中如下控制
input.xforms-value{
        text-align:right;
}

tearosedfy

相见恨晚呀

fairytail

很有用，收藏了！

jishuang

单个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

yiranlihao

mark一下下