easyui，实现工具栏空间不够，自动增加左右滑动条，适应屏幕宽度大小变化，多封装，通用，减少耦合
有图有真相，
背景：公司项目大量页面都是一行工具栏，进行筛选条件
下面一个datagrid格子展示内容，
要求是当屏幕变小，能够出现下图所示左右点击按钮，
只是在全局的global.js文件中增加代码，每个页面都可以出现
多封装，通用性，减少耦合，
多封装，通用性，减少耦合，
多封装，通用性，减少耦合，
//将一行变成可拖动滑块var $toolbar_ul = $('.toolbar').find("ul");if ($toolbar_ul.length == 1) {var sumliwidth = 0;$toolbar_ul.find("li").each(function () {sumliwidth += $(this).width();});//如果屏幕宽度小于li总长，那么添加一个滑动按钮,同时将他添加为relative，改变左边距if (sumliwidth > $(window).width()) {$toolbar_ul.css({ "marginLeft": "32px", border: 'none', width: (parseFloat(sumliwidth) + 30) + 'px', position: "relative" }); $("body").css({ "overflow": "hidden" });$toolbar_ul.wrap("");//style='width:" + (parseFloat(sumliwidth) +20)+ "px;'$toolbar_ul.before(" << ");$toolbar_ul.after(" >> ");} }//看看隐藏在外的差值是多少，即显示隐藏内容即可
function moveulright() {var between = parseFloat($('.toolbar').find("ul").width()) - $(window).width();if (parseInt($('.toolbar').find("ul").css("left")) >=0|| -parseInt($('.toolbar').find("ul").css("left")) < between) {$('.toolbar').find("ul").animate({"left":parseInt($('.toolbar').find("ul").css("left")) - 200},400);}
}
function moveulleft() {if (parseInt($('.toolbar').find("ul").css("left")) <0) {$('.toolbar').find("ul").animate({"left":parseInt($('.toolbar').find("ul").css("left")) + 200},400);}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！