jQuery技术

easyui选项卡tab功能的使用技巧

字号+ 作者:H5之家 来源:H5之家 2016-08-16 11:03 我要评论( )

easyui插件是一组基于jquery UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面,下面我们来测试一个easyui选项卡ta

easyui插件是一组基于jquery UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面,下面我们来测试一个easyui选项卡tab使用技巧

easyui选项卡上面的刷新按钮实现刷新操作

面板上的选项卡是动态生成的,带有刷新小按钮和关闭小按钮,点击刷新小按钮的时候刷新当前tab面板内容。实现代码:

 代码如下 复制代码

$('#main').tabs('add',{
    title:title,
    content:content,
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
var pp = $('#main').tabs('getSelected');//选中的选项卡对象
var content = pp.panel('options').content;//获取面板内容 
//console.log(tab);
$("#main").tabs('update',{//更新
    tab:pp,
    options:content
})
        }
    }]
});


关闭所有选项卡tab的方法:

 代码如下 复制代码

function removePanel(){
$('#main ul li').each(function(index){
    var tab = $(".tabs-closable", this).text();
    if(tab!="首页") $("#main").tabs('close', tab);//除了标签为首页的其他全部关闭
});

 

加载图片与页面的功能可以利用js来做但写起来复杂了,下文小编整理了一个基于jQuery插件的加载图片与页面特效代码了,这段代码不但简单并且非常的实用同时兼容性也非常的好。

我们使用jQuery的ajax在页面中就像使用iframe一样加载其他页面内容,今天我给大家分享一个名叫jQuery oLoader的插件,该插件还集成了oPageLoader,可以轻松实现加载图片和页面的漂亮效果。

 

基于jQuery插件的加载图片与页面特效代码


oLoader使用方法

不管是oLoader还是oPageLoader都是基于jQuery,所以调用前请先加载jquery库,作者已经将两个插件集成到一起:jquery.oLoader.min.js,已经打包好请戳源码下载。
调用jQuery oLoader非常简单,一句话如下:

 代码如下 复制代码

 
$('#element').oLoader();
使用oLoader加载图片:
 
$(function(){
  $('img').oLoader({
    waitLoad: true,
    fadeLevel: 0.9,
    backgroundColor: '#fff',
    style:0,
    image: 'loader.gif'
  });
});

使用oLoader加载页面:
 
$('#ajax').oLoader({
  url: 'test.html',
  updateOnComplete: false
});

当然,它还提供了丰富的选项和回调函数,根据具体需求进行设置。
 

 代码如下 复制代码

{
  image: 'images/loader.gif',  //加载动画图片
  style: 1, //loader样式
  modal: true, //模态遮罩,如果为false,则不会显示遮罩层
  fadeInTime: 300, //遮罩层淡入速度,毫秒
  fadeOutTime: 300, //遮罩层谈出速度,毫秒
  fadeLevel: 0.7, //遮罩层透明度,0-1
  backgroundColor: '#000', //背景色
  imageBgColor: '#fff', //loader动画图片背景
  imagePadding: '10',
  showOnInit: true, //初始化显示加载动画
  hideAfter: 0, //time in ms
  url: false, //Ajax调用参数,下同
  type: 'GET',
  data: false,
  updateContent: true, //是否替换ajax返回内容
  updateOnComplete: true,//是否立即替换服务器返回的内容
  showLoader: true, //是否显示loader图片
  effect: '', //动态效果,支持door,slide,doornslide
  wholeWindow: false, //when true, oLoader covers the whole window
  lockOverflow: false, //locks body's overflow while loading
  waitLoad: false, //当元素内容加载完才显示内容
  checkIntervalTime: 100, //interval which checks for position changes
   
  //回调函数
  complete: '', //当动画结束,内容加载完调用
  onStart: '', //动画开始时调用
  onError: '' //当ajax请求出错时调用
}
oPageLoader使用方法
oPageLoader可以实现漂亮的加载页面时的进度条动画,调用oPageLoader也非常简单,如下:
 
$(function(){
  $.oPageLoader();
});
oPageLoader提供了丰富的选项和方法调用。
 
{
  backgroundColor: '#000', //背景色
  progressBarColor: '#f00', //进度条颜色
  progressBarHeight: 3, //进度条高度
  progressBarFadeLevel: 1, 
  showPercentage: true,
  percentageColor: '#fff',
  percentageFontSize: '30px',
  context: 'body',
  affectedElements: 'img,iframe,frame,script',
  ownStyle: false, //如果设置为ture,则可自定义进度条样式
  style: "<div>0%</div><div></div>",
  lockOverflow: true,
  images: [], //array of additional images, such as those from css files
       
  wholeWindow: true,
  fadeLevel: 1,
  waitAfterEnd: 0,
  fadeOutTime: 500,
   
  //callbacks
  complete: false, //当页面加载完动画结束时执行
  completeLoad: false, //当页面已经加载不需要动画结束就执行
  update: false
}

回调函数update,是当页面元素加载完时调用,返回data数据为:
data.total:加载的元素总数。
data.loaded:已加载的元素。
data.percentage:百分比。
使用方法:
 

 代码如下 复制代码

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 用JQuery在网页中实现分隔条功能的代码

    用JQuery在网页中实现分隔条功能的代码

    2016-08-02 13:01

  • jQuery+PHP+Mysql实现输入自动完成提示的功能

    jQuery+PHP+Mysql实现输入自动完成提示的功能

    2016-07-01 10:00

  • Asp.Mvc 2.0实现用户登录与注销功能实例讲解(2)

    Asp.Mvc 2.0实现用户登录与注销功能实例讲解(2)

    2016-05-19 15:00

  • 使用Jquery+EasyUI进行框架项目开发案例讲解之一

    使用Jquery+EasyUI进行框架项目开发案例讲解之一

    2016-05-11 12:00

网友点评
t