easyui，实现工具栏空间不够，自动增加左右滑动条，适应屏幕宽度大小变化，多封装，通用，减少耦合

最新推荐文章于 2023-04-24 09:02:13 发布

漫游者码农

最新推荐文章于 2023-04-24 09:02:13 发布

阅读量756

点赞数 1

分类专栏：前端easyui datagrid和Echarts图表可视化

本文链接：https://blog.csdn.net/xu2034029667/article/details/103028432

版权

前端easyui datagrid和Echarts图表可视化专栏收录该内容

6 篇文章 1 订阅

订阅专栏

有图有真相，

背景：公司项目大量页面都是一行工具栏，进行筛选条件

下面一个datagrid格子展示内容，

要求是当屏幕变小，能够出现下图所示左右点击按钮，

只是在全局的global.js文件中增加代码，每个页面都可以出现

多封装，通用性，减少耦合，

  <div id="tool" class="toolbar">
            <ul>
                <li>题目：<input id="ItemText" name="ItemText" class="textbox" style="width:210px;height:22px"/></li>
                <li>答题情况：
                    <input type="radio" id="all_Item" name="Item" value="" checked="checked" /><label for="all_Item">全部</label>
                    <input type="radio" id="true_Item" name="Item" value="1" /><label for="true_Item" class="true_Item">答对</label>
                    <input type="radio" id="false_Item" name="Item" value="0" /><label for="false_Item"class="false_Item">答错</label>
                    <input type="radio" id="null_Item" name="Item" value="2" /><label for="null_Item"class="null_Item">未做</label>
                </li>      
                <li>
                   <a class="easyui-linkbutton" id="search" iconcls="icon-search" onclick="Search();">搜索</a>
                   <a class="easyui-linkbutton" onclick="ShaiXuanReset();" data-options="iconCls:'icon-undo'">重置</a>
                </li>
            </ul>
        </div>

 //将一行变成可拖动滑块
    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("<div style='overflow:hidden'></div>");//style='width:" + (parseFloat(sumliwidth) +20)+ "px;'
            $toolbar_ul.before("<div onclick='moveulright()' class='move-btn'  style='border-right:1px solid #95B8E7;'>&nbsp;<<&nbsp;</div>");
            $toolbar_ul.after("<div onclick='moveulleft()' class='move-btn' style='right:4px;border-left:1px solid #95B8E7;margin-top:-32px;'>&nbsp;>>&nbsp;</div>");
        }        
    }

//看看隐藏在外的差值是多少，即显示隐藏内容即可
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);
    }  
}