搜索到
681
篇与
的结果
-
-
-
移动端可滑动选择插件-mobileSelect.js mobileSelect.js是一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等.<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"> <title>移动端可滑动选择插件-mobileSelect.js</title> <!-- 引入样式和js文件 --> <link rel="stylesheet" type="text/css" href="https://www.tpxhm.com/fdetail/mobileSelect.css"> <script src="https://www.tpxhm.com/fdetail/mobileSelect.js" type="text/javascript"></script> </head> <body> <style> .nav h1{ font-size: 22px;} .contain{ width: 100%; text-align: center;} .demo{ width: 200px; margin: 0 auto;} .demo div{ width: 100%; height: 40px; float: left; background: #f04124; border-radius: 4px; margin-top: 2px; color: #fff; line-height: 40px;} </style> <div> <div> <div> <h1>移动端可滑动选择插件-mobileSelect.js</h1> </div> <div> <div id="trigger1">单项选择</div> <div id="trigger2">双项选择</div> <div id="trigger3">多项选择</div> <div id="trigger4">地区选择-级联</div> <div id="trigger5">车型选择-级联</div> </div> </div> </div> <script type="text/javascript"> var weekdayArr=['周日','周一','周二','周三','周四','周五','周六']; var timeArr = ['08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00']; var numArr=['1','2','3','4','5']; var UplinkData = [ {id:'1',value:'兰博基尼'}, { id:'2', value:'劳斯莱斯', childs:[ { id:'1', value:'曜影' }, { id:'2', value:'幻影', childs:[ { id:'1', value:'标准版' }, { id:'2', value:'加长版' }, { id:'3', value:'巅峰之旅' }, { id:'4', value:'流光熠世' }, { id:'5', value:'都会典藏版' } ] }, { id:'3', value:'古思特', childs:[ { id:'1', value:'加长版' }, { id:'2', value:'永恒之爱' }, { id:'3', value:'英骥' }, { id:'4', value:'阿尔卑斯典藏版' } ] }, { id:'4', value:'魅影', childs:[ { id:'1', value:'标准版' }, { id:'2', value:'Black Badge' } ] } ] }, { id:'3', value:'宾利', childs:[ { id:'1', value:'慕尚', childs:[ { id:'1', value:'标准版' }, { id:'2', value:'极致版' } ] }, { id:'2', value:'欧陆', childs:[ { id:'1', value:'尊贵版' }, { id:'2', value:'敞篷标准版' }, { id:'3', value:'敞篷尊贵版' } ] } ] }, { id:'4', value:'法拉利', childs:[ { id:'1', value:'LaFerrari' }, { id:'2', value:'法拉利488' }, { id:'3', value:'GTC4Lusso' } ] }, { id:'5', value:'玛莎拉蒂', childs:[ { id:'1', value:'总裁' }, { id:'2', value:'玛莎拉蒂GT' }, { id:'3', value:'Levante' } ] } ]; //---------------------------------------------------------- //更多参数详情可查看文档 https://github.com/onlyhom/mobileSelect.js /** * 参数说明 * @param trigger(必填参数) 触发对象的id/class/tag * @param wheels(必填参数) 数据源,需要显示的数据 * @param title 控件标题 * @param position 初始化定位 * @param callback 选择成功后触发的回调函数，返回indexArr(选中的选项索引)、data(选中的数据) * @param transitionEnd 每一次手势滑动结束后触发的回调函数,返回indexArr(当前选中的选项索引)、data(选中的数据) * @param keyMap 字段名映射 */ /** * 函数说明(实例化之后才可用) * @function setTitle() 参数 string 设置控件的标题 * @function updateWheel() 参数 sliderIndex, data 重新渲染指定的轮子(可用于先实例化，后通过ajax获取数据的场景) * @function updateWheels() 参数 data 重新渲染所有轮子,仅限级联数据格式使用(可用于先实例化，后通过ajax获取数据的场景) * @function locatePosition() 参数 sliderIndex, posIndex 传入位置数组，重定位轮子的位置 * @function show() 参数 无参 唤起弹窗组件 * @function getValue() 参数 无参 获取组件选择的值 */ var mobileSelect1 = new MobileSelect({ trigger: '#trigger1', title: '单项选择', wheels: [ {data: weekdayArr} ], position:[2], //初始化定位 打开时默认选中的哪个 如果不填默认为0 transitionEnd:function(indexArr, data){ //console.log(data); }, callback:function(indexArr, data){ console.log(data); } }); var mobileSelect2 = new MobileSelect({ trigger: '#trigger2', title: '双项选择', wheels: [ {data: weekdayArr}, {data: timeArr} ], position:[1, 2], transitionEnd:function(indexArr, data){ //console.log(data); }, callback:function(indexArr, data){ console.log(data); } }); var mobileSelect3 = new MobileSelect({ trigger: '#trigger3', title: '多项选择', wheels: [ {data: numArr}, {data: numArr}, {data: numArr}, {data: numArr}, {data: numArr} ], position:[0, 1, 0, 1, 0], transitionEnd:function(indexArr, data){ //console.log(data); }, callback:function(indexArr, data){ console.log(data); } }); var mobileSelect4 = new MobileSelect({ trigger: '#trigger4', title: '地区选择', wheels: [ {data:[ { id:'1', value:'附近', childs:[ {id:'1',value:'1000米'}, {id:'2',value:'2000米'}, {id:'3',value:'3000米'}, {id:'4',value:'5000米'}, {id:'5',value:'10000米'} ] }, {id:'2',value:'上城区'}, {id:'3',value:'下城区'}, {id:'4',value:'江干区'}, {id:'5',value:'拱墅区'}, {id:'6',value:'西湖区'} ]} ], transitionEnd:function(indexArr, data){ //console.log(data); }, callback:function(indexArr, data){ console.log(data); } }); var mobileSelect5 = new MobileSelect({ trigger: '#trigger5', title: '车型选择', wheels: [ {data : UplinkData} ], position: [2,0], transitionEnd:function(indexArr, data){ //console.log(data); }, callback:function(indexArr, data){ console.log(data); } }); </script> </body> </html>附件下载：链接：https://pan.baidu.com/s/1AvrIveJVO-2FlLsxYpii7g&shfl=sharepset提取码：y2mi
-
一个图片上传插件推荐，支持多图上传和删除操作 本插件可以实现图片上传和图片删除操作，同时也可以限制上传图片张数，供大家参考和使用。效果展示：引入js:<script type="text/javascript" src="https://www.tpxhm.com/fdetail/localResizeIMG.js"></script> <script type="text/javascript" src="https://www.tpxhm.com/fdetail/mobileBUGFix.mini.js"></script> html部分代码： <div class="release_up_pic"> <div class="up_pic"> <span id="chose_pic_btn" style=""> <input type="file" accept="image/*" name="file" /> </span> <p class="maxpicture"><b>图片</b><br>(最多四张)</p> </div> </div>js处理代码：<script> // 多图 var picArr = new Array();// 存储图片 var picArrAll = new Array(); $('input[name="file"]:file').localResizeIMG({ width:800,// 宽度 quality: 0.8, // 压缩参数 1 不压缩 越小清晰度越低 success: function (result) { $('.maxpicture').css('display','none') var img = new Image(); img.src = result.base64; var _str = "<span class='pic_look' style='background-image: url("+ img.src + ")'><em id='delete_pic'>×</em></span>" $('#chose_pic_btn').before(_str); var _i = picArr.length picArr[_i] = result.base64; // picArr[_i] = _i; if(picArr.length==4){ $('#chose_pic_btn').css('display','none') } // console.log(picArr) // console.log(picArrAll); } }); // 删除 $(document).on('click', '#delete_pic', function(event) { var aa = $(this).parents(".pic_look").index(); picArr.splice(aa,1); $(this).parents(".pic_look").remove(); // console.log(picArr); if(picArr.length<4){ $('#chose_pic_btn').css('display','block') } }); </script>css样式代码：/*多图*/ .release_up_pic .tit{padding: 12px; font-size: 1.4rem; color: #999;} .release_up_pic .tit h4{font-weight: normal;} .release_up_pic .tit h4 em{font-size: 1.1rem;} .release_up_pic .up_pic{background-color: #fff;} .release_up_pic .up_pic .pic_look{width: 3.92rem; height: 3.92rem; display: inline-block; background-size: cover; background-position: center center; background-repeat: no-repeat; box-sizing: border-box; position: relative; margin-left: 0.2rem; border:1px solid #e8e8e8;} .release_up_pic .up_pic .pic_look em{position: absolute; display: inline-block; width: 100%; height: 1.08rem; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 18px; left: 0px; bottom: 0px; text-align: center; line-height: 1.08rem; font-weight: bold; font-style: normal;} #chose_pic_btn{width: 4.0rem; height: 4rem; margin-left: 0.2rem; position: relative; display: inline-block; background-image: url(images/addUpload.jpg); box-sizing: border-box; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;} #chose_pic_btn input{position: absolute; left: 0px; top: 0px; opacity: 0; width: 100%; height: 100%;} .release_btn{padding: 0 24px; margin-top: 70px;} .release_btn button{width: 100%; background-color: #2c87af; font-size: 1.4rem; color: #fff; border: none; border-radius: 3px; height: 45px; outline: none;} .release_btn button.none_btn{background-color: #f2f2f2; color: #2c87af; border: 1px solid #2c87af; margin-top: 15px;} .maxpicture{display: inline-block; font-size: 0.8rem; color: #999999; line-height: 1.2rem; text-align: center; padding-top: 0.6rem; margin-left: 0.6rem;} .maxpicture b{color: #333333; line-height: 1.2rem; font-weight: normal;}附件下载地址：阿里云盘链接：https://www.aliyundrive.com/s/FTmebryJ1AQ
-
