jQuery实现图片下载代码


Posted in jQuery onJuly 18, 2019

jQuery 实现图片下载代码,供大家参考,具体内容如下

function downloadImage(src) {
 var $a = $("<a></a>").attr("href", src).attr("download", "meitu.png");
 $a[0].click();
}

关键调用downloadImage函数代码

onclick=downloadImage(url)

完整 js 代码

$(function () {
 $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN'])
 var searchText = $('.search').find('input').val()
 
 var columns = []
 
 columns.push({
 title: '分类',
 field: 'category',
 align: 'center',
 valign: 'middle',
 formatter: function (value, row, index) {
  return value
 }
 }, {
 title: '美图',
 field: 'url',
 align: 'center',
 valign: 'middle',
 formatter: function (value, row, index) {
  return "![](" + value + ")"
 }
 }, {
 title: ' 操作',
 field: 'id',
 align: 'center',
 formatter: function (value, row, index) {
  var html = ""
  html += "<div οnclick='addFavorite(" + value + ")' name='addFavorite' id='addFavorite" + value + "' class='btn btn-default'>收藏</div><p>"
  html += "<div οnclick='deleteById(" + value + ")' name='delete' id='delete" + value + "' class='btn btn-default'>删除</div>"
  return html
 }
 })
 
 $('#meituTable').bootstrapTable({
 url: 'meituSearchJson',
 sidePagination: "server",
 queryParamsType: 'page,size',
 contentType: "application/x-www-form-urlencoded",
 method: 'get',
 striped: false, //是否显示行间隔色
 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
 pagination: true, //是否显示分页(*)
 paginationLoop: true,
 paginationHAlign: 'right', //right, left
 paginationVAlign: 'bottom', //bottom, top, both
 paginationDetailHAlign: 'left', //right, left
 paginationPreText: ' 上一页',
 paginationNextText: '下一页',
 search: true,
 searchText: searchText,
 searchTimeOut: 500,
 searchAlign: 'right',
 searchOnEnterKey: false,
 trimOnSearch: true,
 sortable: true, //是否启用排序
 sortOrder: "desc", //排序方式
 sortName: "id",
 pageNumber: 0, //初始化加载第一页,默认第一页
 pageSize: 10, //每页的记录行数(*)
 pageList: [5, 10, 20, 50, 100], // 可选的每页数据
 totalField: 'totalPages',
 dataField: 'content', //后端 json 对应的表格数据 key
 columns: columns,
 queryParams: function (params) {
  return {
  size: params.pageSize,
  page: params.pageNumber,
  sortName: params.sortName,
  sortOrder: params.sortOrder,
  searchText: params.searchText
  }
 },
 classes: 'table table-responsive full-width',
 })
 
 
 $(document).on('keydown', function (event) {
 // 键盘翻页事件
 var e = event || window.event || arguments.callee.caller.arguments[0];
 if (e && e.keyCode == 38 || e && e.keyCode == 37) {//上,左
  // 上一页
  $('.page-pre').click()
 }
 if (e && e.keyCode == 40 || e && e.keyCode == 39) {//下,右
  // 下一页
  $('.page-next').click()
 }
 
 })
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery中库的引用方法
Jan 06 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
You might like
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
网络研修随笔感言
2014/02/17 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2014年采购工作总结
2014/11/20 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers