滑动索引条实现
来源：互联网 发布：道亨软件视频教程 编辑：程序博客网 时间：2024/05/04 17:10
<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;
})();
- 滑动索引条实现
- cocos2dx滑动条实现
- MFC 滑动条实现
- js实现滑动条效果
- 自主实现滑动指示条
- ViewPager实现滑动滚动条
- Andriod实现快速索引条
- OpenCV利用滑动条实现一个开关
- viewpager资助实现滑动指示条
- viewpager + 滑动导航条的实现
- opengl 简单滑动条类实现
- ViewPager实现广告条自动滑动
- html5js实现滚动条滑动到底部
- Animation Silder实现动画播时滑动条随之滑动
- opencv实现视频播放时滑动条滑动
- 滑动条
- 滑动条：
- 滑动条
- 并查集
- UFLDL教程：Exercise:PCA in 2D & PCA and Whitening
- SSLException:Ssl handShakeaborted 解决方法
- Python 代码规范
- XDOJ 1090: 爬树的V8
- 滑动索引条实现
- js事件循环
- IOS scenekit 物体旋转问题
- 怎么样在3个月左右从0基础成为一个独立完成项目的工程师？
- Skill: MacOS主机与Win7主机相互实现上传与下载
- pdo
- js封装
- Linux 进程，作业管理，解压命令汇总
- Android内存优化-MAT使用
