html底部弹出选择,jQuery手机端底部弹出菜单列表特效代码

1. 引入CSS

2. 引入JS

3. HTML代码



横向滚动菜单

点击打开选择滚动菜单

bscroll的滚动效果

没有分割线

function showList(){

$("body").scrollmenu({

type:'cross',

// bscroll:true,

// animateIn:'bounceIn',

// animateOut:'bounceOut',

click:function(ret){

if(ret.hasHref){

return

}else{

// switch (ret.index){

// case 0:

// alert(0);

// break;

// }

alert(JSON.stringify(ret));

}

}

});

}

function showList1(){

$("body").scrollmenu({

type:'',

// bscroll:true,

// animateIn:'bounceIn',

// animateOut:'bounceOut',

click:function(ret){

if(ret.hasHref){

return

}else{

// switch (ret.index){

// case 0:

// alert(0);

// break;

// }

alert(JSON.stringify(ret));

}

}

});

}

function showListbscroll(){

$("body").scrollmenu({

// type:'',

bscroll:true,

// animateIn:'bounceIn',

// animateOut:'bounceOut',

click:function(ret){

if(ret.hasHref){

return

}else{

// switch (ret.index){

// case 0:

// alert(0);

// break;

// }

alert(JSON.stringify(ret));

}

}

});

}

function showListnoborder(){

$("body").scrollmenu({

type:'cross',

hasLineBorder:false,

// bscroll:true,

// animateIn:'bounceIn',

// animateOut:'bounceOut',

click:function(ret){

if(ret.hasHref){

return

}else{

// switch (ret.index){

// case 0:

// alert(0);

// break;

// }

alert(JSON.stringify(ret));

}

}

});

}