H5UI库、加密技术和二维码

news2024/11/17 13:20:44

一、H5UI库

1. 使用方法：

（1）页面中引入css文件

h5ui.css （h5ui.min.css）

（2）页面中引入js文件

jquery.min.js

h5ui.min.js

2. 组件的用法

（1）消息框的使用：alert

（2）按钮的使用：button。有三种类型（primary、danger、default）

（3）对话框的使用：dialog。对话框的类型：

a、模式对话框：该类型的对话框弹出后，用户再不能进行其他的操作。

b、非模式对话框：该类型的对话框弹出后，用户可以进行其他的操作，该对话框可以停留在窗口的某个位置。

（4）表单的使用：form

（5）复选框的使用：chedkbox

（6）单选按钮：radio

（7）下拉列表框：select

<!-- 下拉列表框 -->
    <div class="h5ui-form">
        <label for="province" class="h5ui-form-label">选择省份</label>
        <div class="h5ui-select">
            <select name="provine" id="province">
                <option value="#">请选择</option>
                <option value="101">北京市</option>
                <option value="102">上海市</option>
                <option value="103">天津市</option>
                <option value="104">重庆市</option>
                <option value="105">陕西省</option>
            </select>
        </div>
    </div>

（8）导航条：navbar

（9）标签：tab

练习：用h5ui做省-市-县区级联

    <link rel="stylesheet" href="./h5ui_2.2/h5ui_2.2/css/h5ui.min.css">

<body>
    <div class="h5ui-form">
        <label class="h5ui-form-label" for="province">选择省份</label>
        <div class="h5ui-select">
            <select name="province" id="province">
                <option value="0">请选择</option>
            </select>
        </div>
    </div>

    <div class="h5ui-form">
        <label class="h5ui-form-label" for="city">选择城市</label>
        <div class="h5ui-select">
            <select name="city" id="city">
                <option value="0">请选择</option>
            </select>
        </div>
    </div>

    <div class="h5ui-form">
        <label class="h5ui-form-label" for="district">选择区县</label>
        <div class="h5ui-select">
            <select name="district" id="district">
                <option value="0">请选择</option>
            </select>
        </div>
    </div>

    <script src="./h5ui_2.2/h5ui_2.2/js/jquery.min.js"></script>
    <script src="./h5ui_2.2/h5ui_2.2/js/h5ui.min.js"></script>
    <script src="./ProJson.js"></script>
    <script src="./CityJson.js"></script>
    <script src="./DistrictJson.js"></script>

    <script>
        $(function () {
            //调用jquery的each方法，遍历province数组
            $.each(Province, function (index, item) {
                //将省份添加到对应的下拉列表中
                $('#province').append(`<option value=${item.provinceId}>${item.proName}</option>`)
            })

            //给省份注册change事件：当省份发生改变时，将对应的城市放到城市的下拉列表中
            $('#province').change(function () {
                let pro_id = $(this).val()//2.1获取选择的省份的value(provinceId)
                //2.2删除city下拉列表中原有的数据
                $('#city option:gt(0)').remove()
                //2.3遍历City数组，找到省份对应的城市
                $.each(City, function (index, item) {
                    if (item.provinceId == pro_id) {
                        //将省份添加到对应的下拉列表中
                        $('#city').append(`<option value=${item.cityId}>${item.cityName}</option>`)
                    }
                })
            })

            //3.给城市注册change事件：当城市发生改变时，将对应的县区放到城市的下拉列表中
            $('#city').change(function () {
                let city_id = $(this).val()
                $('#district option:gt(0)').remove()
                $.each(District, function (index, item) {
                    if (item.cityId == city_id) {
                        //将省份添加到对应的下拉列表中
                        $('#district').append(`<option value=${item.districtId}>${item.districtName}</option>`)
                    }
                })
            })
        })
    </script>
</body>