uploadify 自定义按钮样式

uploadify是一款不错的JQUERY上传插件,但是FLASH按钮的外挂往往跟我们网页的设计不太搭配。一开始我还试图反编译uploadify.swf来修改其外观,结果发现反编译为FLA后里面没有任何图片资源。

原来,这个按钮是用CSS绘制的。代码文件是uploadify.css.

打开这个文件后,你会看见CSS设置的按钮样式。OK,现在想修改就很简单了,不论你是写一段新的CSS还是替换成图片都可以的。

我懒省事,就直接用图片作为按钮背景了。

代码:

.uploadify-button {

background:url(BG_button.PNG );

}

.uploadify:hover .uploadify-button {

background:url(BG_buttonOver.PNG );

}

下面就是修改一下按钮上的文字了,默认的是"SELECT FILES",这对于大部分土鳖客户是无法接受的,当然也是为了跟主页面的文字保持一致,还是要修改成中文的。打开jquery.uploadify.min.js,搜索这个字符串你就会找到它的位置:

buttonText:"SELECT FILES",

把这里的字符串替换成你想要的就可以了。我是直接设置为空了,因为这个字符串在按钮上的显示位置还得去找怎么调整。所以,直接把文字写在按钮的背景图片里不就行了吗。

最后,截图看一下我修改好的样子:

时间: 2024-10-10 17:18:37

uploadify 自定义按钮样式的相关文章

[HTML/CSS]uploadify自定义按钮样式

概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式. 1 .uploadify-button { 2 background-color: #505050; 3 background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 4 background-

ionic 自定义按钮样式 和背景图片填充父视图

在写项目时需要用到只显示文字的按钮  点击显示自己要显示的颜色 html代码 <a class="button head-color" href="#">注册</a> css代码 .head-color{ color: white; background-color: transparent; } .head-color:hover{ color: #fe8189; } .head-color:link{ background-color:

网站上点击自定义按钮发起QQ聊天的解决方案

一.背景 最近由于开发需要,需要在网站上自定义一个立即交谈的按钮,现将解决方式分享给大家. 二.解决方案 1.首先访问:http://shang.qq.com/widget/consult.php,适用需要作为目的QQ的号码进行登陆,然后点击弹出窗口中的"立即免费开通"按钮,进入到如下页面: 2.选择好你想要的组件样式以及提示语,然后copy以下界面中文本框中的代码到你网站的指定位置.或者你选择该段代码中的圈出的url(http://wpa.qq.com/msgrd?v=3&u

自定义新浪微博分享按钮样式

自定义新浪微博分享按钮样式 新浪开放平台虽然有分享按钮的组件(http://open.weibo.com/sharebutton)并且提供了两种格式的应用方法:WBML和JS,但还是无法据自己的需求做到自定义样式. 为了解决该问题,我们首先来看下新浪所生成的JS代码: <script type="text/javascript" charset="utf-8"> (function(){ var _w = 32 , _h = 32; var param

WPF自定义控件与样式(2)-自定义按钮FButton

一.前言.效果图 还是先看看效果图吧:   定义Button按钮名称叫FButton,主要是集成了字体图标(参考上一篇:WPF自定义控件与样式1-矢量字体图标(iconfont)).其实在WPF里,要实现本文FButton的需求,完全可以不用自定义控件,使用样式.模板就可以搞定了的. 二.按钮FButton控件定义 2.1 FButton继承自微软基础控件Button (C#代码) FButton继承自微软基础控件Button,没有什么逻辑代码,主要扩展了几个属性: 控件外观控制的属性,如圆角.

WPF自定义漂亮的按钮样式

首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮: 然后给各个按钮设置不同的背景颜色: 设置好之后就是这样啦: 然后我们就开始在 App.xaml 文件中定义按钮样式了: 定义的样式代码如下: 以下为引用的内容: <Application x:Class="WPFButton.App"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen

博客园自定义样式(去广告、公告栏加头像、按钮样式)

前言: 简单的操作 1)可以通过审查元素的方法,来设置自己满意的样式.操作是F12.F12操作可以打开控制面板,具体的样式可以直接在上面修改,然后把修改后的样式保存下来. 2)保存后的样式,复制到[ 管理 ] - [ 设置 ] - 页面定制CSS代码上面,然后[ 保存 ] 1.隐藏广告 /*隐藏广告*/ #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb { display: none; } 2.按钮样式 /* 关

WPF学习笔记-用Expression Blend制作自定义按钮

1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a copy... 3.在弹出的Create style resource对话框中,修改新按钮样式的名称 4.在左侧的Object and timeline面板中选中ContentPresenter元素,按Ctrl+X将此标记临时保存到内存中 5.选中Chrome,按Delete键删除 6.选中Template,在

qt 5 小练习 纯代码制作自定义按钮

大家都知道QT设计师中直接拖动的按钮是长方形带有圆角的图案,那我们如何来设置自定义按钮呢 要设计一个按钮,我们必须要知道按钮有什么属性,首先,按钮必须有一个位置 第二,按钮必须有一个名称.还有当我们点击按钮时他会做出什么样的反应.所以我们定义两个类, 一个QRect _rect; (或者QPoint 更为贴切吧) 第二个是 QString _text; 既然有反应,那我们第一想到的就是鼠标事件,添加一个bool _press; 以及 void mousePressEvent(QMouseEven