easyui，實現工具欄空間不夠，自動增加左右滑動條，適應屏幕寬度大小變化，多封裝，通用，減少耦合

有圖有真相，

背景：公司項目大量頁面都是一行工具欄，進行篩選條件

下面一個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);
    }  
}