移动端安卓和IOS开发框架Framework7教程-Picker Modal

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>
...
<div class="picker-modal">
<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>
<div class="picker-modal-inner">
<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">
<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">
<p><a href="#" data-picker=".picker-1" class="open-picker">Open Picker </a></p>
<p><a href="#" data-picker=".picker-1" class="close-picker">Close Picker </a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<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