jQuery+CSS实现select列表菜单表单样式美化
DIV+CSS+jQuery表单美化SELECT列表菜单方法与代码
JQ SELECT美化后的列表菜单表单控件效果图
我们使用CSS控制表单输入框样式美化没问题、CSS设置按钮表单样式没问题,比较头疼的是一般CSS是不能单纯像输入框、按钮设置美化,单纯使用CSS美化SELECT无效,至少IE6、IE7等浏览器不支持CSS样式美化。这个时候Thinkcss整理一个使用JQ+DIV+CSS来美化SELECT菜单下拉列表表单控件。
- jQuery SELECT目录
一、SELECT表单样式美化原理 - TOP
我们用DIV CSS布局让SELECT表单隐藏,JQ取出列表SELECT数据和值,再通过DIV CSS来重新模拟表单美化后样式。我们实际看到美化后表单下拉菜单是JQ模拟出的通过DIV+CSS实现下拉效果,通过选择下拉列表值JQ再赋予SELECT选择值。
二、SELECT美化特效代码 - TOP
1、JS代码
JS代码分为html引入外部2个JQuery文件(JS文件),html内部一个JS类声明。
注意是这部分JS代码:
- <SCRIPT type=text/javascript>
- $(document).ready(function() {
- $("#c").selectbox();
- $("#b").selectbox();
- $("#d").selectbox();
- $("#e").selectbox();
- $("#f").selectbox();
- $("#g").selectbox();
- });
- </SCRIPT>
放于SELECT代码之后,这里“#c”“#b”。。。需要与SELECT的id对应并且唯一性。
2、HTML代码
这里HTML代码不再列出,大家可下载此特效压缩包自己分析查看。
这里注意是SELECT设置的ID必须与JS里声明“$("#ID").selectbox();”保持一致。
3、CSS代码
CSS代码主要是设置SELECT背景图片,宽度,高度属性。
三、应用说明 - TOP
SELECT美化特效,包含了JQ、CSS、HTML代码3部分,特别说明是HTML中SELECT的id设置一定要是唯一并且与HTML中一段JS对应上。至于任何样式的美化就更加你需要调整CSS来实现,最终注意css宽度、高度、css背景、文字大小、css字体等细节样式根据自己需求设置即可。
四、SELECT表单美化在线演示 - TOP
在线演示:http://www.thinkcss.com/yanshi/2012112801/
五、表单SELECT美化打包下载 - TOP
下载地址:百度网盘下载(ThinkCSS整理到百度网盘,大家直接进入点击即可高速放心下载)
下一页: 下一篇:没有了
HTML必备基础教程
- • html换行br标签
- • html段落p标签
- • html table tr td th表格标签
- • html内容body标签
- • html图片img标签
- • html form表单标签
- • html input表单标签
- • html列表菜单跳转select标签
- • html div
- • html span
- • html em强调标签
- • html u下划线
- • html斜体i标签
- • html加粗b标签
- • html strong加粗标签
- • html删除线s标签
- • base链接打开方式标签
- • html iframe内嵌
- • html ul li无序列表
- • html ol li有序列表
- • html font文本标签
- • html hr水平线
CSS必备基础教程
- • css颜色 css color)
- • css宽度 css width
- • css高度 css height
- • css行高 css line-height
- • css 字间距 css letter-spacing)
- • CSS border(CSS边框
- • CSS font-family CSS字体
- • CSS 浮动 CSS float
- • CSS 斜体 CSS font-style
- • CSS加粗 CSS font-weight
- • CSS 下划线 CSS text-decoration
- • CSS字母大小写 CSS text-transform
- • CSS背景 CSS background
如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-11-28 点击:
次
原创来源:ThinkCSS 来源网址:http://www.thinkcss.com/view/m101.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!。