04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件

1. tooltip提示框插件

1.1 渲染方式

 class型

<a href="#" class="easyui-tooltip" title="这是a tip">hover me</a>

js型

<a href="javascript:void(0);" id="tooltipA" title="这是a tip">链接</a>
<script type="text/javascript">
$(function(){
    $('#tooltipA').tooltip({

    });
});
</script>

1.2 属性

可以通过$.fn.tooltip.defaults修改默认属性值如

//放在延迟加载外面
$.fn.tooltip.defaults.trackMouse = true;

tooltip工具的属性如

$('#tooltipA').tooltip({
        content:'<hr/>tooltip 提示信息',//默认为null，提示框内容，会覆盖标签的title属性值，可以包含html标签
        position:'left',//默认为'bottom'，可设为'left','right','top',如果显示不下会智能切换到其他方向显示
        trackMouse:true,//默认为false，设为true，提示框会跟随鼠标移动
        deltaX:-9,//默认为0，提示框水平方向偏移
        deltaY:-9,//默认为0，提示框垂直方向偏移
        showEvent:'mouseover',//默认为'mouseenter',提示框显示的激活事件
        hideEvent:'dblclick',//默认为'mouseleave',提示框隐藏的激活事件
        showDelay:10,//默认为200，显示的延迟毫秒数
        hideDelay:10,//默认为100，隐藏的延迟毫秒数

    });

1.3 事件

$(function(){
    $('#tooltipA').tooltip({
        onShow:function(e){
            console.log('提示框显示时触发');
        },
        onHide:function(e){
            console.log('提示框隐藏时触发');
        },
        onUpdate:function(content){
            console.log('提示框内容更新时触发，内容跟新为' + content);
        },
        onPosition:function(left,top){
            console.log('提示框位置改变时触发' +left + '|' + top );
        },
        onDestroy:function(){
            console.log('提示框被销毁时触发');
        }
    });

    $('#tooltipA').tooltip('show');//显示提示框
    $('#tooltipA').tooltip('hide');//隐藏提示框
    $('#tooltipA').tooltip('update','update方法更新的内容');

    $(document).click(function(){
        //$('#tooltipA').tooltip('reposition');
        $('#tooltipA').tooltip('destroy');
    });
});

1.4 方法

$(function(){
    $('#tooltipA').tooltip({
        trackMouse:false,
        onShow:function(e){
            console.log($('#tooltipA').tooltip('tip'));//返回tip元素对象,放在onShow方法里(提示框被创建后)才不会返回undefined.
            console.log($('#tooltipA').tooltip('arrow'));//返回箭头元素对象,放在onShow方法里(提示框被创建后)才不会返回undefined.
            $(this).tooltip('tip').css({
                backgroundColor: '#666',
                borderColor: '#666',
                left:500,//把trackMouse谁false后，设置提示框位置，下面用reposition方法重置提示框位置
            });
        },
        onHide:function(e){
            $('#tooltipA').tooltip('reposition');//重置提示框位置
        },
        onUpdate:function(content){
            console.log('提示框内容更新时触发，内容跟新为' + content);
        },
        onPosition:function(left,top){
            console.log('提示框位置改变时触发' +left + '|' + top );
        },
        onDestroy:function(){
            console.log('提示框被销毁时触发');
        }
    });
    console.log($('#tooltipA').tooltip('options'));//返回包含所有属性和事件的对象
    console.log($('#tooltipA').tooltip('tip'));//返回undefined
    $('#tooltipA').tooltip('show');//显示提示框
    $('#tooltipA').tooltip('hide');//隐藏提示框
    $('#tooltipA').tooltip('update','update方法更新的内容');//更新提示框内容

    $(document).click(function(){

        $('#tooltipA').tooltip('destroy');//销毁提示框
    });
});

2. linkbutton按钮插件

2.1 渲染方式

class型

<a id="AA" href="###" class="easyui-linkbutton" data-options="iconCls:'icon-edit',iconAlign:'right'" title="这是a tip">class型按钮</a>

js型

<a id="linkbuttonA" href="###">js渲染型按钮</a>
<script type="text/javascript">
    $(function(){
        $('#linkbuttonA').linkbutton({

        });
    });
</script>

2.2 属性

可以通过$.fn.linkbutton.defaults修改默认属性值如

//放在延迟加载外面
$.fn.linkbutton.defaults.iconCls = 'icon-mini-add';

linkbutton插件的属性如

<a id="linkbuttonBA" href="###">js渲染型按钮</a>
<a id="linkbuttonBC" href="###" class="easyui-linkbutton" data-options="group:'radiogroup',toggle:true">class型按钮</a>
<script type="text/javascript">
$(function(){
    $('#linkbuttonBA').linkbutton({
        id:'linkbuttonBC',//默认为null
        disabled:false, //默认为false，true时禁用
        toggle:true, //默认为false，true时类似checkbox
        selected:true,//默认为false，true时为已选中
        group:'radiogroup',//默认为null，需toggle为true设置，设置后类似radio,
        plain:true,//默认为false，设置后按钮样式为简单效果
        text:'新的按钮文本',//默认为''
        iconCls:'icon-search',//默认为null,设置按钮16x16的图标
        iconAlign:'right',//默认为'left',图标的位置，可设为'right'
    });
});
</script>

2.3 方法

<script type="text/javascript">
    $(function(){
        $('#linkbuttonBE').linkbutton({

    });

    console.log($('#linkbuttonBE').linkbutton('options'));//返回包含所有属性和事件的对象
    $('#linkbuttonBE').linkbutton('disable');//禁用按钮
    $('#linkbuttonBE').linkbutton('enable');//启用按钮
    $('#linkbuttonBE').linkbutton('select');//选择按钮
    $('#linkbuttonBE').linkbutton('unselect');//取消选择按钮 });
</script>

3. progressbar进度条插件

3.1 渲染方式

class型

  <div class="easyui-progressbar" 
        data-options="value:60" style="width:600px;">
        class型进度条
 </div>

js型

<div id="progressbarBox"></div>
<script type="text/javascript">
    $(function(){
        $('#progressbarBox').progressbar({
            value:60,
            width:'50%'
        });
    });
</script>

3.2 属性

可以通过$.fn.progressbar.defaults修改默认属性值如

$.fn.progressbar.defaults.height= '68px';//放在延迟加载外面

$(function(){
    $('#progressbarBox').progressbar({
        value : 60,//进度条值，默认为0，精度条满为100
        width:'50%',//进度条宽度，默认为'auto',可为字符串或数值
        height:'48px',//进度条高，默认为22，可为字符串或数值
        text:'{value}/100',//进度条百分比模板，默认为'{value}%'

    });
});

3.3 事件

$(function(){
    $('#progressbarBox').progressbar({
        value:30,
        onChange:function(newValue,oldValue){//值改变时触发
            console.log('newValue---->' + newValue 
                + ',oldValue---->'+ oldValue);
        }
    });

    setTimeout(function(){
        $('#progressbarBox').progressbar('setValue',80);
    },1000);
});

3.4 方法

console.log($('#progressbarBox').progressbar('options'));//返回所有属性和事件

setTimeout(function(){
    $('#progressbarBox').progressbar('resize',500);//设置插件的长度
},1000);

var itv = setInterval(function(){
   var v = $('#progressbarBox').progressbar('getValue'); //获取进度值
   $('#progressbarBox').progressbar('setValue', v + 9);//设置进度值
    if(v + 9 >= 100){
        clearInterval(itv);
    }
    console.log('我还在继续');
},500);