MUI选择器

最新推荐文章于 2024-05-13 13:38:23 发布

ZenPower

最新推荐文章于 2024-05-13 13:38:23 发布

阅读量1.5w

点赞数 6

分类专栏： PHP MUI 文章标签： MUI PopPicker Picker

本文链接：https://blog.csdn.net/mypowerhere/article/details/79356091

版权

PHP 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

MUI

2 篇文章 0 订阅

订阅专栏

MUI框架扩展了Picker组件，可用于弹出单级或多级选择器，poppicker和dtpicker是对picker的具体实现

【PopPicker示例】

注：PopPicker组件依赖mui.picker.js/.css和mui.poppicker.js/.css，请务必在mui.js/css后中引用。

1. 初始化PopPicker组件对象

var picker = new mui.PopPicker();

2. 给对象设置数据集

picker.setData([{value:'fish',text:'鱼'},{value:'paws',text:'熊掌'}]);

3. 显示PopPicker对象

picker.show(SelectedItemsCallback)

注：SelectedItemsCallback为回调函数

下面直接上代码：）

<html>  
  <head>  
      <meta charset="utf-8">
      <title>PopPicker</title>
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />     
      <!--标准mui.css-->
      <link rel="stylesheet" href="css/mui.min.css">
      <!--App自定义的css-->
      <link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
      <link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
  </head>  
  <body>   
    <div class="mui-content">  
      <button id='subinvman_sel' class="mui-btn mui-btn-block" type='button'>鱼与熊掌</button> 
    </div>  
    
    <!--引用js文件-->
    <script src="../../js/jquery-1.11.2.min.js"></script>
    <script src="js/mui.min.js"></script>	
    <script src="js/mui.picker.min.js"></script>
    <script type="text/javascript">
      mui.init({
        swipeBack:true //启用右滑关闭功能
      });
		  
      //PopPicker选择器
      var subinvman_sel=$("#subinvman_sel")[0];
      if(subinvman_sel)
      {				
        var picker=new mui.PopPicker(); 
	picker.setData([{value:'fish',text:'鱼'},{value:'paws',text:'熊掌'}]);
	document.querySelector("#subinvman_sel").addEventListener("tap",function(){
	  picker.show(function(items){
            $("#subinvman_sel")[0].innerHTML=items[0].text;
          });
        });			
      }
    </script>
  </body>  
</html>

注：picker.setData();数据集可以[{value:'',text:''},{value:'',text:''}]格式后台动态生成

效果如下图：

【DtPicker示例】

1. 初始化DtPicker组件对象

var dtpicker = new DtPicker(options);

注：options选项详见MUI官网

2. 显示dtpicker对象

dtpicker.show(SelectedItemsCallback)

注：SelectedItemsCallback为回调函数

下面是DtPicker代码示例：

<html>  
  <head>  
  	<meta charset="utf-8">
		<title>DtPicker</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />     
    <!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
   
  </head>  
  <body>   
    <div class="mui-content">  
      <button id='subinvman_sel' class="mui-btn mui-btn-block" type='button'>余生的第一天</button> 
    </div>  
    
    <!--引用js文件-->
		<script src="../../js/jquery-1.11.2.min.js"></script>
		<script src="js/mui.min.js"></script>	
		<script src="js/mui.picker.min.js"></script>
		<script type="text/javascript">
			mui.init({
			  swipeBack:true //启用右滑关闭功能
		  });
		  
			//DtPicker选择器
			var subinvman_sel=$("#subinvman_sel")[0];
			if(subinvman_sel)
			{				
			  document.querySelector("#subinvman_sel").addEventListener("tap",function(){
			  	var dtpicker=new mui.DtPicker({"type":"date"}); 
			    dtpicker.show(function(items){
			    	$("#subinvman_sel")[0].innerHTML=items.text;
			    	dtpicker.dispose();
			    });
			  });			
		  }
		</script>
  </body>  
</html>

效果如下图：

ZenPower

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
4
评论
MUI选择器

MUI框架扩展了Picker组件，可用于弹出单级或多级选择器，poppicker和dtpicker是对picker的具体实现【PopPicker示例】注：PopPicker组件依赖mui.picker.js/.css和mui.poppicker.js/.css，请务必在mui.js/css后中引用。1. 初始化PopPicker组件对象var picker = new mui.PopPicker(...
复制链接

扫一扫