Search

Adobe Spry フレームワークAdobe Spry: ウィジェット（UIコントロール）

フォーム入力チェック

2007/7/29

サンプルを見る
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax &raquo; Spry: ウィジェット（UIコントロール） &raquo; Form Validate（フォーム入力チェック）| PHP & JavaScript Room</title>
<script type="text/javascript" src="/content/spry/widgets/selectvalidation/SpryValidationSelect.js"></script>
<script type="text/javascript" src="/content/spry/widgets/textfieldvalidation/SpryValidationTextField.js"></script>
<script type="text/javascript" src="/content/spry/widgets/textareavalidation/SpryValidationTextarea.js"></script>
<script type="text/javascript" src="/content/spry/widgets/checkboxvalidation/SpryValidationCheckbox.js"></script>
<script type="text/javascript" src="/content/spry/widgets/radiovalidation/SpryValidationRadio.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/selectvalidation/SpryValidationSelect.css" />
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/textfieldvalidation/SpryValidationTextField.css" /> 
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/textareavalidation/SpryValidationTextarea.css" />
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/checkboxvalidation/SpryValidationCheckbox.css" />
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/radiovalidation/SpryValidationRadio.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/formvalidate/custom.css" />
</head>
<body>
<fieldset>
    <legend>Sample Form</legend>
    <form id="form1" name="form1" method="post" action="">
    <dl>
        <dt>名前</dt>
            <dd id="sprytextfield_username">
                <input type="text" id="username" name="username" value="" />
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="textfieldRequiredMsg">氏名を入力してください。</span>
                </div>
            </dd>
        <dt>年齢</dt>
            <dd id="sprytextfield_age">
                <input type="text" id="age" name="age" value="" size="3" maxlength="2" />才
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="textfieldRequiredMsg">年齢を入力してください。</span>
                    <span class="textfieldInvalidFormatMsg">整数値で入力してください。</span>
                </div>
            </dd>
        <dt>郵便番号</dt>
            <dd id="sprytextfield_zipcode">
                <input type="text" id="zipcode" name="zipcode" value="" />
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="textfieldRequiredMsg">郵便番号を入力してください。</span>
                </div>
            </dd>
        <dt>都道府県</dt>
            <dd id="spryselect_area">
                <select name="area" id="area">
                    <option value="" selected="selected">-- 選択してください --</option>
                    <optgroup label="北海道・東北地方">
                        <option value="北海道">北海道</option><option value="青森県">青森県</option><option value="岩手県">岩手県</option><option value="宮城県">宮城県</option><option value="秋田県">秋田県</option><option value="山形県">山形県</option><option value="福島県">福島県</option>
                    </optgroup>
                    <optgroup label="信越地方">
                        <option value="新潟県">新潟県</option><option value="長野県">長野県</option>
                    </optgroup>
                    <optgroup label="北陸地方">
                        <option value="富山県">富山県</option><option value="石川県">石川県</option><option value="福井県">福井県</option>
                    </optgroup>
                    <optgroup label="関東地方">
                        <option value="東京都">東京都</option><option value="神奈川県">神奈川県</option><option value="埼玉県">埼玉県</option><option value="千葉県">千葉県</option><option value="茨城県">茨城県</option><option value="栃木県">栃木県</option><option value="群馬県">群馬県</option><option value="山梨県">山梨県</option>
                    </optgroup>
                    <optgroup label="東海地方">
                        <option value="愛知県">愛知県</option><option value="岐阜県">岐阜県</option><option value="静岡県">静岡県</option><option value="三重県">三重県</option>
                    </optgroup>
                    <optgroup label="近畿地方">
                        <option value="大阪府">大阪府</option><option value="兵庫県">兵庫県</option><option value="京都府">京都府</option><option value="滋賀県">滋賀県</option><option value="奈良県">奈良県</option><option value="和歌山県">和歌山県</option>
                    </optgroup>
                    <optgroup label="中国地方">
                        <option value="鳥取県">鳥取県</option><option value="島根県">島根県</option><option value="岡山県">岡山県</option><option value="広島県">広島県</option><option value="山口県">山口県</option>
                    </optgroup>
                    <optgroup label="四国地方">
                        <option value="徳島県">徳島県</option><option value="香川県">香川県</option><option value="愛媛県">愛媛県</option><option value="高知県">高知県</option>
                    </optgroup>
                    <optgroup label="九州地方">
                        <option value="福岡県">福岡県</option><option value="佐賀県">佐賀県</option><option value="長崎県">長崎県</option><option value="熊本県">熊本県</option><option value="大分県">大分県</option><option value="宮崎県">宮崎県</option><option value="鹿児島県">鹿児島県</option><option value="沖縄県">沖縄県</option>
                    </optgroup>
                    <option value="海外">海外</option>
                </select>
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="selectRequiredMsg">都道府県を選択してください。</span>
                </div>
            </dd>
        <dt>住所</dt>
            <dd id="sprytextarea_address">
                <textarea name="address" id="address" cols="45" rows="5"></textarea>
                <!-- Add an error message -->
                <div class="errors">
                    <span id="my_counter_span"></span>文字
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="textareaRequiredMsg">住所が入力されていません。</span>
                    <span class="textareaMinCharsMsg">2文字以上入力してください。</span>
                </div>
            </dd>
        <dt>携帯電話番号</dt>
            <dd id="sprytextfield_phone">
                <input type="text" id="phone" name="phone" value="" />
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="textfieldRequiredMsg">携帯電話番号を入力してください。</span>
                    <span class="textfieldInvalidFormatMsg">(000)0000-0000形式で入力してください。</span>
                </div>
            </dd>
        <dt>URL</dt>
            <dd id="sprytextfield_url">
                <input type="text" id="url" name="url" value="" size="60" />
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="textfieldRequiredMsg">URLを入力してください。</span>
                    <span class="textfieldInvalidFormatMsg">「http://」「https://」「ftp://」から始まるURLを入力してください。</span>
                </div>
            </dd>
        <dt>メールアドレス</dt>
            <dd id="sprytextfield_email">
                <input type="text" id="email" name="email" value="" />
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="textfieldRequiredMsg">メールアドレスを入力してください。</span>
                    <span class="textfieldInvalidFormatMsg">メールアドレスが不正です。</span>
                </div>
            </dd>
        <dt>支払方法</dt>
            <dd id="spryradio_payment">
                <label for="radio_1"><input type="radio" id="radio_1" name="payment" value="郵便振替">郵便振替</label>
                <label for="radio_2"><input type="radio" id="radio_2" name="payment" value="銀行振込">銀行振込</label>
                <label for="radio_3"><input type="radio" id="radio_3" name="payment" value="代引">代引</label>
                <label for="radio_4"><input type="radio" id="radio_4" name="payment" value="クレジット">クレジット</label>
                <label for="radio_5"><input type="radio" id="radio_5" name="payment" value="コンビニ払い">コンビニ払い</label>
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="radioRequiredMsg">支払方法を選択してください。</span>
                </div>
               </dd>
        <dt>生年月日</dt>
            <dd id="sprytextfield_birth">
                <input type="text" id="birth" name="birth" value="" />
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="textfieldRequiredMsg">生年月日を入力してください。</span>
                    <span class="textfieldInvalidFormatMsg">yyyy/mm/dd形式で入力してください。存在しない年月日は入力できません。</span>
                </div>
            </dd>
        <dt>利用規約</dt>
            <dd id="sprycheckbox_agreement">
                <input type="checkbox" id="agreement" name="agreement" value="1"/>
                <label for="agreement">利用規約に同意する</label>
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="checkboxRequiredMsg">利用規約に同意してください。</span>
                </div>
            </dd>
        <dt>好きな映画のジャンル</dt>
            <dd id="sprycheckboxes_genru">
                <input type="checkbox" id="checkbox_1" name="movieGenru" value="hollor" />
                <label for="checkbox_1">ホラー</label>
                <input type="checkbox" id="checkbox_2" name="movieGenru" value="romance" />
                <label for="checkbox_2">ロマンス</label>
                <input type="checkbox" id="checkbox_3" name="movieGenru" value="action" />
                <label for="checkbox_3">アクション</label>
                <input type="checkbox" id="checkbox_4" name="movieGenru" value="human" />
                <label for="checkbox_4">ヒューマン</label>
                <input type="checkbox" id="checkbox_5" name="movieGenru" value="commedy" />
                <label for="checkbox_5">コメディ</label>
                <!-- Add an error message -->
                <div class="errors">
                    <img src="/module/include/ajax/adobespry_widget/formvalidate/valid.png" alt="Valid" class="validMsg" />
                    <span class="checkboxRequiredMsg">1つ以上選択してください。</span>
                    <span class="checkboxMaxSelectionsMsg">3つ以内で選択してください。</span>
                </div>
            </dd>
    </dl>
    <p class="buttons">
        <input type="submit" name="Submit" id="submit" value="送信" />
        <input type="reset" name="Reset" id="reset" value="リセット" />
    </p>
</form>
</fieldset>

<script type="text/javascript">
// 氏名
var sprytextfield_username = new Spry.Widget.ValidationTextField("sprytextfield_username", "none", {useCharacterMasking:true, validateOn:["change"]});
// 年齢
var sprytextfield_age = new Spry.Widget.ValidationTextField("sprytextfield_age", "integer", {minValue:1, maxValue:2, validateOn:["blur"]});
// 郵便番号
var sprytextfield_zipcode = new Spry.Widget.ValidationTextField("sprytextfield_zipcode", "zip_code", {useCharacterMasking:true, hint:"xxx-xxxx", format:"zip_custom", pattern:"000-0000", validateOn:["change"]});
// 都道府県
var spryselect_area = new Spry.Widget.ValidationSelect("spryselect_area", {validateOn:["change"]});
// 住所
var sprytextarea_address = new Spry.Widget.ValidationTextarea("sprytextarea_address", {hint:"市区町村、番地、アパートマンション名等を入力してください。入力可能な文字数は、2文字以上50文字未満です。", minChars:2, maxChars:50, counterType:"chars_remaining", counterId:"my_counter_span", validateOn:["change"]});
// 電話番号（整数値）
var sprytextfield_phone = new Spry.Widget.ValidationTextField("sprytextfield_phone", "custom", {useCharacterMasking:true, hint:"(000)0000-0000", pattern:"(000)0000-0000", validateOn:["change"]});
// メールアドレス
var sprytextfield_email = new Spry.Widget.ValidationTextField("sprytextfield_email", "email", {useCharacterMasking:true, validateOn:["blur"]});
// 支払い方法
var spryradio_payment = new Spry.Widget.ValidationRadio("spryradio_payment", {validateOn:["change"], maxSelection:1});
// 生年月日
var sprytextfield_birth = new Spry.Widget.ValidationTextField("sprytextfield_birth", "date", {useCharacterMasking:true, format:"yyyy/mm/dd", hint:"yyyy/mm/dd", validateOn:["change"]});
// 利用規約
var sprycheckbox_agreement = new Spry.Widget.ValidationCheckbox("sprycheckbox_agreement", {validateOn:["change"], maxSelection:1});
// ジャンル（最大選択数制限）
var sprycheckboxes_genru = new Spry.Widget.ValidationCheckbox("sprycheckboxes_genru", {validateOn:["change"], maxSelections:3});
// URL
var sprytextfield_url = new Spry.Widget.ValidationTextField("sprytextfield_url", "url", {validateOn:["change"]});
</script>
</body>
</html>

折りたたみパネル

2007/7/29

サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Ajax &raquo; Spry: ウィジェット（UIコントロール） &raquo; Collapsible Panel / CollapsiblePanelGroup（折りたたみパネル）| PHP & JavaScript Room</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spry CollapsiblePanel</title>
<script language="JavaScript" type="text/javascript" src="/content/spry/includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="/content/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/collapsiblepanel/custom.css" />
</head>
<body>
<div class="left">
    <p><strong>CollapsiblePanel</strong></p>
    <form action="#">
        <p>
            <input type="button" onclick="cp1.open();" value="Panel1を開く">
            <input type="button" onclick="cp1.close();" value="Panel1を閉じる">
        </p>
    </form>
    <div class="CollapsiblePanel" id="cp1">
        <div class="CollapsiblePanelTab" tabindex="0">Panel 1</div>
        <div class="CollapsiblePanelContent">
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
        </div>
    </div>
    <div class="CollapsiblePanel" id="cp2">
        <div class="CollapsiblePanelTab" tabindex="0">Panel 2</div>
        <div class="CollapsiblePanelContent">
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
        </div>
    </div>
    <div class="CollapsiblePanel" id="cp3">
        <div class="CollapsiblePanelTab" tabindex="0">Panel 3</div>
        <div class="CollapsiblePanelContent">
            Content for Panel 3 goes here!<br>
            Content for Panel 3 goes here!<br>
            Content for Panel 3 goes here!<br>
        </div>
    </div>
    <div class="CollapsiblePanel" id="cp4">
        <div class="CollapsiblePanelTab" tabindex="0">Panel 4</div>
        <div class="CollapsiblePanelContent">
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
        </div>
    </div>
    <div class="CollapsiblePanel" id="cp5">
        <div class="CollapsiblePanelTab"><a href="#">Panel 5</a></div>
        <div class="CollapsiblePanelContent">
            Content for Panel 5 goes here!<br>
            Content for Panel 5 goes here!<br>
            Content for Panel 5 goes here!<br>
            Content for Panel 5 goes here!<br>
            Content for Panel 5 goes here!<br>
        </div>
    </div>
    <script language="JavaScript" type="text/javascript">
    var cp1 = new Spry.Widget.CollapsiblePanel(
        "cp1",
        {
            /* 開閉時にアニメーションするか否か: true | false 
               デフォルトはtrue（アニメーションする）*/
            enableAnimation:true,
             /* アニメーションの速度: ミリ秒（1000ミリ秒=1秒）
               デフォルトは500ミリ秒 */
               duration:100
        }
    );
    var cp2 = new Spry.Widget.CollapsiblePanel("cp2");
    var cp3 = new Spry.Widget.CollapsiblePanel("cp3");
    var cp4 = new Spry.Widget.CollapsiblePanel("cp4");
    var cp5 = new Spry.Widget.CollapsiblePanel("cp5");
    </script>
</div>

<div class="right">
    <p><strong>CollapsiblePanelGroup</strong></p>
    <div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
        <div class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">Panel 1</div>
            <div class="CollapsiblePanelContent">
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
                Content for Panel 1 goes here!<br>
            </div>
        </div>
        <div class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">Panel 2</div>
            <div class="CollapsiblePanelContent">
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
                Content for Panel 2 goes here!<br>
            </div>
        </div>
        <div class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">Panel 3</div>
            <div class="CollapsiblePanelContent">
                Content for Panel 3 goes here!<br>
                Content for Panel 3 goes here!<br>
                Content for Panel 3 goes here!<br>
            </div>
        </div>
        <div class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">Panel 4</div>
            <div class="CollapsiblePanelContent">
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
                Content for Panel 4 goes here!<br>
            </div>
        </div>
        <div class="CollapsiblePanel">
            <div class="CollapsiblePanelTab"><a href="#">Panel 5</a></div>
            <div class="CollapsiblePanelContent">
                Content for Panel 5 goes here!<br>
                Content for Panel 5 goes here!<br>
                Content for Panel 5 goes here!<br>
                Content for Panel 5 goes here!<br>
                Content for Panel 5 goes here!<br>
            </div>
        </div>
    </div>
    <script language="JavaScript" type="text/javascript">
    var cpg1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1");
    </script>
</div>
</body>
</html>

アコーディオン

2007/7/29

サンプルを見る
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax &raquo; Spry: ウィジェット（UIコントロール） &raquo; Accordion（アコーディオン）| PHP & JavaScript Room</title>
<script language="JavaScript" type="text/javascript" src="/content/spry/widgets/accordion/SpryAccordion.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/accordion/SpryAccordion.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/accordion/custom.css" />
</head>
<body>
<form action="#">
    <p>
    <input type="button" onclick="acc1.openFirstPanel()" value="最初のパネルを開く">
    <input type="button" onclick="acc1.openNextPanel()" value="次のパネルを開く">
    <input type="button" onclick="acc1.openPreviousPanel()" value="前のパネルを開く">
    <input type="button" onclick="acc1.openLastPanel()" value="最後のパネルを開く">
    </p>
</form>
<div class="Accordion" id="AccodionPanel1" tabindex="0">
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Panel 1</div>
        <div class="AccordionPanelContent">
            Content for Panel 1 goes here!<br>
        </div>
    </div>
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Panel 2</div>
        <div class="AccordionPanelContent">
            Content for Panel 2 goes here!
        </div>
    </div>
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Panel 3</div>
        <div class="AccordionPanelContent">
            Content for Panel 3 goes here!
        </div>
    </div>
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Panel 4</div>
        <div class="AccordionPanelContent">
            Content for Panel 4 goes here!
        </div>
    </div>
</div>
<script language="JavaScript" type="text/javascript">
/*
デフォルトで開くパネルを指定する場合は、
オプションの第2引数に {defaultPanel:数値} を指定します。
デフォルトは「0」（最初のパネル）です。
*/
var acc1 = new Spry.Widget.Accordion(
    "AccodionPanel1",
    {
        /* ロード時に開くパネルを指定: 0 ～ (タブ数-1)
           デフォルトは 0（最初のパネル）*/
        defaultPanel:1,
        /* 開閉時にアニメーションするか否か: true | false 
           デフォルトはtrue（アニメーションする）*/
        enableAnimation:true,
        /* アニメーションの速度: ミリ秒（1000ミリ秒=1秒）
           デフォルトは500ミリ秒 */
        duration:500,
        /* パネルの高さ: CSS指定した値に固定するかコンテンツ量によって自動調整するか
           デフォルトはtrue（CSSで指定した値に固定）*/
        useFixedPanelHeights:true
    }
);
</script>
</body>
</html>

スライドパネル

2007/7/29

サンプルを見る
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax &raquo; Spry: ウィジェット（UIコントロール） &raquo; Sliding Panels（スライドパネル）| PHP & JavaScript Room</title>
<script type="text/javascript" src="/content/spry/widgets/slidingpanels/SprySlidingPanels.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/slidingpanels/SprySlidingPanels.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/slidingpanels/custom.css" />
</head>
<body>
<a href="#" onclick="sp1.showFirstPanel(); return false;">最初</a> |
<a href="#" onclick="sp1.showPreviousPanel(); return false;">前へ</a> |
<a href="#" onclick="sp1.showNextPanel(); return false;">次へ</a> |
<a href="#" onclick="sp1.showLastPanel(); return false;">最後</a>

<div id="SlidingPanels1" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
        <div id="p1" class="SlidingPanelsContent">
            <p>Panel 1</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="p2" class="SlidingPanelsContent">
            <p>Panel 2</p>
            <p>Panel 2</p>
            <p>Panel 2</p>
            <p>Panel 2</p>
        </div>
        <div id="p3" class="SlidingPanelsContent">
            <p>Panel 3</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="p4" class="SlidingPanelsContent">
            <p>Panel 4</p>
            <p>Panel 4</p>
            <p>Panel 4</p>
            <p>Panel 4</p>
            <p>Panel 4</p>
            <p>Panel 4</p>
        </div>
    </div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1");
</script>
</body>
</html>

タブパネル

2007/7/29

サンプルを見る
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax &raquo; Spry: ウィジェット（UIコントロール） &raquo; Tabbed Panels（タブパネル）| PHP & JavaScript Room</title>
<script type="text/javascript" src="/content/spry/widgets/tabbedpanels/SpryTabbedPanels.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/tabbedpanels/SpryTabbedPanels.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/tabbedpanels/custom.css" />
</head>
<body>
<p>
    <input type="button" value="最初のパネルを表示" onclick="tps1.showPanel(0)" >
    <input type="button" value="最後のパネルを表示" onclick="tps1.showPanel(2)" >
</p>
<div class="TabbedPanels" id="TabbedPanel1">
    <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
            <h3>Tab 1 Content</h3>
            <p>あああああああああああああ</p>
        </div>
        <div class="TabbedPanelsContent">
            <h3>Tab 2 Content</h3>
            <p>いいいいいいいいいいいいい</p>
        </div>
        <div class="TabbedPanelsContent">
            <h3>Tab 3 Content</h3>
            <p>ううううううううううううう</p>
        </div>
    </div>
</div>

<script type="text/javascript">
var tps1 = new Spry.Widget.TabbedPanels(
    "TabbedPanel1",
    {
        /*
        デフォルトで開くタブを指定する場合は、
        オプションの第2引数に {defaultTab:数値} を指定します。
        デフォルトは「0」（最初のタブ）です。
        */
        defaultTab:2
    }
);
</script>
</body>
</html>

メニューバー

2007/7/29

サンプルを見る
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adobe Spry: メニューバー・ウィジェット</title>
<script type="text/javascript" src="/content/spry/widgets/menubar/SpryMenuBar.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/menubar/SpryMenuBarVertical.css" />
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/menubar/SpryMenuBarHorizontal.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/menubar/custom.css" />
</head>
<body>
<h1>Adobe Spry: メニューバー・ウィジェット</h1>
<h2>Horizontal（横型）</h2>
<ul id="menubarH" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
  </li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 4</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 4.1.1</a></li>
              <li><a href="#">Item 4.1.2</a>
                <ul>
                  <li><a href="#">Item 4.1.2.1</a></li>
                  <li><a href="#">Item 4.1.2.2</a></li>
                  <li><a href="#">Item 4.1.2.3</a>
                    <ul>
                      <li><a href="#">Item 4.1.2.3.1</a></li>
                      <li><a href="#">Item 4.1.2.3.2</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
        </li>
        <li><a href="#">Item 4.2</a></li>
        <li><a href="#">Item 4.3</a></li>
      </ul>
  </li>
</ul>

<h2>Vertical（縦型）</h2>
<ul id="menubarV" class="MenuBarVertical">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
<!--
var menubarH=new Spry.Widget.MenuBar(
    "menubarH",
    {
        /* プレロードする矢印画像を指定 */
        imgDown:"SpryMenuBarDownHover.gif", imgRight:"SpryMenuBarRightHover.gif"
    }
);
var menubarV=new Spry.Widget.MenuBar(
    "menubarV",
    {
    /* プレロードする矢印画像を指定 */
        imgRight:"SpryMenuBarRightHover.gif"
    }
);
//-->
</script>
</body>
</html>

入力補完

2007/7/29

サンプルを見る
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax &raquo; Spry: ウィジェット（UIコントロール） &raquo; Auto Suggest（入力補完）| PHP & JavaScript Room</title>
<script language="JavaScript" type="text/javascript" src="/content/spry/includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="/content/spry/includes/SpryData.js"></script>
<script type="text/javascript" src="/content/spry/widgets/autosuggest/SpryAutoSuggest.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/autosuggest/SpryAutoSuggest.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/autosuggest/custom.css" />
</head>
<body>

<div id="mySuggest">
  <form action="#">
    <p>「a」を入力してみてください。</p>
    <p>Adobe製品：<input type="text" /><input type="reset" value="クリア" /></p>
  </form>
  <div id="resultsDIV" spry:region="ds1">
    <ul>
      <li spry:repeat="ds1" spry:suggest="{name}">{name}</li>
    </ul>
  </div>
</div>
<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet(
/* 製品情報XMLを読み込む */
    "/content/spry/samples/products-hijax/products.xml",
/* XMLの親ノードとデータ部分のループする子ノード名を指定 */
    "products/product"
);
var theSuggest = new Spry.Widget.AutoSuggest(
    "mySuggest",
    "resultsDIV",
    "ds1",
    "name"
);
</script>

</body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2024 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women