• 第一百八十节,jQuery-UI,知问前端--消息提示 UI


    jQuery-UI,知问前端--消息提示 UI

    学习要点:

      1.HTML 部分

      2.CSS 部分

      3.jQuery 部分

    通过前面已学的 jQuery UI 部件,我们来创建一个注册表单。

    html

    <div id="reg" title="会员注册">
        <p>
            <label for="user">帐号:</label>
            <input type="text" name="user" class="text" id="user" title="请输入帐号,不小于2 位!"/>
            <span class="star">*</span>
        </p>
        <p>
            <label for="pass">密码:</label>
            <input type="text" name="pass" class="text" id="pass" title="请输入密码,不小于6 位!"/>
            <span class="star">*</span>
        </p>
        <p>
            <label for="email">邮箱:</label>
            <input type="text" name="email" class="text" id="email" title="请输入电子邮件!"/>
            <span class="star">*</span>
        </p>
        <p>
            <label>性别:</label>
            <input type="radio" name="sex" id="male" checked="checked"><label for="male"></label></input>
            <input type="radio" name="sex" id="female"><label for="female"></label></input>
        </p>
        <p>
            <label for="date">生日:</label>
            <input type="text" name="date" readonly="readonly" class="text" id="date"/>
        </p>
    </div>

    css

    /*注册框*/
    #reg {
        padding: 15px;
    }
    
    #reg p {
        margin: 10px 0;
        padding: 0;
    }
    
    #reg p label {
        font-size: 14px;
        color: #666;
    }
    
    #reg p .star {
        color: red;
    }
    
    #reg .text {
        border-radius: 4px;
        border: 1px solid #ccc;
        background: #fff;
        height: 25px;
        width: 200px;
        text-indent: 5px;
        color: #666;
    }

    js

    //注册框
        $('#reg_a').on('click',function () {   //将注册框,执行对话框方法
            $('#reg').dialog({
                autoOpen : true,
                modal : true,
                resizable : false,
                width : 320,
                height : 340,
                buttons : {
                    '提交' : function () {
                        
                    }
                }
            });
            $('#reg').buttonset();      //将单选框,执行按钮方法
        });

    消息提示 UI

    工具提示(tooltip),是一个非常实用的 UI。它彻底扩展了 HTML 中的 title 属性,让 提示更加丰富,更加可控制,全面提升了用户体验。

    tooltip()方法,将元素,有title属性的执行提示信息方法,提示信息为title值,鼠标移入提示,鼠标移出消失,接收一个对象

    一.调用 tooltip()方法

    在调用 tooltip()方法之前,首先需要针对元素设置相应 title 属性。

    <input type="text" name="user" class="text" id="user" title="请输入帐号,不小于 2 位!" />
    $('#user').tooltip();

    二.修改 tooltip()样式

    在弹出的 tooltip 提示框后,在火狐浏览器中打开 Firebug 或者右击->查看元素。这样, 我们可以看看 tooltip 的样式,根据样式进行修改。

    可以在自定义css里修改,比如颜色

    .ui-tooltip{
        color: #ff1c24;
    }

    注意:其他修改方案类似。

    三.tooltip()方法的属性

    对话框方法有两种形式:1.tooltip(options),options 是以对象键值对的形式传参,每个 键值对表示一个选项;2.tooltip('action', param),action 是操作对话框方法的字符串,param 则是 options 的某个选项。

    tooltip 外观选项

    disabled false/布尔值 设置为 true,将禁止显示工具提示。

            $('#reg input[title]').tooltip({
                disabled : true              //将禁止显示工具提示
            });


    content 无/字符串 设置 title 内容。建议还是在htnl里设置title

            $('#reg input[title]').tooltip({
                // disabled : true              //将禁止显示工具提示
                content : '提示信息'             //content 无/字符串 设置 title 内容。建议还是在htnl里设置title
            });


    items 无/字符串 设置选择器以限定范围。,也就是选择器,限定指定元素下的title才启用消息提示

            $('[title]').tooltip({          //选择了所有的title
                //限定了只有input,的title才启用提示
                items : 'input'             //items 无/字符串 设置选择器以限定范围。,也就是选择器,限定指定元素下的title才启用消息提示
            });


    tooltipClass 无/字符串 引入 class 形式的 CSS 样式。以class形式引入样式,也就是在tooltipClass属性里设置一个css选择器名称,然后用这个名称到css写样式

            $('#reg input[title]').tooltip({
                tooltipClass : 'anl'  //tooltipClass 无/字符串 引入 class 形式的 CSS 样式。以class形式引入样式,也就是在tooltipClass属性里设置一个css选择器名称,然后用这个名称到css写样式
            });

    css

    .anl{
        background-color: #23ff2e;
        color: #ff1c24;
    }

    tooltip 页面位置选项

    position 对象 使用对象的键值对赋值,有两个属性:my 和 at表示坐标。my 是以目标点左下角为基准,at 以my 为基准。

            $('#reg input[title]').tooltip({
                position : {
                    // my : 'left top',  //设置提示框相当对于元素出现的横坐标,设置提示框相当对于元素出现的竖坐标
                    my : 'left center',
                    at : 'right+5 center'
                }
            });

    tooltip 视觉选项

    show false/布尔值 显示对话框时,默认采用淡入效果。


    hide false 布尔值 关闭对话框时,默认采用淡出效果。

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                },
                show : false,   //关闭淡入
                hide : false    //关闭淡出
            });

    注意:设置 true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字 符串参数。

    show 和 hide 可选特效

    blind 工具提示从顶部显示或消失


    bounce 工具提示断断续续地显示或消失,垂直运动


    clip 工具提示从中心垂直地显示或消失


    slide 工具提示从左边显示或消失


    drop 工具提示从左边显示或消失,有透明度变化


    fold 工具提示从左上角显示或消失


    highlight 工具提示显示或消失,伴随着透明度和背景色的变化


    puff 工具提示从中心开始缩放。显示时“收缩”,消失时“生长”


    scale 工具提示从中心开始缩放。显示时“生长”,消失时“收缩”


    pulsate 工具提示以闪烁形式显示或消失

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                },
                show : 'scale',   //scale 工具提示从中心开始缩放。显示时“生长”,消失时“收缩”
                hide : 'scale'
            });

    tooltip 行为选项

    track false/布尔值 设置为 true,能跟随鼠标移动。

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                },
                track : true   //能跟随鼠标移动
            });

    四.tooltip()方法的事件

    除了属性设置外,tooltip()方法也提供了大量的事件。这些事件可以给各种不同状态时 提供回调函数。这些回调函数中的 this 值等于对话框内容的 div 对象,不是整个对话框的 div。

    create当工具提示被创建时会调用 create 方法,该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                },
                create : function () {    //create当工具提示被创建时会调用
                    alert('创建时');
                }
            });

    open当工具提示被显示时,会调用 open 方法,该方法有两个参数(event, ui)。此事件中的 ui 有一个参数 tooltip,返回是工具提示的 jQuery 对象。

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                },
                open : function () {    //open当工具提示被显示时
                    alert('被显示时');
                }
            });

    close当工具提示关闭时,会调用 close 方法。关闭的工具提示可以用 tooltip('open')重新打开。该方法有两个参数(event,ui)。此事件中的 ui 有一个参数 tooltip,返回是工具提示的 jQuery 对象。

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                },
                close : function () {    //close当工具提示关闭时
                    alert('关闭时');
                }
            });

    tooltip('action', param)方法

    tooltip('open') jQuery 对象 打开工具提示

     $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                }
            });
            $('#reg input[title]').tooltip('open');   //tooltip('open') jQuery 对象 打开工具提示


    tooltip('close') jQuery 对象 关闭工具提示

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                }
            });
            $('#reg input[title]').tooltip('close');   //tooltip('close') jQuery 对象 关闭工具提示


    tooltip('disable') jQuery 对象 禁用工具提示

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                }
            });
            $('#reg input[title]').tooltip('disable');   //tooltip('disable') jQuery 对象 禁用工具提示


    tooltip('enable') jQuery 对象 启用工具提示

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                }
            });
            $('#reg input[title]').tooltip('enable');   //tooltip('enable') jQuery 对象 启用工具提示


    tooltip('destroy') jQuery 对象 删除工具提示,直接阻断了 tooltip。

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                }
            });
            $('#reg input[title]').tooltip('destroy');   //tooltip('destroy') jQuery 对象 删除工具提示,直接阻断了 tooltip。


    tooltip('widget') jQuery 对象 获取工具提示的 jQuery 对象

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                }
            });
            $('#reg input[title]').tooltip('widget');   //tooltip('widget') jQuery 对象 获取工具提示的 jQuery 对象


    tooltip('option', param) 一般值 获取 options 属性的值,第二个参数是要获取的属性名称

            $('#reg input[title]').tooltip({
                position : {
                    my : 'left top'
                }
            });
            alert($('#reg input[title]').tooltip('option', 'position'));   //tooltip('option', param) 一般值 获取 options 属性的值,第二个参数是要获取的属性名称


    tooltip('option', param, value) jQuery 对象 设置 options 属性的值,第二个参数是要设置的属性名称,第三个参数是要设置的属性值

            $('#reg input[title]').tooltip({
                content : '改变文字',
                position : {
                    my : 'left top'
                }
            });
            $('#reg input[title]').tooltip('option', 'content','提示');   //tooltip('option', param, value) jQuery 对象 设置 options 属性的值,第二个参数是要设置的属性名称,第三个参数是要设置的属性值

    五.tooltip()中使用 on()

    在 tooltip 的事件中,提供了使用 on()方法处理的事件方法。

    on()方法触发的对话框事件

    tooltipopen 显示时触发

            $('#reg').on('tooltipopen',function () {
                alert('显示时触发');
            });


    tooltipclose 每一次移动时触发

            $('#reg').on('tooltipclose',function () {
                alert('每一次移动时触发');
            });
  • 相关阅读:
    [日常] Go语言圣经--示例: 并发的Echo服务
    [日常] Go语言圣经--示例: 并发的Clock服务习题
    [日常] Go语言圣经--接口约定习题2
    [日常] Go语言圣经--接口约定习题
    [日常] Linux下的docker实践
    [日常] Go语言圣经-指针对象的方法-bit数组习题2
    [日常] Go语言圣经-指针对象的方法-bit数组习题
    [日常] Go语言圣经-Panic异常,Recover捕获异常习题
    [日常] Go语言圣经-Deferred函数
    [日常] Go语言圣经-可变参数习题
  • 原文地址:https://www.cnblogs.com/adc8868/p/6543629.html
Copyright © 2020-2023  润新知