27HUI - picker（huiPicker）

2021-07-07 16:54:37 阅读：137 来源： 互联网

标签：picker huiPicker 菜单 picker2 text value 27HUI var

效果图

在这里插入图片描述

使用方法

1、引用 hui-picker.js
2、创建触发dom元素，例如

<button type="button" class="hui-button hui-button-large" id="btn1">选择时间</button>

3、获取picker对象，如：
var picker = new huiPicker(’#picker’, function(){});
4、设置菜单层级
5、绑定数据（关联数据及非关联数据）

huiPicker(selector, callBack)

参数1 : selector 单一元素选择器
参数2 : 点击确定按钮执行的回调函数

level属性

level属性用于设置级联菜单的层级数，默认1；如:
picker3.level = 3; //设置联动层级为3层

bindData(levelIndex, data) 绑定非关联数据

功能：为菜单绑定非关联数据；
参数：
1、菜单层级， con0开始；
2、一维数组，格式 new Array({value:xx, text},…);
如：

var years = new Array();
for(var i = 2000; i <= 2017; i++){years.push({value:i, text:i});}
picker1.bindData(0, years);

bindRelevanceData(cities);绑定关联性数据

功能：为菜单绑定非关联数据；
参数：关联性多维数组，格式：

var cities = [{
    value: '100000',
    text: '陕西省',
    children: [
        {
            value: '100001',
            text: '西安市'
        },
        {
             value: '100002',
            text: '宝鸡市'
        }
    ]
    }
];

picker.getText(index);获取选中的文本

功能：获取picker对象选中的文本；
参数：菜单层级，从0开始；

picker.getVal(index);获取选中的值

功能：获取picker对象选中的值；
参数：菜单层级，从0开始；

完整演示代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI Picker</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI Picker</h1>
</header>
<div class="hui-wrap">
    <div class="hui-center-title" style="margin-top:15px;"><h1>演示样例</h1></div>
    <div style="padding:28px;">
        <button type="button" class="hui-button hui-button-large" id="btn1">选择性别</button>
        <button type="button" class="hui-button hui-button-large" id="btn2" style="margin-top:20px;">选择地区</button>
    </div>
</div>
<script type="text/javascript" src="../js/hui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/hui-picker.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/cities.js" charset="utf-8"></script>
<script type="text/javascript">
/* 普通选择器 非关联型绑定 */
var picker1 = new huiPicker('#btn1', function(){
    var val = picker1.getVal(0);
    var txt = picker1.getText(0);
    hui('#btn1').html(txt + '[' + val + ']');
});
picker1.bindData(0, [{value:1, text:'男'},{value:2, text:'女'}]);
/* 地区选择， 关联型数据 */
var picker2 = new huiPicker('#btn2', function(){
    var sheng   = picker2.getText(0);
    var shi     = picker2.getText(1);
    var qu      = picker2.getText(2);
    hui('#btn2').html(sheng + shi + qu);
});
picker2.level = 3;
//cities 数据来源于 cities.js
picker2.bindRelevanceData(cities);
</script>
</body>
</html>

标签：picker,huiPicker,菜单,picker2,text,value,27HUI,var
来源： https://blog.51cto.com/u_15294985/3004893

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9