通用样式库
全站通用按钮组件,无图片纯 css 实现,IE8 以下无圆角。
蓝-绿色按钮a
<a
class="admin-button admin-button-big blue-green"
href="###">
蓝-绿色大按钮
</a>
<a
class="admin-button admin-button-middle blue-green"
href="###">
蓝-绿色中按钮
</a>
<a
class="admin-button admin-button-small blue-green"
href="###">
蓝-绿色小按钮
</a>
蓝-绿色按钮bottom
<button
class="admin-button admin-button-big blue-green"
>
蓝-绿色大按钮
</button>
<button
class="admin-button admin-button-middle blue-green"
>
蓝-绿色中按钮
</button>
<button
class="admin-button admin-button-small blue-green"
>
蓝-绿色小按钮
</button>
白色按钮a
<a
class="admin-button admin-button-big liner-gray-white"
href="###"
>
白色大按钮
</a>
<a
class="admin-button admin-button-middle liner-gray-white"
href="###"
>
白色中按钮
</a>
<a
class="admin-button admin-button-small liner-gray-white"
href="###"
>
白色小按钮
</a>
白色按钮bottom
<button
class="admin-button admin-button-big liner-gray-white"
>
白色大按钮
</button>
<button
class="admin-button admin-button-middle liner-gray-white"
>
白色中按钮
</button>
<button
class="admin-button admin-button-small liner-gray-white"
>
白色小按钮
</button>
按钮样式
<a
class="admin-button admin-button-middle blue-green"
href="###"
>
蓝-绿色按钮
</a>
<a
class="admin-button admin-button-middle green-blue"
href="###"
>
绿-蓝色按钮
</a>
<a
class="admin-button admin-button-middle gray-blue"
href="###"
>
灰-蓝色按钮
</a>
<a
class="admin-button admin-button-middle gray-red"
href="###"
>
灰-红色按钮
</a>
<a
class="admin-button admin-button-middle gray-darkgray"
href="###"
>
灰-深灰色按钮
</a>
<a
class="admin-button admin-button-middle liner-gray-white"
href="###"
>
白色按钮
</a>
<a
class="admin-button admin-button-middle liner-darkgray-white"
href="###"
>
灰色按钮
</a>
<a
class="admin-button admin-button-middle liner-orange"
href="###"
>
橙色按钮
</a>
<a
class="admin-button admin-button-middle liner-blue"
href="###"
>
蓝色按钮
</a>
<a
class="admin-button admin-button-middle liner-red"
href="###"
>
红色按钮
</a>
<a
class="admin-button admin-button-middle liner-red saving"
href="###"
>
动画背景
</a>
按钮样式:
class中admin-button-big、admin-button-middle、admin-button-small分别代表按钮的大、中、小;后面的blue-green、green-blue、gray-blue、gray-red、gray-darkgray、liner-gray-white、liner-darkgray-white、liner-orange、liner-blue、liner-red、liner-red saving分别代表不同的样式
全站通用按钮组件,无图片纯 css 实现,IE8 以下无圆角。
单条操作按钮
单条删除按钮
<a
class="admin-button admin-button-big gray-red"
href="###"
>
单条删除
</a>
功能:
单条删除
单条确认删除按钮
<a
class="admin-button admin-button-big liner-red"
href="###"
>
单条确认删除
</a>
功能:
单条确认删除
批量操作按钮
批量删除按钮
<a
class="admin-button admin-button-middle liner-darkgray-white delete-all"
href="###"
>
批量删除
</a>
功能:
批量删除
确认批量删除按钮
<a
class="admin-button admin-button-big liner-red delete-all"
href="###"
>
确认批量删除
</a>
功能:
确认批量删除
取消删除按钮
<a
class="admin-button admin-button-big liner-darkgray-white"
href="###"
>取消删除按钮
</a>
功能:
取消当前删除操作按钮
保存排序操作按钮
保存排序
<a
class="admin-button admin-button-middle liner-gray-white save-rank"
href="###"
>
保存排序
</a>
功能:
保存排序
开关
|
<span
class="admin-button admin-button-switch-on"
>
<b
class="item"
>
|
</b>
<input
name=""
type="hidden"
value="on"
/>
</span>
功能:
1.玖佰开关+带ajax操作的开关:
class="admin-button admin-button-switch-on"(开是on 关是off)
2.玖佰开关+无ajax操作的开关:
class="admin-button admin-button-switch-on input"(控制内部input值value)
叉号按钮
<a
class="admin-button admin-button-close liner-red for-c"
href="###"
>
<i
class="iconfont"
>

</i>
</a>
功能:
叉号按钮(目前有for-c、for-image、for-tr、for-field)
C代码按钮
<div
class="admin-button-code-box"
>
<a
class="admin-button admin-button-code liner-blue"
href="###">
C
</a>
<div
class="code"
style=
"width:200px;"
>
弹出内容
</div>
</div>
功能:
C代码按钮
链接图片上传按钮
<div
id="swfuploadimg"
swfimgwidth="压缩类型"
swfimgheight="压缩高"
swfimgtype="压缩宽"
>
</div>
<div
class="admin-button-code-box"
>
<div
class="admin-box-swfupload-for-link"
>
<ul
id="divFileProgressContainerx??x"
>
<li>
<img
src=""
class="thumbimg-for-link"
>
</ li>
</ ul>
<span
class="buttonspan"
>
<a
style="position:relative;"
class="admin-button admin-button-small liner-blue"
href="###"
>
上传
<span
id="goodimguploadx??x"
>
</span>
<span
class="swfuploadImgonloadLink"
>
</span>
</a>
</span>
</div>
</div>
功能:
链接图片上传按钮
单张图片上传
<label
id="swfuploadimg"
swfimgwidth="压缩类型"
swfimgheight="压缩高"
swfimgtype="压缩宽"
>
</label>
<input
type="hidden"
name=""
value=""
id="swfupload_image_val"
/>
<div
class="admin-box-swfupload"
>
<ul
id="swfuploadContainer"
>
<li>
<img
height="50"
src=""
class="thumbimg"
>
</ li>
</ ul>
<span
class="buttonspan"
>
<a
style="position:relative;"
class="admin-button admin-button-middle liner-blue"
href="###"
>
上传
<span
id="goodimgupload"
>
</span>
<span
class="swfuploadImgonload"
>
</span>
</a>
</span>
</div>
功能:
单张图片上传
批量图片上传
<label
id="swfuploadmulti"
swfimgwidth="压缩类型"
swfimgheight="压缩高"
swfimgtype="压缩宽"
>
</label>
<ul
id="swfuploadmultiContainer"
class="admin-box-multimage"
>
</ ul>
<input
type="hidden"
name=""
value=""
/>
<a
style="position:relative;"
class="admin-button admin-button-middle liner-orange"
href="###"
>
批量上传
<span
id="goodimguploadmulti"
>
</span>
<span
class="swfuploadImgonloadmulti"
>
</span>
</a>
功能:
批量图片上传
直接点击操作按钮
直接点击修改
<a
class="admin-button admin-button-small green-blue"
href="###"
>
直接点击修改
</a>
功能:
直接点击修改(打开链接标识:new-link)
直接修改-保存
<a
class="admin-button admin-button-small blue-green"
href="###"
>
直接修改-保存
</a>
功能:
直接修改-保存
直接修改-取消
<a
class="admin-button admin-button-small gray-darkgray"
href="###"
>
直接修改-取消
</a>
功能:
直接修改-取消
直接添加操作按钮
直接添加
<a
class="admin-button admin-button-middle liner-blue"
href="###"
>
直接添加
</a>
功能:
直接添加(打开链接标识:new-link)
直接添加-保存
<a
class="admin-button admin-button-small blue-green add-save"
href="###"
>
直接添加-保存
</a>
功能:
直接添加-保存
直接添加-取消
<a
class="admin-button admin-button-small gray-darkgray add-cancel"
href="###"
>
直接添加-取消
</a>
功能:
直接添加-取消
自定义字段管理
添加字段按钮
<a
class="admin-button admin-button-middle liner-blue add-field"
href="###"
>
添加字段按钮
</a>
功能:
添加字段按钮
关闭添加字段面板白叉
<a
class="admin-button admin-button-close blue-deepblue fn-right"
href="###"
>
X
</a>
功能:
关闭添加字段面板白叉
弹出框(删除)按钮
弹出框直接消失
<a
class="admin-button admin-button-big liner-darkgray-white"
href="###"
>
弹出框直接消失
</a>
功能:
弹出框直接消失
运行出错后刷新页面按钮
<a
class="admin-button admin-button-big liner-red delete-fail"
href="###"
>
运行出错后刷新页面按钮
</a>
功能:
运行出错后刷新页面按钮
运行出错后不刷页面按钮
<a
class="admin-button admin-button-big liner-red delete-fail disappear"
href="###"
>
运行出错后不刷页面按钮
</a>
功能:
运行出错后不刷页面按钮
返回按钮
<a
class="admin-button admin-button-middle liner-gray-white go-back"
href="###"
>
返回按钮
</a>
功能:
返回按钮
添加按钮
<a
class="admin-button admin-button-middle liner-blue ajax-add"
href="###"
>
添加按钮
</a>
功能:
添加按钮
修改按钮
<a
class="admin-button admin-button-small green-blue ajax-edit"
href="###"
>
修改按钮
</a>
功能:
修改按钮
选择,输入框,无图片纯 css 实现,IE8 以下无光晕效果。
textarea内容框
<textarea
class="admin-form-textarea admin-form-w1"
>
</textarea>
<textarea
class="admin-form-textarea admin-form-w2"
>
</textarea>
<textarea
class="admin-form-textarea admin-form-w3"
>
</textarea>
<textarea
class="admin-form-textarea admin-form-w4"
>
</textarea>
<textarea
class="admin-form-textarea admin-form-w5"
>
</textarea>
<textarea
class="admin-form-textarea admin-form-h1"
>
</textarea>
<textarea
class="admin-form-textarea admin-form-h2"
>
</textarea>
提示弹出框效果
这里是一个提示弹出框(如确定删除,删除失败提示等)
<div
class="admin-box-del-bg"
>
</div>
<div
class="admin-box-del-window"
>
<div
class="admin-box-del-window-alert"
>
<a
class="admin-button admin-button-big liner-red"
href="###"
>
确定删除
</a>
<a
class="admin-button admin-button-big liner-darkgray-white"
href="###"
>
取消
</a>
<a
class="admin-button admin-button-big liner-red delete-fail"
href="###"
>
删除失败
</a>
</div>
</div>
功能:
这里是一个提示弹出框(如确定删除,删除失败提示等)
会员框
<div
class="admin-box-member-1-style"
>
<a
class="admin-button admin-button-small blue-green"
>
更多样式
</a>
<div
class="admin-box-member-1-container"
>
<em
class="admin-box-member-1-msg-com admin-box-member-1-msg-cont01
>
◆
</em>
<em
class="admin-box-member-1-msg-com admin-box-member-1-msg-cont02
>
◆
</em>
<div
class="admin-box-member-1-content"
>
<div
class="admin-box-member-1-com-style admin-box-member-1-distance"
>
<span
>
距离头部高度:
</span>
<input
type="text"
name=""
value=""
/>
</div>
<div
class="admin-box-member-1-com-style admin-box-member-1-color"
>
<span
>
颜色:
</span>
<input
type="radio"
name="name"
id=""
value=""
/>
<label
style="background:#0FF"
for=""
>
</label>
<input
type="radio"
name="name"
id=""
value=""
/>
<label
style="background:#0FF"
for=""
>
</label>
<input
type="radio"
name="name"
id=""
value=""
/>
<label
style="background:#0FF"
for=""
>
</label>
<input
type="radio"
name="name"
id=""
value=""
/>
<label
style="background:#0FF"
for=""
>
</label>
</div>
<div
class="admin-box-member-1-com-style admin-box-member-1-position"
>
<span
>
位置:
</span>
<input
type="radio"
name="name"
id=""
value=""
/>
<label
for=""
>
左
</label>
<input
type="radio"
name="name"
id=""
value=""
/>
<label
for=""
>
右
</label>
</div>
<div
class="admin-box-member-1-com-style admin-box-member-1-bgstyle"
>
<span
>
风格:
</span>
<input
type="radio"
name="name"
id=""
value=""
/>
<label
for=""
>
左
</label>
<input
type="radio"
name="name"
id=""
value=""
/>
<label
for=""
>
右
</label>
</div>
<div
class="admin-box-member-1-slide-bt"
>
<a
class="admin-button admin-button-middle liner-gray-white"
>
收起
</a>
</div>
</div>
</div>
</div>
功能:
这里是一个提示弹出框(如确定删除,删除失败提示等)
flash播放器插件
<object
type="application/x-shockwave-flash"
data="插件路径名称.swf"
width="插件宽度"
height="插件高度"
<param
name="wmode"
value="transparent"
/>
<param
name="movie"
value="插件路径名称.swf"
/>
<param
name="flashvars"
value="mp3=文件路径.mp3"
/>
</object>
功能:
对指定音频文件增加播放、暂停等效果,调用的插件不同有不同的显示效果,分别有如下几种插件:dewplayer-mini.swf \ dewplayer.swf \ dewplayer-multi.swf \ dewplayer-rect.swf \ dewplayer-bubble.swf
官网:http://www.alsacreations.fr/dewplayer.html