用layer for mobile做的一个wap页面模拟select下拉菜单

分享 未结
1 645
寒风
寒风 2017-12-21
悬赏:20飞吻
自己在做一个小项目,需要PC和WAP页面。
PC端用了layui,感谢layui.
一直想把PC端的东西用到WAP页面,但效果不理想,仅使用了layer for mobile.
在使用select的时候,没有找到满意的方案,就用layer的底部提示功能模拟了select.
一个思路而已,应该是比较小白的东西吧,分享出来,仅供娱乐。

效果是这个样子的。


JS插件的代码
$(function(){
$.fn.layselect = function(options){
var lay_config={
body:"body", //模拟select生成的DIV存放的父容器
width: 110, //默认宽度
onselect: "" // 点击后选中事件
}

var settings=$.extend(lay_config,options);
return this.each(function(elem_id) {
var obj=this;
var elem_id=$(obj).attr("id"); // 元素的ID
var elem_data=$(obj).val(); //元素的值
var elem_text=$(obj).find("option:selected").text();//元素文本
var select_body='<div class="select-text" id="select-text-'+elem_id+'"></div>';
select_body+='<ul class="select-ul select-ul-'+elem_id+'">';
$(obj).children("option").each(function(i){
if(elem_data==$(this).val())
{
select_body+='<li class="select-li select-li-'+elem_id+' select-on" id="select-li-'+elem_id+'-'+i+'" data="'+$(this).val()+'"><span><i class="fa fa-angle-right"></i></span>'+$(this).text()+'</li>';
}else{
select_body+='<li class="select-li select-li-'+elem_id+'" id="select-li-'+elem_id+'-'+i+'" data="'+$(this).val()+'"><span><i class="fa"></i></span>'+$(this).text()+'</li>';
}
})
select_body+='</ul>';
$(select_body).appendTo(settings.body);
$("#select-text-"+elem_id).html(elem_text);
$("#select-text-"+elem_id).css({
"width":settings.width+"px",
})

$(document).on("click","#select-text-"+elem_id,function(){
select_html=layer.open({
content:$(".select-ul-"+elem_id).html(),
skin:"footer"
})
})

$(document).on("click",".select-li-"+elem_id,function(){
var this_id=$(this).attr("id");
$("#select-text-"+elem_id).html($(this).text());
$(obj).val($(this).attr("data"));
$(".select-li-"+elem_id).removeClass("select-on");
$(".select-li-"+elem_id).find("i").removeClass("fa fa-angle-right");
$("#"+this_id).addClass("select-on");
$("#"+this_id).find("i").addClass("fa fa-angle-right");
layer.close(select_html);
if (settings.onselect != undefined && settings.onselect != "" && typeof settings.onselect == "function")
{
settings.onselect($(this).attr("data"), $(this).text(),elem_id);
}
})
})
}
})
使用方法:
$("#demo").layselect({
body:'.demo', //容器
width:'120', //样式
onselect:function(value,text,elem){ //回掉
alert(value);
}
})
百度网盘下载
链接: https://pan.baidu.com/s/1bp4jEJt 密码: ybf1

回帖
  • 消灭零回复
本帖已设置禁止回复