Updated Nov 16, 2009 by johgep
Labels:	Phase-Implementation

HeadTag

The "head" tag renders required JavaScript code and necessary css styles.

Introduction

The "head" tag renders required JavaScript code to configure jQuery and is required in order to use any of the tags included in the jQuery plugin.

Samples

Head tag for base AJAX calls

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head/>
  </head>
  <body>
  </body>
</html>

Head tag for AJAX calls, Effects and Widgets with Default Indicator

The "locale" attribute configures jQuery locale for datepicker. Default is "en" you can use all locales that are bundled with jQuery. e.g. "de, "fr", "ja", ...

The default indicator is visible at every ajax request.

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head locale="de" jqueryui="true" defaultIndicator="myDefaultIndicator"/>
  </head>
  <body>
    <img id="myDefaultIndicator" src="images/ajax-loader.gif" alt="Loading..." style="display:none"/>
  </body>
</html>

Themes

Base Themes

Built in themes from Plugin

cupertino
darkness
lightness
redmond
smothness

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head locale="de" jqueryui="true" jquerytheme="redmond"/>
  </head>
  <body>
  </body>
</html>

Custume Themes

Create and Download your own Theme with jQuery ThemeRoller

Create a folder in your WebRoot path template/themes/mytheme and copy following files from the downloaded theme into it.

The jquery-ui-1.7.1.custom.css from the css folder and rename it to ui.theme.css
The Image Folder from the css folder

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head locale="de" jqueryui="true" jquerytheme="mytheme" customBasepath="template/themes"/>
  </head>
  <body>
  </body>
</html>

Attributes

Name

Required

Default

Evaluated

Type

Description

ajaxcache false false false Boolean If set to false it will force the pages that you request to not be cached by the browser.

ajaxhistory false false false Boolean BETA!!! If set to true it will enable history and bookmarking for AJAX content and jQuery UI Tabs.

compressed false true false Boolean use compressed version of jquery.js

customBasepath false false String base path for custom jQuery designs

defaultIndicator false false String The default indicator for all AJAX actions

jquerytheme false smoothness false String jQuery UI theme

jqueryui false false false Boolean enable jQuery UI Scripts

loadFromGoogle false false false Boolean Load JavaScript from google content distribution network

locale false en false String import jQuery i18n scripts