移动端单选插件-jquery

最新推荐文章于 2024-04-14 01:40:16 发布

转载最新推荐文章于 2024-04-14 01:40:16 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuhao-web/p/11270672.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS和JavaScript实现的自定义下拉选择器，该选择器具有固定位置、滚动列表和高亮选中项等功能。通过jQuery插件封装，可以轻松应用于多个元素，同时提供了回调函数以响应选择变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

.clear::after {

content: ".";

clear: both;

display: block;

overflow: hidden;

font-size: 0;

height: 0;

}

.singleSelect .singleSelectMask {

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: black;

opacity: .5;

}

.singleSelect .singleSelectContent {

position: fixed;

bottom: 0;

left: 0;

background: white;

width: 100%;

font-size: 12px;

}

.singleSelect .fr {

float: right;

}

.singleSelect .fl {

float: left;

}

.singleSelect .singleSelectButton {

padding: 10px 20px;

border-bottom: 1px solid #ededed;

}

.singleSelect .selectItem {

text-align: center;

padding-top: 10px;

padding-bottom: 10px;

}

.singleSelect .selectItemActive {

background: #81B1FF;

}

.singleSelect .selectItemCon {

height: 200px;

overflow: auto;

}

.select {

height: 40px;

width: 200px;

line-height: 40px;

position: relative;

border: 1px solid black;

}

.select::after {

pointer-events: none;

position: absolute;

right: 10px;

top: 50%;

content: "";

display: block;

width: 20px;

height: 20px;

margin-top: -10px;

background: url("./arrowDown.png") no-repeat center;

background-size: contain

}

</style>

</head>

<body>

(function ($) {

$.fn.singleSelct = function (data,fn) {

var that = $(this)

this.each(function () {

var str = '<div class="singleSelect">' +

'<div class="singleSelectMask"></div>' +

'<div class="singleSelectContent">' +

'<div class="singleSelectButton clear">' +

'<span class="fl singleCancel">取消</span>' +

'<span class="fr singleOver" style="color:#81B1FF">完成</span>' +

'</div>' +

'<div class="selectItemCon">@@@@</div>' +

'</div> ' +

'</div>';

var itemstr = ""

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

itemstr += '<div class="selectItem" value="' + data[i]["value"] + '">' + data[i]

["name"] + '</div> '

}

str = str.replace("@@@@", itemstr);

$(this).click(function () {

$("body").append(str)

if ($(this).attr("value")) {

$(".selectItem[value=" + $(this).attr("value") + "]").addClass(

"selectItemActive")

}

$(".selectItem").click(function () {

$(this).addClass("selectItemActive")

$(this).siblings().removeClass("selectItemActive")

})

$(".singleCancel").click(function () {

$(".singleSelect").remove()

return false

})

$(".singleOver").click(function () {

if ($(".selectItemActive").length == 0) {

$(".singleSelect").remove()

return

}

that.attr("value", ($(".selectItemActive").attr("value")))

fn($(".selectItemActive").attr("value"))

that.html($(".selectItemActive").html())

$(".singleSelect").remove()

return false

})

});

};

})(jQuery);

$("#input").singleSelct([{

value: 7755777

}, {

value: 773777

}, {

value: 774777

},],function(val){

alert(val)

})

</script>

</body>

</html>

转载于:https://www.cnblogs.com/liuhao-web/p/11270672.html