LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


headerContentOrientation

Determines the orientation of content in group header.

Property Value

A String value. The default is 'horizontal', stating that text or custom content in group header will appear horizontally.

Remarks

By setting this property value to 'vertical' the text or custom content in group header will appear vertically, rotated by an angle of 90 degress. This value is only accepted when expandDirection property value is set to 'left' or 'right'.

Version Information

Supported in: v1.0

Example

An example showing vertically oriented text in group header of Accordion widget.

$(document).ready(function() {

// Create an instance of Accordion widget

var $bar = $('#accordion').accordion({

expandDirection: 'right',

headerContentOrientation: 'vertical'

});

});

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.accordion.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.accordion.min.js"></script>

</head>

<body>

<div id="accordion" class="widget">

<h3><span>Group 1</span></h3>

<div></div>

<h3><span>Group 2</span></h3>

<div></div>

<h3><span>Group 3</span></h3>

<div></div>

</div>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

See Also