前端插件-使用

前端插件

前端模板

Jquery Upload File

<link rel="stylesheet" type="text/css" href="js/jQuery-File-Upload-9.18.0/css/jquery.fileupload.css" />

<script src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/jquery.fileupload.js"></script>

<input type="hidden" name="game_apk" />
<span class="btn btn-success fileinput-button">
	<i class="fa fa-plus"></i>
	<span>请上传apk文件</span>
 	 <input id="fileupload_1" type="file" name="files[]" multiple>
</span>
<div id="progress"></div>

$('#fileupload_1').fileupload({
    url: "上传文件请求地址",
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
          $(':input[name=game_apk]').val(decodeURIComponent(file.url));
        });
    },
    fail: function (e, data) {
        console.log("上传失败")
    },
    progressall: function (e, data) {
        console.log(progress);
        $("#progress").html(progress + '%');
    }
});

jquery.copy.js

点击复制内容移动端全兼容(专治各种移动端浏览器)

• 单页面一个复制

<button id="copy">复制链接</button>

$.copy({
    // imgUrl:"success-tips.png",   // 分享图标地址
    text:"复制成功", //分享提示文案
    copyUrl:"复制的内容/链接",   // 自定义复制链接地址
    tipTime:2000, 	// 分享提示消失时间
    copyId:"#copy"	// 复制按钮id
}); 

• 单页面多个复制链接

var data = [
    { "url": "www.baidu.com" },
    { "url": "www.qq.com" },
    { "url": "www.163.com" }
];

$.each(data,function(i,item){
    $("body").append('<button id="copy'+i+'">复制链接</button>');
    $.copy({
        // imgUrl:"success-tips.png",  // 分享图标地址
        text:"复制成功",  // 分享提示文案
        copyUrl:item.url,  // 自定义复制链接地址
        tipTime:2000,  // 分享提示消失时间
        copyId:"#copy"+i  // 复制按钮id
    });
});

mobileSelect.js-多级联动下拉菜单

mobileSelect.js-github

datetimepicker多次点击input日期选择器不显示

遇到datetimepicker多次（包括第二次点击）点击input框时日期选择器不显示，需要使用鼠标监听触发：

/*点方input框时加租监听毒件*/
document.getElementsByName('input的name名称')[0].addEventListener('click',myfunc)
function myfunc(e){
	e.currentTarget.blur();
}

以上这段代码必须放在datetimepicker方法的后面。

例如：

//日历
var startDate = $('#startDate').fdatepicker({
	format: "yyyy-mm-dd",
	todayBtn: true
}).on('changeDate', function (ev){
	startDate.hide();
	$('#endDate')[0].focus();
}).data('datepicker');

var endDate = $('#endDate').fdatepicker({
	format: "yyyy-mm-dd",
	todayBtn: true,
}).on('changeDate', function (ev){
	endDate.hide();
}).data('datepicker');

//解决输入框点击多次（包括两次）不显示的问题
document.getElementById('startDate').addEventListener('click',myfunc);
document.getElementById('endDate').addEventListener('click',myfunc);
function myfunc(e){
	e.currentTarget.blur();
}

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： LQbank
• 本文链接： http://example.com/2021/01/27/前端插件-使用/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！