In this step you'll create and set up a Web site and add eight C1Expander controls.
Complete the following steps to add C1Expander controls to a Web site:
1. Create a new ASP.NET AJAX-Enabled Web site project. See Creating an AJAX-Enabled ASP.NET Project for details.
Note that as you've created an AJAX-Enabled Web site, a ScriptManager control initially appears on the page.
2. In Source view add the following DIV tags to the body of your page, between the page's initial <div></div> tags:
<div id="row1" style="width: 480px; float:none; clear:both;">
<div id="box1" style="float:left;">
</div>
<div id="box2" style="float:left;">
</div>
<div id="box3" style="float:left;">
</div>
<div id="box4" style="float:left;">
</div>
</div>
<div id="row2" style="width: 480px; float:none; clear:both;">
<div id="box5" style="float:left;">
</div>
<div id="box6" style="float:left;">
</div>
<div id="box7" style="float:left;">
</div>
<div id="box8" style="float:left;">
</div>
</div>
This will create two rows, each containing four small boxes. Note that extra spaces were added within each box as placeholders.
3. Click the Design tab located below the Document window to switch to Design view.
Your page should look similar to the following image:
4. Click in the top-left box to select it, navigate to the Visual Studio Toolbox, and double-click the C1Expander control to add the control to the box. Repeat this step with each box to add a total of eight C1Expander controls to the page, one in each box (C1Expander1 to C1Expander 4 in the top row and C1Expander5 to C1Expander8 in the bottom row).
5. Delete the extra spaces used as placeholders in each box.
Your page will look similar to the following:
6. Run your application and observe that clicking on any C1Expander's header will collapse the C1Expander control. Clicking on a collapsed C1Expander's header will expand the control.
For example, when all of the controls are collapsed the page will look at follows:
In this step you added C1Expander controls to the form. In the next step of the quick start, you'll add content to those controls.
|
