Picker Modal

优质

小牛编辑

129浏览

2023-12-01

Picker Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content

Picker Modal HTML Layout

Picker Modal layout is pretty simple, just add it somewhere in the end of the <body>

<body>
  ...
  <!-- Picker Modal Container -->
  <div class="picker-modal">
    <!-- Picker Modal Toolbar, optional -->
    <div class="toolbar">
      <div class="toolbar-inner">
        <div class="left"></div>
        <div class="right">
<a href="#" class="link close-picker">Done</a>
        </div>
      </div>
    </div>
    <!-- Picker Modal Inner -->
    <div class="picker-modal-inner">
      <!-- Picker content -->
      <div class="content-block">
        <p>Integer mollis nulla id nibh elementum finibus...</p>
      </div>
    </div>
  </div>
 
</body>

Open and Close Picker Modal

From HTML

It is possible to open and close required Picker Modal using special classes and data attributes on links:

To open picker we need to add "open-picker" class to any HTML element (prefered to link)
To close picker we may add "close-picker" class to any HTML element (prefered to link)
If you have more than one picker in app, you need to specify appropriate picker via additional data-picker=".my-picker-modal" attribute on this HTML element

<body>
  <div class="views">
    <div class="view view-main">
      <div class="pages">
        <div data-page="home" class="page navbar-fixed">
<div class="navbar">
  <div class="navbar-inner">
    <!-- In data-picker attribute we specify CSS selector of picker we need to open-->
    <div class="left"></div>
    <div class="center">Picker Modal</div>
    <div class="right">
      <a href="#" data-picker=".picker-1" class="link open-picker">Picker</a>
    </div>
  </div>
</div>
<div class="page-content">
  <div class="content-block">
    <!-- In data-picker attribute we specify CSS selector of picker we need to open-->
    <p><a href="#" data-picker=".picker-1" class="open-picker">Open Picker </a></p>
    <!-- Link to close picker-->
    <p><a href="#" data-picker=".picker-1" class="close-picker">Close Picker </a></p>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>
  <!-- Picker -->
  <div class="picker-modal picker-1">
    <div class="toolbar">
      <div class="toolbar-inner">
        <div class="left"></div>
        <div class="right"><a href="#" class="close-picker">Done</a></div>
      </div>
    </div>
    <div class="picker-modal-inner">
      <div class="content-block">
        <h4>Info 1</h4>
        <p>Lorem ipsum dolor...</p>
      </div>
    </div>
  </div>
</body>

Using JavaScript

We can also open and close Picker Modal with JavaScript, for this we need to look at related App methods:

myApp.pickerModal(picker) - open specified Picker Modal

picker - HTMLElement or string (with CSS Selector) of Picker to open. Requred
This method returns Picker's HTMLElement

myApp.closeModal(picker) - close Picker

picker - HTMLElement or string (with CSS Selector). Optional. If not specified, any opened Picker will be closed

<body>
  <div class="views">
    <div class="view view-main">
      <div class="pages">
        <div data-page="home" class="page navbar-fixed">
<div class="navbar">
  <div class="navbar-inner">
    <div class="left"></div>
    <div class="center">Picker Modal</div>
    <div class="right">
      <a href="#" class="link open-info">Info</a>
    </div>
  </div>
</div>
<div class="page-content">
  <div class="content-block">
    <p><a href="#" class="open-info">Open Info </a></p>
    <p><a href="#" class="close-info">Close Info </a></p>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>
  <div class="picker-modal picker-info">
    <div class="toolbar">
      <div class="toolbar-inner">
        <div class="left"></div>
        <div class="right"><a href="#" class="close-picker">Done</a></div>
      </div>
    </div>
    <div class="picker-modal-inner">
      <div class="content-block">
        <h4>Info 1</h4>
        <p>Lorem ipsum dolor ...</p>
      </div>
    </div>
  </div>
</body>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.open-info').on('click', function () {
  myApp.pickerModal('.picker-info')
});
$$('.close-info').on('click', function () {
  myApp.closeModal('.picker-info')
});

Dynamic Picker Modal

Framework7 allows you to create Picker Modals dynamically by passing its HTML to related App methods:

myApp.pickerModal(pickerHTML, removeOnClose) - open Picker with pickerHTML

pickerHTML - string. HTML string of picker
removeOnClose - boolean. Optional, by default - true. If true then Picker will be removed from DOM when closed
This method returns dynamically created Picker's HTMLElement

<div class="page-content">
  <div class="content-block">
    <p><a href="#" class="create-picker">Create Picker</a></p>
    <p><a href="#" class="close-picker">Close Picker</a></p>
  </div>
</div>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.create-picker').on('click', function () {
  // Check first, if we already have opened picker
  if ($$('.picker-modal.modal-in').length > 0) {
    myApp.closeModal('.picker-modal.modal-in');
  }
  myApp.pickerModal(
    '<div class="picker-modal">' +
      '<div class="toolbar">' +
        '<div class="toolbar-inner">' +
'<div class="left"></div>' +
'<div class="right"><a href="#" class="close-picker">Close</a></div>' +
        '</div>' +
      '</div>' +
      '<div class="picker-modal-inner">' +
        '<div class="content-block">' +
'<p>Lorem ipsum dolor ...</p>' +
        '</div>' +
      '</div>' +
    '</div>'
  )
});

Picker Events

Picker has the same events as any Modal

Event	Target	Description
open	Picker Element<div class="picker-modal">	Event will be triggered when Picker starts its opening animation
opened	Picker Element<div class="picker-modal">	Event will be triggered after Picker completes its opening animation
close	Picker Element<div class="picker-modal">	Event will be triggered when Picker starts its closing animation
closed	Picker Element<div class="picker-modal">	Event will be triggered after Picker completes its closing animation