滑动索引条实现

最新推荐文章于 2024-10-21 11:32:37 发布
最新推荐文章于 2024-10-21 11:32:37 发布
阅读量484 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangtaohu123/article/details/73153998
版权
<!DOCTYPE html>
<html lang="en">
<head>
<style type ="text/css">
    
.org-picker{
       border:1px;
       border-radius:4px;
       padding:5px;
       height:24px;
       line-height:24pxx;
       width:300px;
}    
.org-picker:focus{
     outline:0 none;
     border:1px solid #1abc9c
    
}
       
      

.ui-orgpicker-wrapper   {
     position:absolute; /* 绝对定位不占文档流 ，不影响其他元素的布局*/
     top:50px;
     left:10px;       /*需要根据提供的容器进行更改*/
     width:300px;
     height:400px;
     font-size:12px;
     color:#666;
     box-shadow:2px 2px 8px 2px rgb(128,128,128,.3);
}    
       
       
.ui-orgpicker-wrapper  .ui-orgpicker-search-input{
       border:1px solid;
       border-radius:4px;
       padding:5px;
       height:24px;
       line-height:24pxx;
       width:90% ;
}    
.ui-orgpicker-wrapper .ui-orgpicker-search-input:focus{
     outline:0 none;
     border:1px solid #1abc9c
    
}
.ui-orgpicker-wrapper .ui-orgpicker-center-letter{
   
    position: absolute;
    left: 40%;
    top: 40%;
    border-radius: 5px;
    font-size: 35px;
    color: #555;
    text-align: center;
    line-height: 50px;
    background: rgba(145,145,145,0.6);
    width: 50px;
    height:50px;
    z-index:3;
    display: none;
}

.ui-orgpicker-wrapper .ui-orgpicker-sort-box{
    position:absolute;
    
    width: 90%;
    height:360px;
    margin-top:1px;
    overflow: scroll;
}
.ui-orgpicker-wrapper .ui-orgpicker-sort-list{
    padding:1px 10px 1px 50px;
    position: relative;
    height: 30px;
    line-height: 40px;
    border-bottom:1px solid #ddd;
}


.ui-orgpicker-wrapper .ui-orgpicker-sort-letter{
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    color:#787878;
    font-size: 14px;
    border-bottom:1px solid #ddd;
}
.ui-orgpicker-wrapper .ui-orgpicker-initials{
    position: absolute;
    top: 30px;
    right: 10px;
    height: 100%;
      text-align: center;
    font-size: 12px;
    z-index: 99;
    background: rgba(145,145,145,0);
}
.ui-orgpicker-wrapper .ui-orgpicker-initials li img{
    width: 14px;
}

.ui-orgpicker-wrapper .ui-orgpicker-initials ul li {
    margin:0;padding:0;    
    list-style: none;
}
</style>
</head>
<body>
    
    
<input  type="text" class="org-picker"/>

<!---

window.orgpicker.init($('.org-picker'))
->


<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript" src="sort.js"></script>

</body>

</html>






(function(){

        var orgpicker = {};
        var letterlist = [];
        var data = [
                                        {spp:'LGP_CMB',letter_tag:'*',letter_frs:'Y',py_frs:'YXFR',py_full:'YINXINGFAREN',spp_txt:'银行法人'},
                                            {spp:'BOD_BOD',letter_tag:'*',letter_frs:'J',py_frs:'JNHZ',py_full:'JINGNEIHUIZONG',spp_txt:'境内汇总'},
                                             {spp:'BOF_BOF',letter_tag:'*',letter_frs:'J',py_frs:'JWHZ',py_full:'JINGWAIHUIZONG',spp_txt:'境外汇总'},
                                            {spp:'BK1_110',letter_tag:'B',letter_frs:'B',py_frs:'BJFX',py_full:'BEIJINGFENXING',spp_txt:'北京分行'},
                                            {spp:'BK1_125',letter_tag:'N',letter_frs:'N',py_frs:'NJFX',py_full:'NANJINGFENXING',spp_txt:'南京分行'},
                                            {spp:'BK1_121',letter_tag:'S',letter_frs:'S',py_frs:'SHFX',py_full:'SHANGHAIFENXING',spp_txt:'上海分行'},
                                            {spp:'BK1_755',letter_tag:'S',letter_frs:'S',py_frs:'SZFX',py_full:'SHENZHENFENXING',spp_txt:'深圳分行'},
                                            {spp:'BK1_127',letter_tag:'W',letter_frs:'W',py_frs:'WHFX',py_full:'WUHANFENXING',spp_txt:'武汉分行'},
                                            {spp:'BK1_991',letter_tag:'W',letter_frs:'W',py_frs:'WLMQ',py_full:'WULUMUQI',spp_txt:'乌鲁木齐分行'},
                                            {spp:'BK1_123',letter_tag:'Z',letter_frs:'Z',py_frs:'ZQFX',py_full:'ZHONGQINGFENXING',spp_txt:'重庆分行'},
                                            {spp:'BK1_124',letter_tag:'S',letter_frs:'S',py_frs:'SYFX',py_full:'SHENYANGFENXING',spp_txt:'沈阳分行'},
                                            {spp:'BK1_122',letter_tag:'T',letter_frs:'T',py_frs:'TJFX',py_full:'TIANJINFENXING',spp_txt:'天津分行'},
                                            {spp:'BK1_371',letter_tag:'Z',letter_frs:'Z',py_frs:'ZZFX',py_full:'ZHENGZHOUFENXING',spp_txt:'郑州分行'},
                                            {spp:'BK1_713',letter_tag:'C',letter_frs:'C',py_frs:'CSFX',py_full:'CHANGSHAFENXING',spp_txt:'长沙分行'},
                                            {spp:'BK1_791',letter_tag:'N',letter_frs:'N',py_frs:'NCFX',py_full:'NANCHANGFENXING',spp_txt:'南昌分行'},
                                            {spp:'BK1_129',letter_tag:'X',letter_frs:'X',py_frs:'XAFX',py_full:'XIANFENXING',spp_txt:'西安分行'},
                                            {spp:'BK1_351',letter_tag:'T',letter_frs:'T',py_frs:'TYFX',py_full:'TAIYUANFENXING',spp_txt:'太原分行'},
                                            {spp:'BK1_531',letter_tag:'J',letter_frs:'J',py_frs:'JNFX',py_full:'JINANFENXING',spp_txt:'济南分行'},
                                            {spp:'BK1_128',letter_tag:'C',letter_frs:'C',py_frs:'CDFX',py_full:'CHENGDONGFENXING',spp_txt:'成都分行'},
                                            {spp:'BK1_971',letter_tag:'X',letter_frs:'X',py_frs:'XNFX',py_full:'XININGFENXING',spp_txt:'西宁分行'},
                                            {spp:'BK1_551',letter_tag:'H',letter_frs:'H',py_frs:'HFFX',py_full:'HEFEIFENXING',spp_txt:'合肥分行'},
                                            {spp:'BK1_898',letter_tag:'H',letter_frs:'H',py_frs:'HKFX',py_full:'HAIKOUFENXING',spp_txt:'海口分行'},
                                            {spp:'BK1_120',letter_tag:'G',letter_frs:'G',py_frs:'GZFX',py_full:'GUANGZHOUFENXING',spp_txt:'广州分行'},
                                            {spp:'BK1_851',letter_tag:'G',letter_frs:'G',py_frs:'GYFX',py_full:'GUIYANGFENXING',spp_txt:'贵阳分行'},
                                            {spp:'BK1_571',letter_tag:'H',letter_frs:'H',py_frs:'HZFX',py_full:'HANGZHOUFENXING',spp_txt:'杭州分行'},
                                            {spp:'BK1_591',letter_tag:'F',letter_frs:'F',py_frs:'FZFX',py_full:'FUZHOUFENXING',spp_txt:'福州分行'},
                                            {spp:'BK1_931',letter_tag:'L',letter_frs:'L',py_frs:'LZFX',py_full:'LANZHOUFENXING',spp_txt:'兰州分行'},
                                            {spp:'BK1_871',letter_tag:'K',letter_frs:'K',py_frs:'KMFX',py_full:'KUNMINGFENXING',spp_txt:'昆明分行'},
                                            {spp:'HD1_200',letter_tag:'Z',letter_frs:'Z',py_frs:'ZXYY',py_full:'ZONGXINGYINGYE',spp_txt:'总行营业部'},
                                            {spp:'BK1_311',letter_tag:'S',letter_frs:'S',py_frs:'SJZ',py_full:'SHIJIAZHUANG',spp_txt:'石家庄'},
                                            {spp:'BK1_451',letter_tag:'H',letter_frs:'H',py_frs:'HEB',py_full:'HAERBIN',spp_txt:'哈尔滨'},
                                            {spp:'BK1_891',letter_tag:'L',letter_frs:'L',py_frs:'LSFX',py_full:'LASAFENXING',spp_txt:'拉萨分行'},
                                            {spp:'BK1_898',letter_tag:'H',letter_frs:'H',py_frs:'HKFX',py_full:'HAIKOUFENXING',spp_txt:'海口分行'},
                                            {spp:'BK1_771',letter_tag:'N',letter_frs:'N',py_frs:'NNFX',py_full:'NANNINGFENXING',spp_txt:'南宁分行'},
                                            {spp:'OTH_999',letter_tag:'#',letter_frs:'Q',py_frs:'QT',py_full:'QITA',spp_txt:'其他'}

                          ] ;
    //  var orgpicker = window.orgpicker;

      // 初始化机构 数据
      orgpicker.initData = function(){


           console.log("init data");

           // 判断数组是否存在元素
            function contains(arr, obj) {
                    var i = arr.length;
                    while (i--) {
                        if (arr[i] === obj) {
                            return true;
                        }
                    }
                    return false;
             }
             var existDefault =false;  // 标记是否存在缺省非中文项
           for(var i=0;i < data.length;i++)
           {
                if(data[i].letter_tag !== '*' && !contains(letterlist,data[i].letter_tag)){
                    if(data[i].letter_tag==='#' ){
                        existDefault =true;
                    }else{
                    letterlist.push(data[i].letter_tag);}
                }
           }

           letterlist = letterlist.sort();
           if(existDefault === true){
               letterlist.push('#');
           }
           console.log(letterlist);


      };


      // 初始化页面 html 元素
      orgpicker.buildUI = function(){

                var html = '';

               console.log("buildUi");

               html =
                '<div class ="ui-orgpicker-search" >'+
                '<input  class ="ui-orgpicker-search-input" value ="分行搜索" />'+
                '</div>'+
                '<div class="ui-orgpicker-center-letter" >'+
                '</div>'+
                '<div class="ui-orgpicker-sort-box">'+
                '<div class="ui-orgpicker-sort-letter" style="display:none" id="fix">fix</div>';
                for (var i=0;i<letterlist.length;i++){
                    var letterid =  letterlist[i] ;
                if (letterlist[i] === '#'){
                        letterid = 'default'
                }

                    html +=    '<div class="ui-orgpicker-sort-letter" id="' + letterid + '">' + letterlist[i] + '</div>';
                } ;
                html +=
                '</div>'+
                '<div class="ui-orgpicker-initials">'+
                    '<ul>'+
                        '<li class="ui-orgpicker-initials-letter"><img src="img/068.png"></li>';

                for (var i=0;i<letterlist.length;i++){
                    html +=    '<li class="ui-orgpicker-initials-letter" >' + letterlist[i] +  '</li>'
                } ;
                html +=
                    '</ul>'+
                '</div>';


        $wrapper = document.createElement("div");
        $wrapper.className="ui-orgpicker-wrapper";
                 $wrapper.innerHTML = html;
        document.body.appendChild($wrapper);
      };


      // 数据渲染

      orgpicker.render = function(orgdata, defaultorg){

           console.log("render");
           // 插入机构数据

        for (var i=0;i<data.length;i++){

           var sort_letter_tag  = data[i].letter_tag;
           var sort_id = sort_letter_tag;

           if(sort_letter_tag === '#') {
                   sort_id = 'default';
           }else if(sort_letter_tag === '*') {
                 sort_id = 'fix';
           }

                var sort_data_html = '<div class="ui-orgpicker-sort-list"><div class="ui-orgpicker-sort-data" '+
                'id="' +data[i].spp + ' "py_frs ="' +  data[i].py_frs + ' "py_full = "' + data[i].py_full + '"  >' +
                data[i].spp_txt  + '</div></div>';
       
         console.log ($('#' + sort_id));
         
             $('#' + sort_id).after(sort_data_html);

        }

      };
      
      orgpicker.bindEvent = function(){
          
                  
           $(".ui-orgpicker-wrapper .ui-orgpicker-initials  ul li").click(function(){
                 
                  console.log("bindEvent");
                   
                   var LetterBox = $('.ui-orgpicker-wrapper .ui-orgpicker-center-letter');
                   var Initials  = $('.ui-orgpicker-wrapper .ui-orgpicker-initials');
            var _this=$(this);
            var LetterHtml=_this.html();
            LetterBox.html(LetterHtml);
            LetterBox.css('display','block');


            setTimeout(function(){
                Initials.css('background','rgba(145,145,145,0)');
                LetterBox.css('display','none');
            },1000);
            
            
            var SortBox =$('.ui-orgpicker-wrapper .ui-orgpicker-sort-box');
            
            /**
                    SortBox.scrollTop() ; 获取向下滚动的距离 。
                    
                    SortBox.scrollTop(100) ; 设置向下滚动的离 ；
            
            */
            
            

           /* var _index = _this.index()
            if(_index==0){
                $('html,body').animate({scrollTop: '0px'}, 300);//点击第一个滚到顶部
            }else if(_index==27){
                var DefaultTop=$('#default').position().top;
                $('html,body').animate({scrollTop: DefaultTop+'px'}, 300);//点击最后一个滚到#号
            }else{
                var letter = _this.text();
                if($('#'+letter).length>0){
                    var LetterTop = $('#'+letter).position().top;
                    $('html,body').animate({scrollTop: LetterTop-45+'px'}, 300);
                }
            }*/
        });

      };

      orgpicker.init = function(input){


          orgpicker.initData();
          orgpicker.buildUI();
          orgpicker.render();
          orgpicker.bindEvent();

          //window.orgpicker.init($('.org-picker'))



          /* var $input = document.querySelector(input);
       var isOpen = false;

           $input.addEventListener('click',function () {
          if(isOpen){
              $wrapper.classList.remove('ui-datepicker-wrapper-show');
              isOpen =false;
          }else {
              $wrapper.classList.add('ui-datepicker-wrapper-show');
              var left = $input.offsetLeft;
              var top  = $input.offsetTop;
              var height = $input.offsetHeight;
              $wrapper.style.top = top + height + 2 + 'px';
              $wrapper.style.left = left + 'px';
              isOpen = true;
          }
        },false);

          */
      };

    window.orgpicker = orgpicker;
})();











jiangtaohu123
关注
Android 自定义View实现26个字母滑动索引
李波的专栏
08-10 861
Android 自定义View实现26个字母滑动索引
js+css3侧边栏滚动显示首字母索引特效
06-11
基于js+css3实现的一款简单的侧边栏滚动显示首字母索引特效。
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
12-01
只做实现。。完全没考虑性能优化。所以我实现了以后特别卡。 第一个是在通讯录右边的索引条上进行滑动，滑动到相应字母就跳转到相应字母的锚点上。 思路：监听touchmove事件，获取clientX和clientY，传入到elementFromPoint，然后获取到元素以后执行click()即可。 这里会有个问题，就是如果你的页面中有遮罩层这一类的顶层元素的话，请将其pointer-events:none，就算这个元素的display:none;也没用，实践出真知。可以去试下。 index为索引div的id $("#index").get(0).addEventListener('touchmov
html列表滑动字母索引,小程序--滑动右侧字母索引
weixin_30421223的博客
05-31 322
微信和通讯录经常看到这种，那么在小程序如何实现呢(等下我们需要用到小程序的一个官方组件)，这个功能可以拆分两块，一个是滚动区域，一个是滑动定位区域。实现滚动区域小程序里面实现滚动到指定位置，可以用scroll-view组件.(点击我即可查看小程序文档)复制代码最后面是我刚刚录gif的代码。可以看到scroll-view组件，有一个属性scroll-into-view,这个属性可以实现...
html列表滑动字母索引,js实现做通讯录的索引滑动显示效果和滑动显示锚点效果...
weixin_39638048的博客
05-31 417
只做实现。。完全没考虑性能优化。所以我实现了以后特别卡。第一个是在通讯录右边的索引条上进行滑动，滑动到相应字母就跳转到相应字母的锚点上。思路：监听touchmove事件，获取clientX和clientY，传入到elementFromPoint，然后获取到元素以后执行click()即可。这里会有个问题，就是如果你的页面中有遮罩层这一类的顶层元素的话，请将其pointer-events:none，就...
ElasticSearch 滚动索引
weixin_45277567的博客
04-02 882
elasticsearch 滚动索引
【Elasticsearch索引】Rollover滚动、Shrink收缩、Split拆分索引
qq_44849679的博客
02-28 1152
新索引的设置、映射和别名取自任何匹配的索引模板。另外，您可以在请求的主体中指定设置、映射和别名，就像create index一样。请求中指定的值将覆盖在匹配索引模板中设置的任何值。例如，下面的滚动请求将覆盖索引。},"index.number_of_shards": 1, //目标索引中的分片数。这必须是源索引中分片数量的一个因素。"index.codec": "best_compression" //最佳压缩仅在对索引进行新写操作时生效，例如将分片强制合并到单个段时。},
android 左右滑动+索引图标实现方法与代码
09-05
在Android开发中，实现左右滑动以及索引图标的效果通常是为了提供用户友好的界面，方便浏览和快速定位。本示例使用了`Gallery`组件和`ImageView`来达到这一目的。`Gallery`是Android SDK中提供的一种水平滚动视图，...
jQuery实现带滑动条的菜单效果代码
10-23
在后续的`.mouseover()`事件处理函数中，使用了`$(this).index()`来获取当前鼠标悬停的菜单项的索引，然后通过`headTabLine.animate()`方法实现滑动条宽度的动态调整。此动画效果是基于jQuery的`.animate()`函数实现...
利用滚动索引来管理海量Elasticsearch数据
一起coding，一起嗨。
04-25 1137
利用滚动索引来管理海量Elasticsearch数据
ES滚动索引机制
弹指天下
10-08 5035
滚动索引的作用： - 在高性能热节点上优化高摄取率的活动指标。 - 优化暖节点的搜索性能 - 将较旧、较少访问的数据转移到较便宜的冷节点 - 通过删除整个索引来根据保留策略删除数据。
Elasticsearch索引rollover按日期滚动
u011356878的博客
05-26 6026
查看所有的索引 GET _cat/indices 查看所有的别名 GET 127.0.0.1:9200/_alias 查看的模板 GET 127.0.0.1:9200/_template/模板名 使用通配符 GET /_template/temp* 一、重建索引 从前面的学习中，我们知道es的字段建立后就不能被修改，假设原本是一个string类型的数据，被识别成date类型，之后再传一个string类型，由于无法转换格式就报错。。这个时候我们的做法就只能加一个字段去处理，，久而久之字段太多了。。就不行了 所
Elasticsearch索引的基本操作(3)-索引的滚动操作
冯立彬的博客
06-15 5806
1、说明 笔者的工作场景中，每天需要使用Elasticsearch处理数亿的日志记录，这些数据之间不会有直接的关系，只是用于记录以及用作后续的分析处理以及报表输出。如果都将这些数据所有的数据都放到相同的索引中，那随着时间的堆积，这无疑将会是非常庞大的数据，并且随着索引数量的增加，后续数据的插入和查询，都将会变得越来越慢。 Elasticsearch中提供了对滚动索引（rollover inde...
ES滚动索引设置
Alecor的博客
12-25 1015
ES按照日期滚动索引设置
Elasticsearch中的“滚动索引”策略及其应用场景。
最新发布
qq_33240556的博客
10-21 343
在Elasticsearch中，“滚动索引”（Rolling Index）策略是一种管理时间序列数据或其他需要定期创建新索引的数据的常见方法。这种策略通过为不同时间段的数据创建独立的索引，从而提高搜索性能、简化数据管理和优化存储效率。滚动索引通常与索引模板（Index Templates）、索引生命周期管理（ILM, Index Lifecycle Management）以及别名（Aliases）结合使用。滚动索引的核心思想是基于时间或其他逻辑将数据分割到不同的索引中。例如，可以每天、每周或每月创建一个新的
循环滚动的索引位置
trarck
11-09 200
假设有5个数，初始位置为0,1,2,3,4。 向左移动一位，顺序为4,0,1,2,3 再向左移一位，顺序为3,4,0,1,2 同理，在原始位置0,1,2,3,4 右移一位，1,2,3,4,0 再右移一位，2,3,4,0,1 向左移动一位时，由原最左边的数得到新的最左边的数：j=(i-1+n)%n 向右移动一位时，由原最左边的数得到新的最左边的数：j=(i+1)%n 由于j=...
js滚动条滚动到指定元素位置，js搜索当前页面关键词位置
qq_35461807的博客
06-23 959
看了好多帖子写了一大堆乱七八糟的东西，净说没用的，还是自己写个帖子记录吧。 首先功能需求是在页面上搜索一个关键词，并将滚动条滚动到搜索到的关键词位置。 直接上js代码： $("#bt_search").on("click",function(){ var str=$("#search_word").val(); if(str==""){alert("搜索关键词为空");return ;} var mark=true; $("span").each(function(...
sphinx索引滚动及preopen
Thinking -Walking@未名
10-14 1902
sphinx索引切换有两种模式： ”Without seamless rotate“  or  ”seamless rotate“，系统默认配置是使用”seamless rotate“。 Without seamless rotate, rotating an index
Android ListView右侧索引条实现方法解析
总结来说，这两种方法都可以有效地在Android应用中实现ListView的索引条功能。第一种方法简单易实现，适用于对效果要求不高的场景；第二种方法虽然更复杂，但能提供更接近原生iOS的交互体验。开发者可以根据项目需求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值