easyui学习

之前学习过一段时间的easyui,后来忙于其他的事情把这事一直耽搁下去了. 最近重新学习了下,写了一个小例子,是在stworthy的基础上继续写的. 就当做学习啦..  , 上图:

 

 

 

还可以使用可编辑的datagrid,如下图:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Jquery easy的功能还是挺强大的.

 

 

添加右键菜单:

 

 

点击就可以编辑:

 

Jquery easyui的网站:http://jquery-easyui.wikidot.com/start 上面有很多的例子.

评论

3 楼 archie2010 2011-03-21  

弱弱的问一下，源码能给不？

2 楼 zhanwc 2011-02-28  

tianshaojie 写道

能不能看一下你做的demo，tabs右键菜单很好啊，谢谢

//绑定右键菜单事件
function tabCloseEven()
{
//刷新
$('#mm-tabupdate').click(function(){
var currTab = $('#tabs').tabs('getSelected');
var url = $(currTab.panel('options').content).attr('src');
$('#tabs').tabs('update',{
tab:currTab,
options:{
content:createFrame(url)
}
})
})
//关闭当前,关闭当前的tab会返回到倒数第2次选择的tab.
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close',currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
$('#tabs').tabs('close',t);
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function(){
$('#mm-tabcloseright').click();
$('#mm-tabcloseleft').click();
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到头了，前边没有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});

//退出
$("#mm-exit").click(function(){
$('#mm').menu('hide');
})
}

1 楼 tianshaojie 2011-02-26  

能不能看一下你做的demo，tabs右键菜单很好啊，谢谢