jQuery实现图片下载代码

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()
    }

  })

})

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

(0)

相关推荐

  • jquery实现下载图片功能

    本文实例为大家分享了jquery实现下载图片的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js&quo

  • jQuery实现图片下载代码

    jQuery 实现图片下载代码,供大家参考,具体内容如下 function downloadImage(src) { var $a = $("<a></a>").attr("href", src).attr("download", "meitu.png"); $a[0].click(); } 关键调用downloadImage函数代码 onclick=downloadImage(url) 完整 js 代

  • jquery实现图片切换代码

    本文实例为大家分享了jquery实现图片切换的方法,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js&qu

  • 基于jQuery实现仿百度首页换肤背景图片切换代码

    不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- 在线预览    源码下载 html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></div> &l

  • jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)

    本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法.分享给大家供大家参考,具体如下: 综合网上一些代码 自己写的一个图片缩放拖拽的小插件 /** * * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery<

  • jQuery超精致图片轮播幻灯片特效代码分享

    本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"

  • 基于jQuery仿淘宝产品图片放大镜代码分享

    这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="

  • 简单的jQuery banner图片轮播实例代码

    朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. 先给大家展示下效果图: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title&

  • jQuery+css实现的切换图片功能代码

    本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="t

  • jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

  • iOS异步下载图片实例代码

    写在前面 在iOS开发中,无论是在UITableView还是在UICollectionView中,通过网络获取图片设置到cell上是较为常见的需求.尽管有很多现存的第三方库可以将下载和缓存功能都封装好了供开发者使用,但从学习的角度出发,看懂源码,理解其中的原理,结合自身的实际需求写出自己的代码是很必要的.在刚结束的Demo中,有用到异步图片下载功能,这篇笔记就是对整个实现的简单整理. 基本思路 •cell中添加一个UIImageView •cell拥有url,发起下载请求,注册下次完成通告,在通

随机推荐