<?php
// Version 1.2
include('../lib/awfDialog.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>awfDialog Class :: CSS Reference</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<img src="images/testlab2.jpg" align=right><img src="images/testlabhead.jpg">
</div>
<div class="content">
<table width="100%" cellpadding="2" cellspacing="1" border="0">
<tr>
<td width="100%" valign="top">
<font size="1">awfDialog :: AJAX Enabled Dynamic Dialog Wizard Class :: Documentation</font>
<center>
<div id='container'>
<?php
$str1="";
$m1 = new awfDialog('D1','awfDialog Class CSS Reference',$str1, ICON_INFO,false,'85%');
$m1->SetVAlign(BODY_TOP);
$m1->SetImagePath("../lib/images/");
$m1->SetHAlign(BODY_LEFT);
$m1->SetIconSize(ICON_SIZE_LG);
$m1->SetGradient('224e15','c3f60a');
$m1->SetImagePHPURL('../lib/image2.php');
$m1->SetWizMode('false');
$m1->DisableWizImage();
$m1->SetGradientDirection(GRADIENT_V);
$m1->SetBodyBGColor('#efffca');
$m1->AddOutput("<h2>Concepts</h2>");
$m1->AddOutput("<small>The awfDialog class is explicitly designed so you should only ever need a single instance of the class to render any number of dialogs. To that end, the one critical piece to understand is the role of the unique id you assign to the dialog. That id is used heavily to ensure that all HTML elements sent to the browser are themselves unique and can be manipulated via CSS, javascript, or other client-side techniques that don't even yet exist. <br><br>For example, let's say you've created an instance of the class using<br><br><b></small>");
$m1->AddOutput("<pre>\$myDialog = new awfDialog(\"mini\");</pre></b><br>The string \"mini\" will be prefixed to all the HTML elements for that dialog. So if you wanted you could add<br><br><pre>#miniTitle {\n color:#fff;\n font-family:arial;\n padding:1px;\n}</pre><br> to your CSS stylesheet in order to control the display of the title bar region.");
$m1->SetCSS("BodyPane", "padding:0 30px 10px 30px;");
$m1->SetCSS("BodyPane ul", "padding-left:10px;");
$m1->SetCSS("BodyPane ul li b", "background:#D1FF48;padding:3px;");
$m1->AddOutput("<br><br>That's fine for a fairly static design where you are not rendering elements on the fly. But what if you are using user input to determine the dialog id, or use a database driven theme system? That's where the extended CSS support added in version 1.2 comes in. To accomplish the same thing in a more dynamic development environment you can use the SetCSS() method:<br><br><b><pre>\$MyDialog->SetCSS(\"Title\", \"color:#fff;font-family:arial;padding:1px;\");</pre></b><br>");
$m1->AddOutput("The CSS that gets generated for you during the Render() method will be specific to the elements, <i>but embedded as a style tag, not an HTML attribute</i>. This will be important for future versions when this is extended further to add class overrides.<br><br>Ready to get started? Use the element reference below to get familiar with what parts of the dialog you can control with SetCSS()").
$m1->AddOutput("<h2>CSS Element Reference</h2>");
$m1->AddOutput("<ul style='margin-left:30px;font-size:smaller;'>");
$m1->AddOutput("<li><b>MasterDiv</b><br>This is the overall container DIV for the dialog. It has no direct display properties of it's own, however you may find it necessary to modify the 'display' or 'float' properties depending on your site's layout.<ul>");
$m1->AddOutput("<li><b>Table</b><br>The top level display element. <ul>");
$m1->AddOutput("<li><b>Title</b><br>Container for the titlebar region. Includes the title text, icon, control box(help and exit buttons).<ul>");
$m1->AddOutput("<li><b>Icon</b><br>Icon displayed on the left side of the Title element.</li>");
$m1->AddOutput("<li><b>ControlBox</b><br>Container for the help and exit Ajax buttons as well as any optional title bar elements that may get added in the future.<ul>");
$m1->AddOutput("<li><b>AjaxHelp</b><br>Help button on the right side of the title bar. By default, not rendered unless UseHelp() is set to 'true'.</li>");
$m1->AddOutput("<li><b>AjaxExit</b><br>Exit button on the right side of the title bar. Rendered by default unless SetModal() is set to 'true'.</li></ul></ul>");
$m1->AddOutput("<li><b>WizardPane</b><br>Image panel displayed below the title bar and to the left of the BodyPane. Not rendered by default unless SetWizMode() is set to 'true' AND you call the EnableWizImage() method. </li>");
$m1->AddOutput("<li><b>BodyPane</b><br>Main content panel. This is where all the content you add using the AddOutput() method goes. Also contains the HelpPane and the WizButtons.<ul>");
$m1->AddOutput("<li><b>HelpPane</b><br>Help panel rendered hidden above the rest of the BodyPane content. Not rendered by default unless UseHelp() is set 'true'. Also not rendered if the default Help Button behavior is overriden using your own Ajax methods. When the Help Button behavior is not overriden you can add help content using the AddHelp() method.</li>");
$m1->AddOutput("<li><b>WizButtons</b><br>Container for the Ajax wizard buttons, rendered beneath the BodyPane content. Contains the AjaxPrev, AjaxCancel, and AjaxNext elements. Not rendered by default unless SetWizMode() is 'true' and at least one of the Ajax wizard buttons is enabled.<ul>");
$m1->AddOutput("<li><b>AjaxPrev</b><br>The Ajax Previous button rendered on the left side of the AjaxWizardBar.</li>");
$m1->AddOutput("<li><b>AjaxCancel</b><br>The Ajax Cancel button rendered in the center of the AjaxWizardBar.</li>");
$m1->AddOutput("<li><b>AjaxNext</b><br>The Ajax Next button rendered on the right side of the AjaxWizardBar.</li></ul></ul>");
$m1->AddOutput("<li><b>Footer</b><br>Not yet used.</li>");
$m1->AddOutput("</ul></ul></ul><h2>Example</h2><img src='images/cssref.jpg'>");
$m1->Render();
?></div><?php
?>
</div>
<!--<div id='error'><textarea id="raw" cols=75 rows=10 class="color"></textarea><br>-->
</center>
</td>
<td width="120px" bgcolor="#efffca" valign="top" class="quick">
<?php include('docmenu.php');?>
</td>
</tr>
</table>
</div>
<div class="footer">
<img src="images/KLNminilogo.jpg"><br><font color="white">
TestLab is an internal-use only production of <a href="http://knowledgelinknetwork.net">Knowledge Link Network</a></font><br>
</div>
</body>
</html>
|
Download
