JQuery EasyUI学习-08.23

最新推荐文章于 2024-05-05 16:40:52 发布

可乐不给你喝

最新推荐文章于 2024-05-05 16:40:52 发布

阅读量93

点赞数

文章标签： jquery easyui 学习

本文链接：https://blog.csdn.net/weixin_44845855/article/details/132443969

版权

Panel面板

当做其他内容的容器使用
创建其他组建的基础组件
提供内置的可折叠，可关闭，可最大化，可最小化及其他自定义行为

用法

创建面板

1.通过标记创建面板
比较容易，直接把easyui-panel添加到<div>标记中

<div id="p" class="easyui-panel" title="My Panel"
    style="width:500px;height:150px;padding:10px;background:#fafafa;"
    data-options="iconCls:'icon-save',closable:true,
    collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

iconCls:String 在面板里显示一个16X16图标的CSS class
closable:true 是否显示关闭按钮
collapsible:true 是否显示折叠按钮
minimizable:true 是否显示最小化按钮
maximizable:true 是否显示最大化按钮

在这里插入图片描述
2.编程创建面板

    <div id="p" style="padding:10px;">
        <p>panel content.</p>
        <p>panel content.</p>
    </div>

    <script>
        $('#p').panel({
            width: 500,
            height: 150,
            title: 'My Panel',
            tools: [{
                iconCls: 'icon-add',
                handler: function () { alert('new') }
            }, {
                iconCls: 'icon-save',
                handler: function () { alert('save') }
            }]
        });

    </script>

在这里插入图片描述

移动面板

不知道为什么显示不出移动

加载内容

通过ajax加载面板内容并且加载成功时显示信息


    <script type="text/javascript">
        $('#p').panel({
            href: '2.helloworld.html',
            onLoad: function () {
                alert('loaded successfully');
            }
        });
    </script>

helloworld页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

在这里插入图片描述

script标签的type属性

定义script元素包含或src引用的脚本语言，默认为JavaScript
1、type=“text/scripts”
默认的type属性，在HTML5中自动加上了该属性

Accordion折叠面板

折叠面板允许提供多个面板，同时显示一个或者多个面板。
每个面板都有展开和折叠的内建支持。点击面板头部可展开或者折叠面板主体。
面板内容可通过ajax指定href属性来加载。
用户可定义被选中的面板。如果未指定，则默认选中第一个面板。

用法

创建折叠面板

1.通过标记创建

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
		<h3 style="color:#0099FF;">Accordion for jQuery</h3>
		<p>Accordion is a part of easyui framework for jQuery.
		It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
		content2
    </div>
    <div title="Title3">
		content3
    </div>
</div>

在这里插入图片描述
overflow为溢出，当内容超出容器时只需添加overflow属性值为hidden，就可以把超出容器的部分隐藏起来
overflow=auto 如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条

可以改变或重建折叠面板（Accordion）后，修改某些特性。

    <script>
        $('#aa').accordion({
            animate: false
        });
    </script>
animate:bollean 展开或折叠面板时是否显示动画

刷新折叠面板内容

调用 ‘getSelected’ 方法来获取当前面板（panel），然后我们可以调用面板（panel）的 ‘refresh’ 方法来加载新内容

    <script>
        var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
        if (pp) {
            pp.panel('refresh', '2.helloworld.html'); // 调用 'refresh' 方法加载新内容
        }
    </script>

在这里插入图片描述

标签页/选项卡

是面板的集合，每个时刻只显示一个面板
每个面板都有标题和一些工具按钮，包括关闭和一些自定义的按钮

用法

创建标签页

1.通过标记创建
每个标签页面板通过子<div>标记创建

    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:20px;display:none;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
            tab3
        </div>
    </div>

在这里插入图片描述

2.编程创建标签页
同时捕捉onSelect事件

    <script>
        $('#tt').tabs({
            border: true,
            onSelect: function (title) {
                alert(title + ' is selected');
            }
        });
    </script>

在这里插入图片描述

添加新的标签页面板

不知道为什么不显示。。。。
原因：有时候是因为easyui加载没有完毕，easyui样式没有，导致不能使用easyui语法，有些函数进来就要执行，可以给10ms左右延时加载。
解决：使用组件前需要初始化 $("#tt").tabs({});
通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。

    <script>
    
		$("#tt").tabs({});
		
        $('#tt').tabs('add', {
            title: 'New Tab',
            content: 'Tab Body',
            closable: true,
            tools: [{
                iconCls: 'icon-mini-refresh',
                handler: function () {
                    alert('refresh');
                }
            }]
        });
    </script>

在这里插入图片描述

获取选中的标签页

    <script>
        //获取选中的标签页面板（tab panel）和它的标签页（tab）对象
        $("#tt").tabs({});

        var pp = $('#tt').tabs('getSelected');
        var tab = pp.panel('options').tab; // 相应的标签页（tab）对象 
     </script>

textbox文本框

用法

1.通过标签创建

<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">

在这里插入图片描述

2.使用JavaScript创建

    <input id="tb" type="text" style="width:300px">

在这里插入图片描述

    <input id="tb" type="text" style="width:300px">

    <script>
        $('#tb').textbox({
                        buttonText:'Search',
                        iconCls:'icon-man',
                        iconAlign:'left'
                    })
    </script>

在这里插入图片描述

tagbox标签框

允许用户将输入显示在标签框中，而不是显示在输入框中

用法

通过标签创建文本框

<input class="easyui-tagbox" value="Apple, Orange" label="Add a tag" style="width:50%">

在这里插入图片描述
使用Javascript创建文本框

    <input id="tb" type="text" style="width:300px">
    <script>
        $('#tb').tagbox({
            label: 'Add a tag',
            value: ['Apple', 'Orange']
        })
    </script>

在这里插入图片描述

Calendar日历

日历（calendar）显示允许用户选择日期的一个月份日历，并允许移动到上一月和下一页。默认情况下，每星期的第一天设置为星期日。这可以通过设置 ‘firstDay’ 属性的值来改变。

用法

从标记创建日历（calendar）

<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>

在这里插入图片描述
使用 javascript 创建日历（calendar）

    <div id="cc1" style="width:180px;height:180px;"></div>
    <script>
        $('#cc1').calendar({
            current: new Date()
        });
    </script>

在这里插入图片描述

passwordbox密码框

密码框会通过显示圆点的方式来保护您输入的密码文本，同时输入框中会提供一个眼睛的图标来通过点击的动作查看您输入的密码，来确保您输入的密码正确无误。

用法

通过标签创建密码框

 <input class="easyui-passwordbox" prompt="Password" iconWidth="28"
        style="width:100%;height:34px;padding:10px">

在这里插入图片描述

使用Javascript创建密码框

    <input id="pb" type="text" style="width:300px">
    <script>
        $(function () {
            $('#pb').passwordbox({
                prompt: 'Password',
                showEye: true
            });
        });
    </script>

在这里插入图片描述

maskedbox掩码框

掩码框强制用户输入结构。

用法

通过标签创建掩码框

    <input data-toggle="topjui-maskedbox" mask="(999) 999-9999" label="Phone Number:" labelPosition="top"
        style="width:20%">

在这里插入图片描述

使用Javascript创建掩码框

    <input id="mb" type="text" style="width:300px">
    <script>
        $(function () {
            $('#mb').iMaskedbox({
                mask: '9999 9999 9999 9999'
            });
        });
    </script>

在这里插入图片描述

Combogrid组合网格

把可编辑的文本框和下拉数据网格面板结合起来，可以从下拉数据网格面板中快速查找和选择。
提供了选择某个项目的键盘导航支持

用法

创建组合网格

1.从标记创建

    <select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
    data-options="
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
    "></select>

在这里插入图片描述
2.使用 javascript 从已有的或元素创建

    <!-- 使用 javascript 从已有的 <select> 或 <input> 元素创建 -->
    <input id="cc1" name="dept" value="01">
    <script>
        $('#cc1').combogrid({});
        $('#cc1').combogrid({
            panelWidth: 450,
            value: '006',
            idField: 'code',
            textField: 'name',
            url: 'datagrid_data.json',
            columns: [[
                { field: 'code', title: 'Code', width: 60 },
                { field: 'name', title: 'Name', width: 100 },
                { field: 'addr', title: 'Address', width: 120 },
                { field: 'col4', title: 'Col41', width: 100 }
            ]]
        });
    </script>

在这里插入图片描述

自动完成功能

下拉数据网格将根据用户输入显示可能的结果

form表单

表单（form）提供多种方法来执行带有表单字段的动作，比如 ajax 提交、加载、清除，等等。当提交表单时，调用 ‘validate’ 方法来检查表单是否有效。

用法

创建一个简单的 HTML 表单。构建表单并给 id、action、method 赋值

    <!-- form表单 -->
    <form id="ff" method="post">
        <div>
            <label for="name">Name:</label>
            <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
        </div>
        <div>
            <label for="email">Email:</label>
            <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
        </div>
    </form>

在这里插入图片描述

Timespinner时间微调器

用法

标记创建

    <input id="ss" class="easyui-timespinner" style="width:200px;"
    required="required" data-options="min:'08:30',showSeconds:true">

在这里插入图片描述

JavaScript创建

    <input id="ss1" style="width:100px;">
    <script>
        $('#ss1').timespinner({
            min: '08:30',
            required: true,
            showSeconds: true
        });
    </script>

在这里插入图片描述

DateTimeSpinner日期时间微调框

用法

标签创建

    <input class="easyui-datetimespinner" style="width:300px">

在这里插入图片描述

JavaScript创建

    <input id="dt" type="text" style="width:300px">
    <script>
        $('#dt').datetimespinner({
            //...
        })
    </script>

在这里插入图片描述

filebox文件框

表示文件上传

用法

通过标签创建


    <input class="easyui-filebox" style="width:300px">

在这里插入图片描述

JavaScript创建

    <input id="fb" type="text" style="width:300px">
    <script>
        $('#fb').filebox({
            buttonText: '选择文件',
            buttonAlign: 'left'
        })
    </script>

在这里插入图片描述

checkbox复选框

用法

通过标签创建

JavaScript创建

numberbox数字框

用法

标签创建

<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2">

在这里插入图片描述

JavaScript创建

    <input type="text" id="nn">
    <script>
        $('#nn').numberbox({
            min: 0,
            precision: 2
        });
    </script>

在这里插入图片描述

微调器

只能供过JS创建

    <input id="ss11" value="2">
    <script>
        $('#ss11').spinner({
            required: true,
            increment: 10
        });
    </script>

在这里插入图片描述

NumberSpinner数值微调器

用法

标签创建

<input id="ss1" required="required" style="width:80px;">

在这里插入图片描述

JavaScript创建

    <script>
        $('#ss1').numberspinner({
            min: 10,
            max: 100,
            editable: false
        });
    </script>

在这里插入图片描述

combobox组合框

用法

从带有预定义结构的元素创建组合框（combobox）

    <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
        <option value="aa">aitem1</option>
        <option>bitem2</option>
        <option>bitem3</option>
        <option>ditem4</option>
        <option>eitem5</option>
    </select>

在这里插入图片描述
从标记创建组合框（combobox）

    <input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

在这里插入图片描述
使用 javascript 创建组合框（combobox）

    <input id="cc1" name="dept" value="aa">
    <script>
        $('#cc1').combobox({
            url: 'combobox_data.json',
            valueField: 'id',
            textField: 'text'
        });
    </script>

在这里插入图片描述

combotree组合树

用法

标记创建

    <select id="cc" class="easyui-combotree" style="width:200px;" data-options="url:'get_data.php',required:true">
    </select>

在这里插入图片描述
JS创建

    <input id="cc" value="01">
    <script>
        $('#cc').combotree({
            url: 'get_data.php',
            required: true
        });
    </script>

在这里插入图片描述

单选框

用法

标签创建

                    <div data-toggle="topjui-radio">
                        <form id="ff">
                            <div style="margin-bottom:20px">
                                <input data-toggle="topjui-radiobutton" name="fruit" value="Apple" label="Apple:">
                            </div>
                            <div style="margin-bottom:20px">
                                <input data-toggle="topjui-radiobutton" name="fruit" value="Orange" label="Orange:">
                            </div>
                            <div style="margin-bottom:20px">
                                <input data-toggle="topjui-radiobutton" name="fruit" value="Banana" label="Banana:">
                            </div>
                        </form>
                    </div>

JS创建

                $('#rb').iRadiobutton({
                    label: 'Apple:',
                    value: 'Apple',
                    checked: true
                });

ComboTreeGrid树形表格下拉框

用法

标签创建

    <input class="easyui-combotreegrid" data-options="
    width:'100%',
    panelWidth:500,
    label:'Select Item:',
    labelPosition:'top',
    url:'treegrid_data1.json',
    idField:'id',
    treeField:'name',
    columns:[[
        {field:'name',title:'Name',width:200},
        {field:'size',title:'Size',width:100},
        {field:'date',title:'Date',width:100}
    ]]">

在这里插入图片描述
JS创建

    <input id="cc31" name="name">
    <script>
        $(function () {
            $('#cc31').combogrid({
                value: '006',
                width: '100%',
                panelWidth: 500,
                label: 'Select Item:',
                labelPosition: 'top',
                url: 'treegrid_data1.json',
                idField: 'id',
                treeField: 'name',
                columns: [[
                    { field: 'name', title: 'Name', width: 200 },
                    { field: 'size', title: 'Size', width: 100 },
                    { field: 'date', title: 'Date', width: 100 }
                ]]
            });
        });
    </script>

在这里插入图片描述

滑块

用法

当作为一个表单域使用时，从标记创建滑块

<input class="easyui-slider" value="12" style="width:300px"
    data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]">

在这里插入图片描述
从

创建滑块（slider）也是允许的，但是 ‘value’ 属性是无效的。

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

在这里插入图片描述
JS创建

    <div id="ss4" style="width:200px"></div>
    <script>
        $('#ss4').slider({
            mode: 'h',
            tipFormatter: function (value) {
                return value + '%';
            }
        });
    </script>

在这里插入图片描述

Validatebox验证框

用法

标记创建

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

在这里插入图片描述
JS创建

    <input id="vv1">
    <script>
        $('#vv1').validatebox({
            required: true,
            validType: 'email'
        });
    </script>

在这里插入图片描述

Datebox日期框

用法

标签创建

   <input id="dd" type="text" class="easyui-datebox" required="required">

在这里插入图片描述
JS创建

<input id="dd1" type="text">
    <script>
        $('#dd1').datebox({
            required: true
        });
    </script>

在这里插入图片描述

combo组合

用法

JS创建

    <input id="cc5" value="001">
    <script>
        $('#cc5').combo({
            required: true,
            multiple: true
        });
    </script>

在这里插入图片描述

DateTimeBox日期时间框

用法

标记创建

<input class="easyui-datetimebox" name="birthday"
    data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">

在这里插入图片描述

JS创建

    <input id="dt" type="text" name="birthday">
    <script>
        $('#dt').datetimebox({
            value: '3/4/2010 2:3',
            required: true,
            showSeconds: false
        });
    </script>

在这里插入图片描述

可乐不给你喝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery EasyUI学习-08.23

表单（form）提供多种方法来执行带有表单字段的动作，比如 ajax 提交、加载、清除，等等。密码框会通过显示圆点的方式来保护您输入的密码文本，同时输入框中会提供一个眼睛的图标来通过点击的动作查看您输入的密码，来确保您输入的密码正确无误。调用 ‘getSelected’ 方法来获取当前面板（panel），然后我们可以调用面板（panel）的 ‘refresh’ 方法来加载新内容。通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。
复制链接

扫一扫