example
描述 (Description)
您还可以使用HTML到App方法创建动态选择器模式。 它使用两个参数 -
pickerHTML - 它包含pickerHTML模态的字符串元素。
removeOnClose - 它包含布尔值，当您关闭Picker时，它将从DOM中删除。 默认情况下，它包含真值。
例子 (Example)
以下示例演示了在Framework7中使用动态选择器模式 -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Dynamic Picker Modal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="center sliding">Dynamic Picker Modal</div>
</div>
</div>
<div class="pages">
<div data-page="index" class="page navbar-fixed">
<div class="page-content">
<div class="content-block">
<p><a href="#" class="create-modal-picker">Open Picker</a></p>
<p><a href="#" class="close-picker">Close Picker</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// Here you can initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
$$('.create-modal-picker').on('click', function () {
//Here you can check whether we have already opened picker or not
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">Ok</a></div>' +
'</div>' +
'</div>' +
'<div class="picker-modal-inner">' +
'<div class="content-block">' +
'<p>Framework7 - is a free and open source mobile HTML framework to
develop hybrid mobile apps or web apps with iOS & Android native look
and feel. It is also an indispensable prototyping apps tool to show
working app prototype as soon as possible in case you need to.</p>' +
'</div>' +
'</div>' +
'</div>'
)
});
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的picker_modal_dynamic.html文件。
以http://localhost/picker_modal_dynamic.html打开此HTML文件，输出显示如下。
