C1SuperPanel コントロールへのコンテンツの追加は、コントロールの本体をクリックして、テキストを入力したり、コントロールを追加したりするだけでできます。以下の各手順では、「手順 1：アプリケーションの作成」トピックを完了したものと想定しています。
コンテンツを C1SuperPanel に追加するには、次の各手順を実行します。
<div> タグ内に次のマークアップを追加し、elements クラスを作成して、C1SuperPanel コントロール内に表示される各要素のスタイルを取得します。
| ソースビュー |
コードのコピー
|
|---|---|
<div class="elements"> <div style="padding: 25px;"> |
|
<cc1:C1SuperPanel> タグ内に次のタグを追加し、ボタンとテキストを追加して、Height と Width プロパティを設定します。
| ソースビュー |
コードのコピー
|
|---|---|
Width="300px" Height="300px" |
|
<ContentTemplate></ContentTemplate> タグを <cc1:C1SuperPanel></cc1:C1SuperPanel> タグ内部に追加して、C1SuperPanel のコンテンツテンプレートを作成します。タグ内に、コンテンツテンプレート内の各要素のスタイルを定義するクラスを作成します。ソースコードは、次のようになるはずです。
| ソースビュー |
コードのコピー
|
|---|---|
<ContentTemplate>
<ul class="elements" style="height: 1011px; width: 1820px;">
<li><p>0</p><a href="#" title="" class="back">前へ</a></li>
<li><p>1</p><a href="#" title="" class="back">前へ</a></li>
<li><p>2</p><a href="#" title="" class="back">前へ</a></li>
<li><p>3</p><a href="#" title="" class="back">前へ</a></li>
<li><p>4</p><a href="#" title="" class="back">前へ</a></li>
<li><p>5</p><a href="#" title="" class="back">前へ</a></li>
<li><p>6</p><a href="#" title="" class="back">前へ</a></li>
<li><p>7</p><a href="#" title="" class="back">前へ</a></li>
<li><p>8>/p>>a href="#" title="" class="back">前へ</a></li>
<li><p>9</p><a href="#" title="" class="back">前へ</av</li>
<li><p>10</p><a href="#" title="" class="back">前へ</a></li>
<li><p>11</p><a href="#" title="" class="back">前へ</a></li>
<li><p>12</p><a href="#" title="" class="back">前へ</a></li>
<li>><p>13</p><a href="#" title="" class="back">前へ</a></li>
<li><p>14</p><a href="#" title="" class="back">前へ</a></li>
<li><p>15</p><a href="#" title="" class="back">前へ</a></li>
<li><p>16</p<a href="#" title="" class="back">前へ</a></li>
<li><p>17</p<a href="#" title="" class="back">前へ</a></li>
<li><p>18</p<a href="#" title="" class="back">前へ</a></li>
<li><p>19</p<a href="#" title="" class="back">前へ</a></li>
<li><p>20</p<a href="#" title="" class="back">前へ</a></li>
<li id="t1"><p>21</p><a href="#" title="" class="back">前へ</a></li>
<li><p>22</p><a href="#" title="" class="back">前へ</a></li>
<li><p>23</p><a href="#" title="" class="back">前へ</a></li>
<li><p>24</p><a href="#" title="" class="back">前へ</a></li>
<li><p>25</p><a href="#" title="" class="back">前へ</a></li>
<li><p>26</p><a href="#" title="" class="back">前へ</a></li>
<li><p>27</p><a href="#" title="" class="back">前へ</a></li>
<li><p>28</p><a href="#" title="" class="back">前へ</a></li>
<li><p>29</p><a href="#" title="" class="back">前へ</a></li>
</ul>
</ContentTemplate>
</cc1:C1SuperPanel>
</div>
</div>
|
|
<head> タグと<head> タグの間に追加します。
| ソースビュー |
コードのコピー
|
|---|---|
<style type="text/css">
.elements ul
{
padding: 0px;
margin: 0px;
}
.elements ul li {
background-color:#DDDDDD;
border:1px solid black;
font-weight:bolder;
height:100px;
padding:50px;
position:relative;
text-align:center;
width:200px;
}
.elements li {
float:left;
list-style: none none outside;
}
</style>
|
|
この手順では、コンテンツをC1SuperPanel コントロールに追加しました。次の手順では、C1SuperPanel のスクロール設定をカスタマイズします。