<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" href="css/fm.css" type="text/css" charset="utf-8" title="main" />
<title>模拟下拉框</title>
<style>
#main{ width:800px; margin:0px auto; padding:0px; }
h3{ font-size:20px; color:#069; padding-top:8px; margin-bottom:8px; }
.div{ border:1px dashed #ccc;padding:20px; margin:10px 0px}
h4{margin:8px 0; font-size:16px; COLOR:#690; }
h5{margin:20px 0; font-size:12px; COLOR:#07c; }
h6{margin:20px; font-size:12px; color:#666666; height:28px; line-height:28px;}
ol li,ul li{ margin-bottom:0.5em;}
p{ margin:0px;padding:0px 20px;}
.mainDiv td{ height:30px;line-height:30px; font-size:12px; color:#666666}
.mainDiv td.tit{ width:100px; color:#336666; font-size:12px; text-align:right; padding:0px 10px;}
.mainDiv{ border:#666666 1px solid; position:relative; padding:10px;}
.mainDiv .button{ position:absolute; top:0px; right:10px}
</style>
<script src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/jquery.fm.js"></script>
<script language="javascript">
$().ready(function(){
$("#name").fmTitle({
style:"yellow",
color:"#757168",
size:"12px"
});
$("#email").fmTitle({
style:"red",
color:"#757168",
size:"12px"
});
$(".title").fmTitle({
style:"red",
color:"#757168",
size:"12px"
});
$("#t1").fmTuopiao({
value:"未/1分/2分/3分/4分/5分/6分",
img:"images/tuopiao_no.gif",
imgHover:"images/tuopiao_yes.gif"
});
$("#t2").fmTuopiao({
value:"未评/很差/差/一般/好/很好",
img:"images/tuopiao_no.gif",
imgHover:"images/tuopiao_yes.gif"
});
$("#biaoche").fmbiaoche({
axis:"x"
});
$("#b2").fmbiaoche({
axis:"y"
});
$(".h6show").toggle(function(){
$(this).removeClass("h6show");
$(this).addClass("h6hide");
$(this).next().show();
},function(){
$(this).removeClass("h6hide");
$(this).addClass("h6show");
$(this).next().hide();
});
$("#information,#education").fmEdit();
})
</script>
</head>
<body >
<div id="main">
<h3>几款实用的JQuery插件</h3>
<hr size="2" />
<div class="div">
<h4>一、漂亮的title插件</h4>
<ol>
<li>兼容ie6/7/8、firefox2/3、Opera、safari；</li>
<li>字体颜色和大小可以任意修改；</li>
</ol>
<h5>JQ代码</h5>
<p>$("#name").fmTitle({<br />
style:"yellow", <br />
color:"#757168",<br />
size:"12px"<br />
});
</p>
<h5>HTML代码</h5>
<P><img src="images/dengpao.gif" align="absmiddle" id="name" content="填写你的姓名，最少要填2个汉字，最多只能填写8个汉字" /></P>
<h5>解释</h5>
<ul>
<li><span style="color:rgb(255, 0, 0); ">style</span>：默认风格是yellow 可选择 yelow,red。</li>
<li><span style="color:rgb(255, 0, 0); ">color</span>：提示框里面字体颜色。</li>
<li><span style="color:rgb(255, 0, 0); ">size</span>：提示框里面字体大小。</li>
</ul>
<h5>实例</h5>
<p>
姓名：<input name="Input2" type="text" style="width:100px" class="input_text_link" onmouseover="this.className='input_text_hover'" onmouseout="this.className='input_text_link'" /> <img src="images/dengpao.gif" align="absmiddle" id="name" content="填写你的姓名，最少要填2个汉字，最多只能填写8个汉字" /><br /><br />
邮箱：<input name="Input2" type="text" style="width:100px" class="input_text_link" onmouseover="this.className='input_text_hover'" onmouseout="this.className='input_text_link'" /> <img src="images/dengpao.gif" class="title" id="email" content="电子邮箱的正确格式是：用户名@域名，例如huadoo@huadoo.com或huadoocn@huadoocn.com.cn等形式" /><br /><br />
</p>
</div>
<div class="div">
<h4>二、网络投票插件</h4>
<ol>
<li>兼容ie6/7/8、firefox2/3、Opera、safari；</li>
<li>选项和选择值可以随便修改</li>
</ol>
<h5>JQ代码</h5>
<p>$("#t1").fmTuopiao({<br />
value:"未评/1分/2分/3分/4分/5分/6分", <br />
img:"images/tuopiao_no.gif",<br />
imgHover:"images/tuopiao_yes.gif"<br />
});
</p>
<h5>HTML代码</h5>
<P><span id="t1" ></span></P>
<h5>解释</h5>
<ul>
<li><span style="color:rgb(255, 0, 0); ">value</span>：选择项，用“/”分开，第一个为默认值，后面为选择值。</li>
<li><span style="color:rgb(255, 0, 0); ">img</span>：默认的图片。</li>
<li><span style="color:rgb(255, 0, 0); ">imgHover</span>：鼠标经过时的图。</li>
</ul>
<h5>实例</h5>
<p>
打分：<span id="t1" ></span><br /><br />
好坏：<span id="t2" ></span><br /><br />
</p>
</div>
<div class="div">
<h4>三、标尺选择器</h4>
<ol>
<li>兼容ie6/7/8、firefox2/3、Opera、safari；</li>
<li>支持0-100内数值的选择</li>
<li>两种表现方式</li>
</ol>
<h5>代码</h5>
<p>$("#biaoche").fmbiaoche({<br />
axis:"x"<br />
});
</p>
<h5>HTML代码</h5>
<P><input name="Input2" type="text" readonly="yes" /><img src="images/pic_biaoche.gif" align="absmiddle" id="biaoche" /></P>
<h5>解释</h5>
<ul>
<li><span style="color:rgb(255, 0, 0); ">axis</span>：标尺的显示方式，x和y两种方式。</li>
</ul>
<h5>实例</h5>
<p>
X轴：<input name="Input2" type="text" readonly="yes" style="width:86px" class="input_text_link" onmouseover="this.className='input_text_hover'" onmouseout="this.className='input_text_link'" /><img src="images/pic_biaoche.gif" align="absmiddle" id="biaoche" /><br /><br />
Y轴：<input name="Input2" type="text" readonly="yes" style="width:86px" class="input_text_link" onmouseover="this.className='input_text_hover'" onmouseout="this.className='input_text_link'" /><img src="images/pic_biaoche.gif" align="absmiddle" id="b2" />
</p>
</div>
<div class="div">
<h4>四、表单编辑器</h4>
<ol>
<li>兼容ie6/7/8、firefox2/3、Opera、safari；</li>
<li>支持text、textarea、select、checkbox、radio控件</li>
</ol>
<h5>代码</h5>
<p>$("#information,#education").fmEdit({;<br />
targetClass:"n", <br />
inputClass:"input_text_link",<br />
inputClassHover:"input_text_hover",<br />
textareaClass:"input_textarea_link",<br />
textareaClassHover:"input_textarea_hover"<br />
});
</p>
<h5>HTML代码</h5>
<P><td class="n" name="text">张三< /td></P>
<P><td class="n" name="textarea">北京市海淀区苏州街< /td>
<P><td class="n" name="checkbox" select="唱歌/跳舞/篮球/足球/画画/其他">唱歌 跳舞< /td></P>
<P><td class="n" name="radio" select="中国/美国/日本/韩国/欧洲/其他">中国< /td>
<P><td class="n" name="select" select="男/女">女< /td>
<h5>解释</h5>
<ul>
<li><span style="color:rgb(255, 0, 0); ">targetClass</span>：改变class为targetClass的控件。</li>
<li><span style="color:rgb(255, 0, 0); ">inputClass</span>：文本框的样式。</li>
<li><span style="color:rgb(255, 0, 0); ">inputClassHover</span>：文本框经过的样。</li>
<li><span style="color:rgb(255, 0, 0); ">textareaClass</span>：文本域的样式。</li>
<li><span style="color:rgb(255,
几款超实用的jquery插件及用法演示
需积分: 16 133 浏览量
2010-08-18
15:52:47
上传
评论
收藏 94KB RAR 举报
几款超实用的jquery插件及用法演示.rar （42个子文件） 
codefans.net jquerydemo css 
fm.css 3KB images 
table_th_left.gif 43B red01.gif 99B yellow06.gif 161B sort_down.gif 49B red06.gif 158B sort_up.gif 48B red07.gif 64B yellow07.gif 64B input_bg.gif 68B yellow08.gif 169B tuopiao_yes.gif 546B yellow05.gif 64B yellow03.gif 106B red05.gif 64B red_left.gif 178B biaoche_bg_thwart.gif 548B pic_biaoche.gif 226B tuopiao_no.gif 341B red02.gif 63B red03.gif 156B table_th_bg.gif 102B biaoche_left_thwart.gif 96B yellow_left.gif 82B Thumbs.db 60KB dengpao.gif 540B red08.gif 169B yellow04.gif 63B yellow02.gif 63B yellow01.gif 102B biaoche_left.gif 95B select_bg.gif 96B textarea_bg.gif 829B red04.gif 63B table_th_bg01.gif 102B biaoche_close_thwart.gif 107B biaoche_close.gif 121B biaoche_bg.gif 580B js jquery-1.4.min.js 68KB jquery.fm.js 11KB jquery-ui-1.7.2.custom.min.js 188KB
index.html 11KB资源评论
