<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<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>
<script src="./js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="input" class="select" value="774777">9299</div>
<div id="input1" class="select" value="774777">9299</div>
<script>
 
(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([{
name: 999,
value: 7755777
}, {
name: 9991,
value: 773777
}, {
name: 9299,
value: 774777
},],function(val){
alert(val)
})
 
</script>
</body>
</html>

移动端单选插件-jquery的更多相关文章

  1. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  2. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  3. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  4. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  5. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  6. [插件]jQuery multiselect初始化及默认值修改

    下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...

  7. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  8. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  9. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

随机推荐

  1. 同步类容器和并发类容器——ConcurrentMap、CopyOnWrite、Queue

     一 同步类容器同步类容器都是线程安全的,但在某些场景中可能需要加锁来保证复合操作. 符合操作如:迭代(反复访问元素,遍历完容器中所有元素).跳转(根据指定的顺序找到当前元素的下一个元素).条件运算. ...

  2. Ubuntu图形界面和终端界面切换快捷键

    Ctrl+Alt+F1可以从图形界面切换到终端界面. Ctrl+Alt+F7可以从终端界面退出来,重新回到图形界面

  3. Vuex 常规用法

    背景 很多时候我们已经熟悉了框架的运用,但是有时候就是忘了怎么用 所以这里想记下大部分的框架使用方法,方便使用的时候拷贝 一.安装 npm 方式 npm install vuex --save yar ...

  4. （转）阿里RocketMQ Quick Start

    转:http://blog.csdn.net/a19881029/article/details/34446629 RocketMQ单机支持1万以上的持久化队列,前提是足够的内存.硬盘空间,过期数据数 ...

  5. STM32嵌入式开发学习笔记（一）

    本文中,笔者将介绍使用嵌入式开发工具Keil uVision5,使用C语言,对微处理器STM32F103C8进行嵌入式开发. 开发使用C语言,首先需要新建一个C语言文件,将其设为主函数的入口,因此,将 ...

  6. Java进程Runtime、Process、ProcessBuilder调用外部程序

    原文地址:https://blog.csdn.net/c315838651/article/details/72085739 通过Java执行系统命令,与cmd中或者终端上一样执行shell命令,最典 ...

  7. 2、Appium Desktop 使用介绍

    1.appium运行界面介绍 默认显示监控的 host 和 port , 这和 Appium-Server 中是一致的.  2.点击 “Start Server V 1.7.2” 按钮启动服务,出现如 ...

  8. 小程序 webview踩坑

    很多功能是需要调用wx.confing的 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开, ...

  9. 前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器

    回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...

  10. C# WinForm控件之advTree

    0.属性和方法 //属性方法 advTree1.DragDropEnabled = !advTree1.DragDropEnabled;//控制是否可以拖动节点到 不同的层级下 advTree1.Mu ...