一覧から削除
一覧から削除のレイアウトについての章です。
車両選択画面
車両選択画面のレイアウトは「t-selection」クラス内の「t-container」クラス内に下記を参考に記述してください。
<body>
<div class="t-selection">
<section class="t-container">
<div class="t-selection-body">
<div class="t-selection-body-header">
<p class="t-selection-body-header-text">一覧から削除するご契約を選択してください。</p>
</div><!-- /.t-selection-body-header -->
<div class="t-selection-body-list">
<a href="config.php" class="t-selection-body-list-item">
<span class="t-selection-body-list-item-adjust">
<div class="t-selection-body-list-item-header">
<div class="t-selection-body-list-item-header-number">
<div class="t-selection-body-list-item-header-number-upper">
<div class="t-selection-body-list-item-header-number-upper-first">品川</div>
<div class="t-selection-body-list-item-header-number-upper-second">333</div>
</div><!-- /.t-selection-body-list-item-header-number-upper -->
<div class="t-selection-body-list-item-header-number-body">
<div class="t-selection-body-list-item-header-number-body-parm">さ</div>
<div class="t-selection-body-list-item-header-number-body-box">
<div class="t-selection-body-list-item-header-number-body-box-first">12</div>
<div class="t-selection-body-list-item-header-number-body-box-second">34</div>
</div><!-- /.t-selection-body-list-item-header-number-body-box -->
</div><!-- /.t-selection-body-list-item-header-number-body -->
</div><!-- /.t-selection-body-list-item-header-number -->
<div class="t-selection-body-list-item-header-car">クラウン</div>
</div><!-- /.t-selection-body-list-item-header -->
<div class="t-selection-body-list-item-body">
<div class="t-selection-body-list-item-body-item-first">F123456789</div>
<div class="t-selection-body-list-item-body-item-second">21/3/14～22/3/14</div>
</div><!-- /.t-selection-body-list-item-body -->
</span>
</a>
<a href="config.php" class="t-selection-body-list-item">
<span class="t-selection-body-list-item-adjust">
<div class="t-selection-body-list-item-header">
<div class="t-selection-body-list-item-header-number">
<div class="t-selection-body-list-item-header-number-upper">
<div class="t-selection-body-list-item-header-number-upper-first">品川</div>
<div class="t-selection-body-list-item-header-number-upper-second">333</div>
</div><!-- /.t-selection-body-list-item-header-number-upper -->
<div class="t-selection-body-list-item-header-number-body">
<div class="t-selection-body-list-item-header-number-body-parm">さ</div>
<div class="t-selection-body-list-item-header-number-body-box">
<div class="t-selection-body-list-item-header-number-body-box-first">12</div>
<div class="t-selection-body-list-item-header-number-body-box-second">34</div>
</div><!-- /.t-selection-body-list-item-header-number-body-box -->
</div><!-- /.t-selection-body-list-item-header-number-body -->
</div><!-- /.t-selection-body-list-item-header-number -->
<div class="t-selection-body-list-item-header-car">レクサス</div>
</div><!-- /.t-selection-body-list-item-header -->
<div class="t-selection-body-list-item-body">
<div class="t-selection-body-list-item-body-item-first">F123456789</div>
<div class="t-selection-body-list-item-body-item-second">21/3/14～22/3/14</div>
</div><!-- /.t-selection-body-list-item-body -->
</span>
</a>
</div><!-- /.t-selection-body-list -->
</div><!-- /.t-selection-body -->
</section><!-- /.t-container -->
</div><!-- /.t-selection -->
</body>
設定画面：一覧から削除するご契約
設定画面：一覧から削除するご契約のレイアウトは「t-contract_delete」クラス内の「t-container」クラス内に下記を参考に記述してください。
一覧から削除するご契約
| 車名 | クラウン |
|---|---|
| 登録番号 | 品川333さ1234 |
| 証券番号 | F123456789 |
| 保険期間 | 21/03/14～22/03/14 |
<body>
<div class="t-contract_delete">
<section class="t-container">
<div class="t-contract_delete-body">
<div class="t-contract_delete-body-user">
<div class="t-contract_delete-body-user-box">
<h2 class="t-contract_delete-body-user-title">一覧から削除するご契約</h2>
<table class="t-contract_delete-body-user-table">
<tbody>
<tr>
<th>車名</th>
<td>クラウン</td>
</tr>
<tr>
<th>登録番号</th>
<td>品川333さ1234</td>
</tr>
<tr>
<th>証券番号</th>
<td>F123456789</td>
</tr>
<tr>
<th>保険期間</th>
<td>21/03/14～22/03/14</td>
</tr>
</tbody>
</table><!-- /.t-contract_delete-body-user-table -->
</div><!-- /.t-contract_delete-body-user-box -->
</div><!-- /.t-contract_delete-body-user -->
</div><!-- /.t-contract_delete-body -->
</section>
</div><!-- /.t-contract_delete -->
</body>
設定画面：メールアドレス・パスワードの変更
設定画面：メールアドレス・パスワードの変更のレイアウトは「t-contract_delete」クラス内の「t-container」クラス内に下記を参考に記述してください。
$(window).on('load')時、選択肢（メールアドレスのみ変更する／パスワードのみ変更する／メールアドレスとパスワードを変更する）のエラー状況をチェックし、入力エリアの表示／非表示を管理しています。
エラーの設定方法は「t-contract_delete-body-user-box-item」classに「is_error」classを追記してください
メールアドレス・パスワードの変更
| ログイン中のメールアドレス | |
|---|---|
| ログイン中のパスワード | |
| 変更後のメールアドレス | |
| 変更後のメールアドレス（確認） |
| ログイン中のパスワード | |
|---|---|
| 変更後のパスワード | |
| 変更後のパスワード（確認） |
| ログイン中のメールアドレス | |
|---|---|
| ログイン中のパスワード | |
| 変更後のメールアドレス | |
| 変更後のメールアドレス（確認） | |
| 変更後のパスワード | |
| 変更後のパスワード（確認） |
<body>
<div class="t-contract_delete">
<section class="t-container">
<div class="t-contract_delete-body">
<div class="t-contract_delete-body-user">
<div class="t-contract_delete-body-user-box">
<h2 class="t-contract_delete-body-user-title">メールアドレス・パスワードの変更</h2>
<div class="t-contract_delete-body-user-box-selectarea">
<div class="t-contract_delete-body-user-box-selectarea-item-1" data-select="select-1">
<div class="t-contract_delete-body-user-box-selectarea-item-icon">メールアドレスのみ変更する</div>
</div>
<div class="t-contract_delete-body-user-box-selectarea-item-2" data-select="select-2">
<div class="t-contract_delete-body-user-box-selectarea-item-icon">パスワードのみ変更する</div>
</div>
<div class="t-contract_delete-body-user-box-selectarea-item-3" data-select="select-3">
<div class="t-contract_delete-body-user-box-selectarea-item-icon">メールアドレスとパスワードを変更する</div>
</div>
</div><!-- /.t-contract_delete-body-user-box-selectarea -->
<!-- メールアドレスを変更 -->
<div id="item-1" class="t-contract_delete-body-user-box-item">
<table class="t-contract_delete-body-user-box-table">
<tbody>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">ログイン中のメールアドレス</th>
<td><input type="text" name="t-contract_delete-config-mail-1" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">ログイン中のパスワード</th>
<td><input type="password" name="t-contract_delete-config-mail-2" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">変更後のメールアドレス</th>
<td><input type="text" name="t-contract_delete-config-mail-3" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">変更後のメールアドレス（確認）</th>
<td><input type="text" name="t-contract_delete-config-mail-4" value="" class="t-contract_delete-body-user-input"></td>
</tr>
</tbody>
</table><!-- /.t-contract_delete-body-user-box-table -->
</div><!-- /.t-contract_delete-body-user-box-item -->
<!-- パスワードを変更 -->
<div id="item-2" class="t-contract_delete-body-user-box-item">
<table class="t-contract_delete-body-user-box-table">
<tbody>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">ログイン中のパスワード</th>
<td><input type="password" name="t-contract_delete-config-password-1" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">変更後のパスワード</th>
<td><input type="password" name="t-contract_delete-config-password-2" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">変更後のパスワード（確認）</th>
<td><input type="password" name="t-contract_delete-config-password-3" value="" class="t-contract_delete-body-user-input"></td>
</tr>
</tbody>
</table><!-- /.t-contract_delete-body-user-box-table -->
</div><!-- /.t-contract_delete-body-user-box-item -->
<!-- 両方変更 -->
<div id="item-3" class="t-contract_delete-body-user-box-item">
<table class="t-contract_delete-body-user-box-table">
<tbody>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">ログイン中のメールアドレス</th>
<td><input type="text" name="t-contract_delete-config-both-1" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">ログイン中のパスワード</th>
<td><input type="password" name="t-contract_delete-config-both-2" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">変更後のメールアドレス</th>
<td><input type="text" name="t-contract_delete-config-both-3" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">変更後のメールアドレス（確認）</th>
<td><input type="text" name="t-contract_delete-config-both-4" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">変更後のパスワード</th>
<td><input type="password" name="t-contract_delete-config-both-5" value="" class="t-contract_delete-body-user-input"></td>
</tr>
<tr>
<th class="t-contract_delete-body-user-box-table-form_title">変更後のパスワード（確認）</th>
<td><input type="password" name="t-contract_delete-config-both-6" value="" class="t-contract_delete-body-user-input"></td>
</tr>
</tbody>
</table><!-- /.t-contract_delete-body-user-box-table -->
</div><!-- /.t-contract_delete-body-user-box-item -->
<div class="button-group">
<div class="t-btn t-btn-primary t-contract_delete-body-user-button is_disabled">変 更</div>
</div><!-- /.button-group -->
</div><!-- /.t-contract_delete-body-user-box -->
</div><!-- /.t-contract_delete-body-user -->
</div><!-- /.t-contract_delete-body -->
</section>
</div><!-- /.t-contract_delete -->
</body>
設定画面：メールアドレス・パスワードの変更：パラメータの受け渡し
「登録」ボタンをクリックすると、選択中の項目に応じたパラメータをモーダル内のinputにセットします。
モーダルの「戻る」をクリックするとモーダル内のinputをクリアします。
モーダルの「OK」をクリックするとsubmitします。
（※関連ファイル：contract_delete.js）
完了画面：メールのみ
完了画面：メールのみのレイアウトは「t-contract_delete」クラス内の「t-container」クラス内に下記を参考に記述してください。
<body>
<div class="t-contract_delete">
<form action="" name="contract_delete_input" method="post">
<section class="t-container">
<div class="t-contract_delete-body">
<div class="t-contract_delete-body-header">
</div><!-- /.t-contract_delete-body-header -->
<div class="t-contract_delete-body-user">
<div class="t-contract_delete-body-user-box">
<p class="t-contract_delete-body-user-text">変更後のメールアドレス宛に確認メールを送信しました。確認メールに記載のURLに接続し、手続きを完了してください。<br>本画面は閉じ、手続き完了後に改めてログインしてください。</p>
</div><!-- /.t-contract_delete-body-user-box -->
</div><!-- /.t-contract_delete-body-user -->
</div><!-- /.t-contract_delete-body -->
</section>
</form>
</div><!-- /.t-contract_delete -->
</body>
完了画面：パスワードのみ
完了画面：パスワードのみのレイアウトは「t-contract_delete」クラス内の「t-container」クラス内に下記を参考に記述してください。
<body>
<div class="t-contract_delete">
<form action="" name="contract_delete_input" method="post">
<section class="t-container">
<div class="t-contract_delete-body">
<div class="t-contract_delete-body-header">
</div><!-- /.t-contract_delete-body-header -->
<div class="t-contract_delete-body-user">
<div class="t-contract_delete-body-user-box">
<p class="t-contract_delete-body-user-text">パスワードが変更されました。<br>本画面を閉じ、改めてログインを行ってください。</p>
</div><!-- /.t-contract_delete-body-user-box -->
</div><!-- /.t-contract_delete-body-user -->
</div><!-- /.t-contract_delete-body -->
</section>
</form>
</div><!-- /.t-contract_delete -->
</body>
完了画面：両方
完了画面：両方のレイアウトは「t-contract_delete」クラス内の「t-container」クラス内に下記を参考に記述してください。
<body>
<div class="t-contract_delete">
<form action="" name="contract_delete_input" method="post">
<section class="t-container">
<div class="t-contract_delete-body">
<div class="t-contract_delete-body-header">
</div><!-- /.t-contract_delete-body-header -->
<div class="t-contract_delete-body-user">
<div class="t-contract_delete-body-user-box">
<p class="t-contract_delete-body-user-text">変更後のメールアドレス宛に確認メールを送信しました。確認メールに記載のURLに接続し、手続きを完了してください。<br>本画面は閉じ、手続き完了後に改めてログインしてください。</p>
</div><!-- /.t-contract_delete-body-user-box -->
</div><!-- /.t-contract_delete-body-user -->
</div><!-- /.t-contract_delete-body -->
</section>
</form>
</div><!-- /.t-contract_delete -->
</body>