本文概述
- 样式类和皮肤参数
- 例子
【RichFaces rich(autocomplete组件用法示例)】它是标准的JavaServer Faces用户界面输入控件, 带有附加的验证功能。
样式类和皮肤参数 下表包含样式类(选择器)和自动完成组件的相应外观参数。
Class | Function | Skin Parameters | 映射的CSS属性 |
---|---|---|---|
.rf-au-fnt | 它用于定义自动完成框字体的样式。 | generalTextColor generalFamilyFont | 彩色字体系列 |
.rf-au-inp | 它用于定义自动完成输入框的样式。 | controlBackgroundColor | background-color |
.rf-au-fld | 它用于定义自动完成字段的样式。 | panelBorderColor控件背景色 | 边框色背景色 |
.rf-au-fld-btn | 它用于在自动完成字段中定义按钮的样式。 | 没有皮肤参数。 | |
.rf-au-btn | 它用于定义自动完成框按钮的样式。 | panelBorderColor | border-left-color |
.rf-au-btn-arrow | 用于定义按钮箭头的样式。 | 没有皮肤参数。 | |
.rf-au-btn-arrow-dis | 用于禁用按钮箭头时定义样式。 | 没有皮肤参数。 | |
.rf-au-lst-scrl | 它用于定义自动完成列表中滚动条的样式。 | 没有皮肤参数。 | |
.rf-au-itm | 它用于定义自动完成列表中项目的样式。 | 没有皮肤参数。 | |
.rf-au-itm-sel | 它用于定义自动完成列表中所选项目的样式。 | headerBackgroundColor generalTextColor | 背景色边框色 |
.rf-au-shdw | 它用于定义自动完成框阴影的样式。 | 没有皮肤参数。 | |
.rf-au-shdw-t, .rf-au-shdw-l, .rf-au-shdw-r, .rf-au-shdw-b | 这些类为自动完成框阴影的顶部, 左侧, 右侧和底部定义样式。 | 没有皮肤参数。 | |
.rf-au-tbl | 它用于在自动完成框中定义表格的样式。 | 没有皮肤参数。 |
JSF文件
// autocomplete.xhtml
<
?xml version='1.0' encoding='UTF-8' ?>
<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:rich="http://richfaces.org/rich">
<
f:view>
<
h:head>
<
title>
AutoComplete Example<
/title>
<
/h:head>
<
h:body>
<
h:form>
<
h:outputText value="http://www.srcmini.com/Enter Country Name">
<
/h:outputText>
<
rich:autocompletevalue="http://www.srcmini.com/#{country.countryName}"minChars="2"autocompleteMethod="#{country.countryList()}">
<
/rich:autocomplete>
<
/h:form>
<
/h:body>
<
/f:view>
<
/ui:composition>
托管豆
// Country.java
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean@RequestScopedpublic class Country {String CountryName;
public List<
String>
countryList() {ArrayList<
String>
list = new ArrayList<
>
();
list.add("India");
list.add("Australia");
list.add("Germany");
list.add("Italy");
list.add("United States");
list.add("Russia");
return list;
}public String getCountryName() {return CountryName;
}public void setCountryName(String CountryName) {this.CountryName = CountryName;
}}
输出
文章图片
在这里, 当我们开始输入国家时, 它会显示自动完成的可用列表。
文章图片
推荐阅读
- RichFaces rich(calendar组件用法)
- RichFaces a4j(param组件示例)
- RichFaces开发应用程序示例图解
- RichFaces a4j:log组件用法示例
- RichFaces a4j(outputPanel组件示例)
- RichFaces发送Ajax请求详细图解
- RichFaces a4j(commandLink组件示例)
- RichFaces a4j(commandButton组件示例)
- RichFaces a4j(ajax组件示例)