Extjs4.07 桌面图标换行

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 100 阅读

文章标签：

#javascript #ViewUI

通过使用jQuery，本示例实现了一个自动调整桌面图标布局的功能。每隔0.5秒，图标会根据浏览器窗口的高度重新排列，确保图标均匀分布。该功能适用于项目首页，能够提升用户体验。

setInterval(function(){
                //shortcuts 自动换行
                 var height = $(window).height() - 30; //获取浏览器当前窗口可视区域高度 (减去底部任务栏高度)
                 var line = 1;
                 var row = 0;
                 var defaults = {
                        num : parseInt((height - 10) / 90), //最大列
                        space : 90, //图标间距
                        position : 15, //边缘距离
                        shortcut : $('.ux-desktop-shortcut') //桌面的图标
                 };
                 defaults.shortcut.each(function (index, domEle) {
                   if (index >= defaults.num * line) {
                       line++;
                       row = 0;
                   }
                   //alert("第" + line + "列；第" + (row + 1) + "行；" + this + "当前对象索引" + index);
                   $(domEle).css("left", ((line - 1) * defaults.space + defaults.position) + "px");
                   $(domEle).css("top", defaults.position + (defaults.space * row) + "px");
                   $(domEle).css('position', 'absolute');
                   row++;
                });
            },500);

放到项目首页每隔0.5秒自动换行。。前提是要引入jquery 框架

当然如果不喜欢这样

可以使用Ext.query()选择器代替 $符号

关注博主即可阅读全文