PageAdmin网站内容管理系统(CMS)交流论坛

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

文章發佈中加入下載按鈕樣式 [复制链接]

1#
一、效果:

二、需要修改兩個文件:
1、/Incs/UEditor/ueditor.all.min.js
編輯文件,查找關鍵字【<p style="line-height: 16px;">】。如下圖

從【<p】開始一直選擇到【</a></p>】,如下圖

將選擇的內容替換為以下代碼:
  1. <p style="line-height: 16px;"><a style="font-size:12px; color:#0066cc;" href="'+f.url+'" title="'+h+'" download><button type="button" class="dload"><img style="vertical-align: middle; margin: 0 10px 3px 0;" src="'+g+'" _src="'+g+'" /><span style="margin-right: 10px;">'+h+"</span></button></a></p>
复制代码
提交保存
2、/Templates/Default/Css/layout.css
在適當位置加入以下代碼
  1. /* ---- DownLoad Buttons ---- */
  2. .dload {
  3.     display: inline-block;
  4.     margin-bottom: 0;
  5.     font-size: 1rem;
  6.     font-weight: normal;
  7.     line-height: 1.42857143;
  8.     text-align: center;
  9.     white-space: nowrap;
  10.     vertical-align: middle;
  11.     cursor: pointer;
  12.     -webkit-user-select: none;
  13.     -moz-user-select: none;
  14.     -ms-user-select: none;
  15.     user-select: none;
  16.     background-image: none;
  17.     background: #ECF5FF;
  18.     border-color: #409EFF;
  19.     color: #223366;
  20.     padding: 10px 20px;
  21.     border-radius: 10px;
  22. }
  23. .dload:focus, .dload:active:focus, .dload.active:focus {
  24.     outline: 5px auto -webkit-focus-ring-color;
  25.     outline-offset: -2px;
  26.     outline:none;
  27. }
  28. .dload:hover, .dload:focus {
  29.     color: #44AAFF;
  30.     text-decoration: none;
  31. }
  32. .dload:hover {
  33.     background: #44AAFF;
  34.     color:#fff;
  35. }
  36. .dload:active, .dload.active {
  37.     background-image: none;
  38.     outline: 0;
  39.     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  40.     box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  41. }
  42. .dload.disabled, .dload[disabled], fieldset[disabled] .dload {
  43.     pointer-events: none;
  44.     cursor: not-allowed;
  45.     filter: alpha(opacity=65);
  46.     -webkit-box-shadow: none;
  47.     box-shadow: none;
  48.     opacity: .65;
  49. }
  50. .dload.blue {
  51.     background: #44AAFF;
  52.     color: #FFF;
  53. }
  54. .dload.blue:hover{background: #44AAFF;}
复制代码
提交保存


注意事項:
1、兩個文件裡的變量名【dload】可以替換。
2、CSS文件裡的字號、背景、顏色等可隨意修改。

分享 转发
TOP
2#

第二步,1、/Incs/UEditor/ueditor.all.min.js 修改替換代碼,可以使用download屬性,給下載的文件名命名。代碼如下:
  1. <p style="line-height: 16px;"><a style="font-size:12px; color:#0066cc;" href="'+f.url+'" title="'+h+'" download="' + h + '"><button type="button" class="dload"><img style="vertical-align: middle; margin: 0 10px 3px 0;" src="'+g+'" _src="'+g+'" /><span style="margin-right: 10px;">'+h+"</span></button></a></p>
复制代码
TOP
发新话题 回复该主题