座位圖多重選取

簡介

此範例允許在座位圖中按一下即可多重選取座位：當使用者想要預訂相鄰座位而無需多次點擊時，這非常有用；如需基本座位圖範例，請前往此處。

設定

此外，必須在標頭中匯入使用的 AMP 元件：amp-pan-zoom 用於使座位圖可縮放和捲動

<script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>

amp-bind 用於啟用座位選取

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

amp-list 用於顯示座位清單

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

amp-mustache 用於呈現 amp-list 內容

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

amp-selector 用於在座位圖上選取座位

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

座位圖狀態

在此我們使用名為 seatMultiSelection 的 amp-state 來保存座位選取的所有實用資訊。

我們從伺服器載入相鄰座位的清單
selectedSeats 包含選取的座位 ID 清單
numberOfSeats 包含我們想要自動選取的座位數量

<amp-state id="seatMultiSelection" src="https://amp.dev.org.tw/static/samples/json/seatmap-neighbours.json">
  <script type="application/json">
  {
    "selectedSeats": [],
    "numberOfSeats": 3
  }
  </script>
</amp-state>

具有多重選取的座位圖

每次選取座位時，我們會自動選取其右側的 2 個座位。如果所選座位右側的座位數量少於 2 個，我們只會選取該行剩餘的座位。

座位圖

<div class="seatmap-container">
 <h1>Seat map</h1>
 <amp-list layout="fill" src="https://amp.dev.org.tw/static/samples/json/seats.json" binding="refresh" items="." single-item noloading>
   <template type="amp-mustache">
     <amp-pan-zoom layout="fill" class="seatmap">
       <amp-selector on="select:AMP.setState({
         seatMultiSelection: {
           selectedSeats: event.selectedOptions.concat(
                         seatMultiSelection.neighbours[event.selectedOptions[0]].slice(0, seatMultiSelection.numberOfSeats-1))
           }
         })" layout="fill">
         <div class="svg-container">
           <svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 {{width}} {{height}}">
           {{#seats}}
             <rect option="{{id}}" role="button" tabindex="0" class="seat {{unavailable}}" [class]="seatMultiSelection.selectedSeats.indexOf('{{id}}') != -1 ? 'selected seat {{unavailable}}' : 'seat {{unavailable}}'" x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}" rx="{{rx}}" ry="{{ry}}">
         </rect>
           {{/seats}}
           </svg>
         </div>
       </amp-selector>
     </amp-pan-zoom>
   </template>
   <div placeholder>
     <svg class="disabled" viewBox="0 0  " preserveAspectRatio="xMidYMin slice">
       </svg>
     </div>
 </amp-list>
 </div>

需要進一步說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，以討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。

在 GitHub 上編輯範例

作者 @kul3r4