精华内容
下载资源
问答
  • 仿QQ扩展列表固定显示header效果实现
  • 想要在固定第i个位置显示自定义的item 此item界面与其他不同 而且数据源(javaBean)跟其他的item不一样 请问怎么做呢 有什么好的实现方法
  • * 根据固定宽高的盒子,让图片自由居中显示的方法 * 盒子长200px,宽145px */ // $(".imgNeedChange")为通过jq获取到的图片数组,对单个图片进行处理时去掉for循环即可 function imgDispose() { for(var i ...

    /*
    * 根据固定宽高的盒子,让图片自由居中显示的方法
    * 盒子长200px,宽145px
    */
    // $(".imgNeedChange")为通过jq获取到的图片数组,对单个图片进行处理时去掉for循环即可
    function imgDispose() {
    for(var i = 0; i < $(".imgNeedChange").length; i++) {
    document.getElementsByClassName('imgNeedChange')[i].onload = function(e) {
    e.stopPropagation();
    if(this.width / this.height > (200 / 145)) {
    $(this).css({
    "top": "0",
    "left": -(this.width / this.height * 145 - 200) / 2 + "px",
    "height": "145px",
    "width": "auto"
    });
    } else {
    $(this).css({
    "left": "0",
    "top": -(this.height / this.width * 200 - 145) / 2 + "px",
    "width": "200px",
    "height": "auto"
    });
    }
    }
    }

    }

    //eg:

    后来的后来,发现一个css样式:object-fit: cover; 一下就设置好了.......

    展开全文
  • 动态显示,在鼠标点中后显示完整的列表,离开后显示缩略的列表。 公司项目中,很多页面都用到了select组件模拟树状选择框,由于树的层次可能非常多,因此的选择项内容非常长,而超出固定长度的部分被截断...
     
    

    动态显示,在鼠标点中后显示完整的列表,离开后显示缩略的列表。


    公司项目中,很多页面都用到了select组件模拟树状选择框,由于树的层次可能非常多,因此<option>的选择项内容非常长,而超出固定长度的部分被截断,无法完全看清,导致用户体验比较差,因此,要求统一修改。

     

      但是,树层次并非固定,而是允许用户自定义,所以组件宽度不能是定长。如果定义的长度不是足够长,而用户定义的树层次很多,仍然无法完全看清;如果定义长度足够长,但用户定义树层次比较少,反而页面不美观。

     

      想起网络上牛人比比皆是,他们一定碰到过类似的情况,于是上网搜了一下,果然被我找到了,但这个例子有个小问题,就是鼠标离开那个select框后,不能自动收回宽度;必须在页面上其他地方,点击鼠标或者选择下拉框后,才能做自动收回,还是有点美中不足,呵呵。

     

      一开始觉得很简单,只要监听newSelectObj的onmouseover事件,当鼠标离开它的时候,删除newSelectObj就行了,但事实上不是这样的,因为当移动鼠标去选择newSelectObj的option时候,它就认为已经离开了newSelectObj,会马上删除 newSelectObj,因此,这样的修改将导致无法选择option。

     

      办法总是能想出来的,经过一上午的多次试验、修改,我终于解决了这个问题,解决方法很简单,增加newSelectObj前,加上一个div,这个div刚刚比newSelectObj稍微大一点点,且是透明的(透明让用户无法察觉多加了一个div),div增加一个鼠标监听事件,当鼠标从div上移走后,删除newSelectObj、div即可(因为这个div不比newSelectObj大多少,当鼠标从newSelectObj移走后,基本上会同时离开这个div)。

     

      而其他人的修改就非常简单了,首先我把这些函数放到一个js中,其他人引用这个js即可,然后在select组件上增加一个onmouseover事件,调用方法"FixWidth(this)"即可,大大减轻了修改的工作量。

     

      这样一来,效果就好多了。事实上,我并没有自动调整select的宽度,而是创建了一个块头比较大的、新的select,我们的眼睛只是被善意地欺骗了,适当的善意欺骗确实是好的,哈哈

        效果如下:

     1、页面初始化效果

        固定宽度下拉列表中option内容显示不全问题解决方法 - 十维空间 - Sunrise

     

     2、鼠标移到select上的效果

        固定宽度下拉列表中option内容显示不全问题解决方法 - 十维空间 - Sunrise

     

     3、点击select效果

        固定宽度下拉列表中option内容显示不全问题解决方法 - 十维空间 - Sunrise

     

    详细代码如下:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
    function FixWidth(selectObj)
    {
        var newSelectObj = document.createElement("select");
        newSelectObj = selectObj.cloneNode(true);
        newSelectObj.selectedIndex = selectObj.selectedIndex;
        newSelectObj.id="newSelectObj";
      
        var e = selectObj;
        var absTop = e.offsetTop;
        var absLeft = e.offsetLeft;
        while(e = e.offsetParent)
        {
            absTop += e.offsetTop;
            absLeft += e.offsetLeft;
        }
        with (newSelectObj.style)
        {
            position = "absolute";
            top = absTop + "px";
            left = absLeft + "px";
            width = "auto";
        }
       
        var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
        if(window.addEventListener)
        {
            newSelectObj.addEventListener("blur", rollback, false);
            newSelectObj.addEventListener("change", rollback, false);
        }
        else
        {
            newSelectObj.attachEvent("onblur", rollback);
            newSelectObj.attachEvent("onchange", rollback);
        }
       
        selectObj.style.visibility = "hidden";
        document.body.appendChild(newSelectObj);
       
        var newDiv = document.createElement("div");
        with (newDiv.style)
        {
            position = "absolute";
            top = (absTop-10) + "px";
            left = (absLeft-10) + "px";
            width = newSelectObj.offsetWidth+20;
            height= newSelectObj.offsetHeight+20;;
            background = "transparent";
            //background = "green";
        }
        document.body.appendChild(newDiv);
        newSelectObj.focus();
        var enterSel="false";
        var enter = function(){enterSel=enterSelect();};
        newSelectObj.onmouseover = enter;
       
        var leavDiv="false";
        var leave = function(){leavDiv=leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel);};
        newDiv.onmouseleave = leave;
    }

    function RollbackWidth(selectObj, newSelectObj)
    {
        selectObj.selectedIndex = newSelectObj.selectedIndex;
        selectObj.style.visibility = "visible";
        if(document.getElementById("newSelectObj") != null){
           document.body.removeChild(newSelectObj);
        }
    }

    function removeNewDiv(newDiv)
    {
        document.body.removeChild(newDiv);
    }

    function enterSelect(){
      return "true";
    }

    function leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel){
     if(enterSel == "true" ){
      RollbackWidth(selectObj, newSelectObj);
      removeNewDiv(newDiv);
     }
    }
    </script>
    </head>

    <body>

    <form method="post">
        <div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;" >
            <select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">
                <option id="A" title="this is A">AAAAAAAAAAAAAAA</option>
                <option id="B" title="this is B">BBBBBBBBBBBBBBB</option>
                <option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
            </select>
        </div>
    </form>

    </body>

    </html>

    展开全文
  • 固定列表标题栏

    千次阅读 2015-09-28 20:01:43
    当一个列表内容太多时,在上滑过程中,如果不固定标题栏,会不知道当前这个列表属于哪个分类,所以常见做法是向上滑动过程中,将当前分类的标题栏固定在屏幕最上方。

    当一个列表内容太多时,在上滑过程中,如果不固定标题栏,会不知道当前这个列表属于哪个分类,所以常见做法是向上滑动过程中,将当前分类的标题栏固定在屏幕最上方。拿起你的手机,打开QQ,查看它的联系人分类,就可以体验这种效果。


    这样的一个小小的交互,如何来实现呢?

    1、准备资源

    1)新建一个动态面板,命名为main,内容是随便放些组件,在里面放一个表示列表的一个矩形,带有一个标题栏(见下图的粉色社区动态标题栏),我们要在滑动面板向上到最顶端时固定这个标题栏。


    2)复制一下动态面板里的那个标题栏到外面来,起个名字“隐藏的标题栏”



    复制后的标题栏移到屏幕最上方,并设置为隐藏状态


    2、给动态面板添加事件控制

    在拖动动态面板时,如果动态面板的y值小于-200(刚好是里面的标题栏到达顶部的时候),显示之前隐藏的标题栏,否则就隐藏它


    注意:事件里用到了局部变量,代表当前的组件,所以LVAR1.y就是它的纵坐栏,判断这个位置就行了。


    这就可以了哦,其实还是比较简单的吧,想好思路,实现起来并不复杂。


    在线演示

    展开全文
  • <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="LineBreakLayout"> <!--标签之间左右距离-->...attr name="leftAndRightSpace" format="dimension" />...
  • 本文主要分为两个功能部分,分页用table显示数据+固定table的表头,网上有很多两者的示例,当时看完一些发现都不太符合项目的需求,于是自己动手改了下。 先介绍分页功能。 1、分页功能。 网上有大量的分页示例,...

    本文主要分为两个功能部分,分页用table显示数据+固定table的表头,网上有很多两者的示例,当时看完一些发现都不太符合项目的需求,于是自己动手改了下。

    先介绍分页功能。

    1、分页功能。

    网上有大量的分页示例,有些做的也很漂亮,一部分是用纯jQuery、HTML结合CSS写的,另一部分是使用相关的UI组件库,例如jqwidgets(一般大型项目中用的多),需要先去它的官网下载相关的包文件,放进项目工程中,再参照官网的API文档根据需求引用和使用。本文重点介绍前种情况,后种情况简要介绍。

    1.1 jQuery获取json数据,实现分页。

    首先,为了减少前端代码冗余度,后端服务端传过来的json数据是每一页要显示的内容,设置页数为pageNum,前端只要读取pageNum页,即可获取json传过来要显示在表格中的pageNum的内容。在JS文件中jQuery获取json数据的方法如下,printRecord(); 为调用的功能函数。而("/webgis/admin/logs/")这一段代码需要根据后台服务端写的服务来确定,就看写后台服务的同志怎么写了,pageResult是获取到的传过来的数据,拿到数据后即可使用:

     $.getJSON("/webgis/admin/logs/" + pageNum, function(pageResult) {
                printRecord(pageResult);
            });
    其次,分页栏以5页为一个单位,实现分页功能的html代码如下:

    <div id="pageGro" class="cb">
       <div class="pageUp"> << </div>
       <div class="pageList">
          <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          </ul>
       </div>
       <div class="pageDown">>></div>
    </div> 
    jQuery主要代码如下,主要包括6个部分,我们知道, 在页码变化时,分页栏和页面都会做响应变化,分页栏变化函数page_icon(page, count, eq);页面变化函数pageGroup(pageNum, pageCount);在 点击页码时候的响应、点击“上一页”的响应、点击“下一页”的响应。

    (1)点击页码,响应:

    //点击分页按钮触发
            $("#pageGro li").live("click", function() {
                if (pageCount > 5) {
                    var pageNum = parseInt($(this).html()); //获取当前页数
                    pageGroup(pageNum, pageCount);
                } else {
                    page_icon(1, pageCount, 0);
                    $(this).addClass("on");
                    $(this).siblings("li").removeClass("on");
                    var pageNum = parseInt($(this).html()); //获取当前页数
                    pageGroup(pageNum, pageCount);
                }
            });
    (2)点击上一页,响应:
    //点击上一页触发
            $("#pageGro .pageUp").click(function() {
                if (pageCount > 5) {
                    var pageNum = parseInt($("#pageGro li.on").html()); //获取当前页
                    if (pageNum == 1) {
                    } else {
                        pageGroup(pageNum - 1, pageCount);
                    }
                } else {
                    var index = $("#pageGro ul li.on").index(); //获取当前页
                    if (index > 0) {
                        $("#pageGro li").removeClass("on"); //清除所有选中
                        $("#pageGro ul li").eq(index - 1).addClass("on"); //选中上一页
                    }
                }
            });
    (3)点击下一页,响应:

     //点击下一页触发
            $("#pageGro .pageDown").click(function() {
                if (pageCount > 5) {
                    var pageNum = parseInt($("#pageGro li.on").html()); //获取当前页
                    if (pageNum == pageCount) {} else {
                        pageGroup(pageNum + 1, pageCount);
                    }
                } else {
                    var index = $("#pageGro ul li.on").index(); //获取当前页
                    if (index + 1 < pageCount) {
                        $("#pageGro li").removeClass("on"); //清除所有选中
                        $("#pageGro ul li").eq(index + 1).addClass("on"); //选中上一页
                    }
                }
            });

    (4)页面跳转,读者可结合下面的page_icon(),自行研究下里面的switch结构:

    //点击跳转页面
    function pageGroup(pageNum, pageCount) {
        if (pageCount > 5) {
            switch (pageNum) {
                case 1:
                    page_icon(1, 5, 0);
                    break;
                case 2:
                    page_icon(1, 5, 1);
                    break;
                case pageCount - 1:
                    page_icon(pageCount - 4, pageCount, 3);
                    break;
                case pageCount:
                    page_icon(pageCount - 4, pageCount, 4);
                    break;
                default:
                    page_icon(pageNum - 2, pageNum + 2, 2);
                    break;
            }
        } else {
            switch (pageNum) {
                case 1:
                    page_icon(1, pageCount, 0);
                    break;
                case 2:
                    page_icon(1, pageCount, 1);
                    break;
                case 3:
                    page_icon(1, pageCount, 2);
                    break;
                case 4:
                    page_icon(1, pageCount, 3);
                    break;
                case 5:
                    page_icon(1, pageCount, 4);
                    break;
            }
        }
        printRecord(pageResult);
    }

    (5)分页栏变化:

    //根据当前选中页生成页面点击按钮
    function page_icon(page, count, eq) {
        var ul_html = "";
        for (var i = page; i <= count; i++) {
            ul_html += "<li>" + i + "</li>";
        }
        $("#pageGro ul").html(ul_html);
        $("#pageGro ul li").eq(eq).addClass("on");
    }
    (6)printRecord(pageResult);

    将传过来的数组赋给recordArray,并读取数组中的字段,constrHtmlTbody是构造table中的一行,通过for循环,则构造多行constrHtmlTbody,并放入数组printRecordArray中,并将printRecordArray放入前端id为itemContainer的tbody中,即可生成table的格式进行展示:

        var recordArray = pageResult;
        var printRecordArray = [];
        for (var i = 0; i < recordArray.length; i++) {
            var userId = pageResult[i].userId;
            var action = pageResult[i].action;
            constrHtmlTbody = '<tr><td style=\"width:20%;\">' + userId + '</td>' + '<td  style=\"width:20%;\">' + action + '</td></tr>';
            printRecordArray.push(constrHtmlTbody);
        }
        $("#itemContainer").html(constrHtmlTbody);

    还有一种情况是当页码不足5页时的情况,所以在调用函数前,需要一个判断:

    //根据总页数判断,如果小于5页,则显示所有页数,如果大于5页,则显示5页。根据当前点击的页数生成
            if (pageCount > 5) {
                page_icon(1, 5, 0);
            } else {
                page_icon(1, pageCount, 0);
            }

    1.2 效果截图如下:


    1.3 使用jqwidgets模块中的分页和固定表头的功能:http://www.jqwidgets.com/

    参考官网API写代码。


    2、固定表头功能。类似的功能为:


    2.1 如若使用jqwidgets模块,效果如最后的表格展示:http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm?search=


    2.2 HTML+CSS来写。

    这种技巧性和挑战性在于在不断的F12页面调试中找到适合和相对满意的效果,还要考虑用户的各种查看习惯,例如缩小浏览器窗口等,写的效果还适不适应浏览器窗体。下面展示我在调试过程中最后选择的效果。不多说了,上html代码如下:

    <div style="height:26px;position:relative;">
         <table class="table table-striped table-bordered table-hover"  style="position:absolute;word-break:break-word;"> 
             <thead>
                 <tr>
                    <th style="width:20%">用户ID</th>
                    <th style="width:20%">组件名称</th>
                 </tr>
             </thead>
         </table>
    </div>
    <div style="overflow-y:overlay;margin-top: 10px;height:550px;position:relative;">
         <table id="imIpPool111" class="table table-striped table-bordered table-hover" style="word-break:break-word;" > 
              <tbody id="itemContainer" > </tbody>
          </table>
    </div>


    这段代码,一个table的组成是:一个<div>下的<thead>+一个<div>下的<tbody>。巧妙处在于表头<thead>处在的table的上一级<div>的position设置为relative而该table的position设置为absolute,这样就能使得表头固定。

    3.分页部分的html:

     <div style="height:26px;position:relative;">
         <table class="table table-striped table-bordered table-hover" style="position:absolute;word-break:break-word;">
           <thead>
               <tr>
                 <th >用户ID</th>
                 <th >组件名称</th>
               </tr>
           </thead>
         </table>
    </div>
    <div style="overflow-y:overlay;margin-top: 10px;height:550px;position:relative;">
         <table id="imIpPool111" class="table table-striped table-bordered table-hover" style="word-break:break-word;" >
           <tbody id="itemContainer" > </tbody>
          </table>
    </div>
    
    <div id="pageGro">
       <div class="pageUp"> << </div>
       <div class="pageList">
          <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
          </ul>
        </div>
        <div class="pageDown">>></div>
    </div> 


    4.JS源码以及css源码下载:

    由于涉及到后台json传数据,所以源码不能直接运行,仅供大家在写项目时进行参考作用。

    点击下载









    展开全文
  • 固定宽度的select下拉列表option选项显示不全的解决办法: 在实际的开发中在页面中为了布局的需要,下拉菜单的宽度要设成比较小的值,但这时由于包含的选择项的内容比较长,那么超出select宽度的部分将会被截断,...
  • <template> <div> <el-upload class="avatar-uploader" ref="upload" :limit="10" multiple :on-exceed="handleExceed" :show-file-list="false" action=... :file-l
  • opengl显示列表画兔子

    千次阅读 2016-12-10 11:33:58
    1. 显示列表 显示列表是一组存储在一起的OpenGL函数,可以在以后执行。调用一个显示列表时,它所存储的函数就会按照顺序执行。OpenGL的显示列表更像是命令缓存器,而不是动态数据库,即当一个显示列表被创建之后...
  • 浏览论坛的时候,看到一个帖子,讲“列表
  • OPengl显示列表

    千次阅读 2009-09-15 15:07:00
    今天介绍关于OpenGL显示列表的知识。本课内容并不多,但需要一些理解能力。在学习时,可以将显示列表与C语言的“函数”进行类比,加深体会。我们已经知道,使用OpenGL其实只要调用一系列的OpenGL函数就可以了。然而...
  • 滚动条弹窗固定位置显示

    千次阅读 2014-05-28 18:50:34
    你有一个列表,都是按钮,用来显示一个弹窗的明细或者报表 问题是这个页面时一个有纵向滚动条的页面,而且嵌在一个iframe里面 问题来了,你点击不同的按钮,弹窗位置不一样。真山寨。 可以这样不那么...
  • PLSQL解决窗口列表,无法固定

    千次阅读 2019-12-11 10:17:29
  • oracle显示窗口列表

    千次阅读 2016-03-18 14:02:28
    使用PL/SQL,查看表,每次都要把窗口列表找出来看起来才方便,这个每次找就有些麻烦 找出窗口列表"工具"-->"窗口列表",点击"窗口"--->"保存版面",这样下次使用就不用再去调出窗口了
  • easyui 窗口 滚动条 固定位置显示

    千次阅读 2015-08-17 11:30:37
    $('#w').window('open'); $('#w').window("move",{top:$(document).scrollTop() + 30}); 获得右侧滚动条目前的高度位置,然后再移动此位置
  • 显示的效果如下: 没有达到预期的效果 下面是解决方法: 把 //JavaScript代码区域 layui.use('element', function(){ var element = layui.element; }); layui.use('form',function () { var form=...
  • PL/SQL Developer左侧的窗口列表显示使用过的sqlfile,如果每次都手动拖拽很麻烦 下面记录一下设置方法,让软件每次打开都固定显示窗口列表。 在工具--》首选项--》用户界面--》选项中,选中自动保存桌面,这样...
  • 背景: 使用IDEA的过程中由于找寻项目文件不便,因此需要持续显示project视图窗口, 但是默认设置的状态是...问题: 如何将左侧project窗口固定显示? 解决办法: 为了清晰的解决问题,下面附一张简图以说明,如下图: ...
  • 这就是本文章要实现的功能,django xadmin 后台显示图片,并且可以放大和关闭。 1.首先检查settings.py配置 必须包含下面两行,不一定要固定写medias,可以随心所欲为所欲为 MEDIA_URL = '/medias/' MEDIA_ROOT ...
  • 在手机自带的通讯录中,我们会发现联系人被分组,按首字母索引排列,当...关于这个效果,实现的方式有多种,这里使用PinnedHeaderListView实现固定头部的列表。 实现步骤: (1).PinnedHeaderListView的实现 首先是Pi
  • 目标:Pycharm如何不自动打开最近项目,显示项目列表。 路径:File->settings->system settings->startup->reopen lase project on startup。 操作:勾掉"reopen lase project on startup",然后,...
  • 页面中显示列表,这个列表最多显示三个item的高度。如果item小于三个,就自适应高度显示;如果item超过三个,高度固定为三个item的高度,超出的item需要滑动显示。 根据需求来看,直接固定RecyclerView高度肯定不行...
  • 我做了一个下拉列表,点击里面的选项点击查询查出内容,我想让页面上出现该类型的数据,而下拉列表里面则是显示刚刚点击的值,,但是现在我点击后数据是查到了,只是下拉列表已刷新还是请选择选项。
  • 用mfc实现组合框控件下拉列表显示

    千次阅读 2015-01-30 11:46:48
    MFC里组合框控件显示下拉列表 现在正在帮一个大四的哥们做毕业设计。需要设计一个MFC程序。实现的功能是实现和GSM模块的通信。也就是能够通过这个程序来收发短信。这个功能很简单,短信的内容也是实现约定好的ASCII...
  • jQuery_固定行表头列表头表格插件

    千次阅读 2010-05-20 16:53:00
    支持固定行表头、支持固定列表头(表格滚动时,表头始终显示);2.支持复杂行表头、复杂列表头;3.可定义表格显示总尺寸(总宽度、总高度);4.可定义每列(栏)宽度;5.可定义每行高度;6.行表头、列表头可表格滚动...
  • //显示列名  DWORD dwStyle = m_listCtrl.GetExtendedStyle();  dwStyle |= LVS_EX_GRIDLINES;  m_listCtrl.SetExtendedStyle(dwStyle);  m_listCtrl.InsertColumn(1,"工号",LVCFMT_CENTER,90); //...
  • 最近做脸搜项目,在固定imageView长宽的列表要,无论原图是什么大小和形状,要使图片充满屏幕。有人会说那用 ScaleType.CENTER_CROP不就好了吗。对!但是有个问题会居中显示。现在的需求是,要显示带脸部的区域。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 228,460
精华内容 91,384
关键字:

如何固定列表显示