5 APEX_CSS

The APEX_CSS package provides utility functions for adding CSS styles to HTTP output. This package is usually used for plug-in development.

Topics:

ADD Procedure

This procedure adds a CSS style snippet that is included inline in the HTML output. Use this procedure to add new CSS style declarations.

Syntax

APEX_CSS.ADD (
    p_css          IN    VARCHAR2,
    p_key          IN    VARCHAR2 DEFAULT NULL);

Parameters

Table 5-1 describes the parameters available in the ADD procedure.

Table 5-1 ADD Parameters

Parameter Description

p_css

The CSS style snippet. For example, #test {color:#fff}

p_key

Identifier for the style snippet. If specified and a style snippet with the same name has already been added the new style snippet will be ignored.


Example

Adds an inline CSS definition for the class autocomplete into the HTML page. The key autocomplete_widget prevents the definition from being included another time if the apex_css.add is called another time.

apex_css.add (
    p_css => '.autocomplete { color:#ffffff }',
    p_key => 'autocomplete_widget' );

ADD_3RD_PARTY_LIBRARY_FILE Procedure

This procedure adds the link tag to load a 3rd party css file and also takes into account the specified Content Delivery Network for the application. Supported libraries include: jQuery, jQueryUI, jQueryMobile.

If a library has already been added, it is not added a second time.

Syntax

add_3rd_party_library_file ( 
    p_library in varchar2, 
    p_file_name in varchar2, 
    p_directory in varchar2 default null, 
    p_version in varchar2 default null, 
    p_media_query in varchar2 default null );

Parameters

Table 5-2 describes the parameters available in the ADD_3RD_PARTY_LIBRARY_FILE procedure.

Table 5-2 ADD_3RD_PARTY_LIBRARY_FILE Parameters

Parameters Description

p_library

Use one of the c_library_* constants

p_file_name

Specifies the file name without version, .min and .css

p_directory

Directory where the file p_file_name is located (optional)

p_version

If no value is provided then the same version Application Express ships is used (optional)

p_media_query

Value that is set as media query (optional)


Example

The following example loads the Cascading Style Sheet file of the Accordion component of the jQuery UI.

apex_css.add_3rd_party_library_file (
    p_library   => apex_css.c_library_jquery_ui,
    p_file_name => 'jquery.ui.accordion' )

ADD_FILE Procedure

This procedure adds the link tag to load a CSS library. If a library has already been added, it will not be added a second time.

Syntax

APEX_CSS.ADD_FILE (
    p_name           IN    VARCHAR2,
    p_directory      IN    VARCHAR2 DEFAULT WWV_FLOW.G_IMAGE_PREFIX||'css/',
    p_version        IN    VARCHAR2 DEFAULT NULL,
    p_skip_extension IN    BOOLEAN DEFAULT FALSE
    p_media_query    IN    VARCHAR2 DEFAULT NULL,
    p_ie_condition   IN    VARCHAR2 DEFAULT NULL);

Parameters

Table 5-3 describes the parameters available in the ADD_FILE procedure.

Table 5-3 ADD_FILE Parameters

Parameter Description

p_name

Name of the CSS file.

p_directory

Begin of the URL where the CSS file should be read from. If you use this function for a plug-in you should set this parameter to p_plugin.file_prefix.

p_version

Identifier of the version of the CSS file. The version will be added to the CSS filename. In most cases you should use the default of NULL as the value.

p_skip_extension

The function automatically adds ".css" to the CSS filename. If this parameter is set to TRUE this will not be done.

p_media_query

Value set as media query.

p_ie_condition

Condition used as Internet Explorer condition.


Example

Adds the CSS file jquery.autocomplete.css in the directory specified by p_plugin.image_prefix to the HTML output of the page and makes sure that it will only be included once if apex_css.add_file is called multiple times with that name.

apex_css.add_file (
    p_name => 'jquery.autocomplete',
    p_directory => p_plugin.image_prefix );