代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/layout.css" />
<link rel="stylesheet" type="text/css" href="style/xui.css" />
<script src="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jqdriver.js"></script>
<title>Jq Driver</title>
</head>
<body>
<div class="top top_height app_width hide_ful show_1200">
<div class="top_btn ll"><button><span></span><span></span><span></span></button></div>
<div class="top_cen">关于 Jq Driver</div>
<div class="top_btn lr"><button><span></span><span></span></button></div>
</div>
<div class="top_zw top_height hide_ful show_1200"></div>
<div class="pleft_zw"></div>
<div class="page">
<div class="page_pr">
<div class="pleft">
<ul>
<li class="on li_explain"><a href="#explain">关于 Jq Driver</a></li>
<li class="li_hover"><a href="#hover">鼠标经过添加css [jdHover*]</a></li>
<li class="li_navselect"><a href="#navselect">下拉导航 [jdNavSelect]</a></li>
<li class="li_poiup"><a href="#poiup">滚动吸附 [jdPoiup]</a></li>
<li class="li_subCheck"><a href="#subCheck">表单验证 </a></li>
<li class="li_open"><a href="#open">打开链接</a></li>
<li class="li_slideto"><a href="#slideto">滚动条定位</a></li>
<li class="li_select"><a href="#select">获取下拉选中值</a></li>
<li class="li_cssact"><a href="#cssact">元素css类名操作</a></li>
<li class="li_onlyum"><a href="#onlyum">只能输入数字</a></li>
<li class="li_render"><a href="#render">模板数据动态加载</a></li>
<li class="li_contextmenu"><a href="#contextmenu">右键菜单</a></li>
<li class="li_tabs"><a href="#tabs">选项卡</a></li>
</ul>
</div><!--pleft-->
<div class="pright">
<div id="explain" class="maindiv">
<div class="page_tit">关于 Jq Driver</div>
<div class="page_con">
<div class="page_tit2">概述</div>
<p>Jq Driver 是一款小型网站常用方法的合集、与动态加载加载数据（伪渲染）插件，可实现小型网站快速搭建，尽量减少额外写js代码。整个插件由标签与方法2大部分构成。</p>
<p>注意：此插件不推荐在大型项目上使用。</p>
<br />
<div class="page_tit2">使用方法</div>
<p>1. 在 jquery.js 后面加载 jqdriver.js</p>
<p>2. 在 网页最底部 </body> 前添加代码初始化</p>
<ul>
<li><span><script type="text/javascript"></span></li>
<li><span>const jd = $('body').jqdriver({</span></li>
<li><span> active: 'on',</span></li>
<li><span>});</span></li>
<li><span></script></span></li>
</ul>
<p>active 为活动 css 类名</p>
<br />
<div class="page_tit2">Hello Jq Driver</div>
<p><a href="hello.html" target="_blank"><u style="color:#08c;">一个最简单的demo实例</u></a></p>
<br /><br />
<div class="page_tit2">初始化参数说明</div>
<div class="page_tit3">Jq Driver 在初始化时，会给予一些常用的参数</div>
<table class="xtable xfirst">
<tr>
<td>对象参数</td>
<td>说明</td>
</tr>
<tr>
<td>jd.xwidth</td>
<td>网页可见宽度</td>
</tr>
<tr>
<td>jd.xheight</td>
<td>网页可见高度</td>
</tr>
<tr>
<td>jd.ios</td>
<td>是否为苹果客户端</td>
</tr>
<tr>
<td>jd.android</td>
<td>是否为安卓客户端</td>
</tr>
<tr>
<td>jd.app</td>
<td>是否为手机端（苹果或安卓的其中一种）</td>
</tr>
<tr>
<td>jd.wechat</td>
<td>是否为微信端（包含微信小程序）</td>
</tr>
<tr>
<td>jd.wechatPro</td>
<td>是否为微信小程序端（微信小程序端特有）</td>
</tr>
<tr>
<td>jd.wechatNoPro</td>
<td>是否为微信端，且不是微信小程序端</td>
</tr>
</table>
</div>
</div>
<div id="hover" class="maindiv">
<div class="page_tit">鼠标经过添加css</div>
<div class="page_tit2">[jdHover] [jdHoverOn] [jdHoverSon] [jdHoverSonOn]</div>
<div class="table_row">
<div class="example">
<style>
.hover0 {background-color:#ddd;}
.hover1_on {background-color:#08c; color:#fff;}
</style>
<div class="hover0 hover1" jdHover="this||hover1_on" style="width:200px; height:30px;">给自身加自定义 css 类名</div><br />
<div class="hover0 hover2" jdHover=".hover1||hover1_on" style="width:200px; height:30px;">给其他元素加自定义 css 类名</div><br />
<div class="hover0 hover2" jdHoverOn="this||hover1_on" style="width:200px; height:30px;">无移出事件</div><br />
<div jdL="3" jdLtb="20" jdLtype="dashed"></div>
<div>给自身加css，兄弟元素去除css</div>
<div>
<ul>
<li class="hover1_on" jdHoverOn="siblings||hover1_on">1</li>
<li jdHoverOn="siblings||hover1_on">2</li>
<li jdHoverOn="siblings||hover1_on">3</li>
</ul>
</div>
<div jdL="3" jdLtb="20" jdLtype="dashed"></div>
<div>给子元素加css，子元素的兄弟元素去除css</div>
<div jdHoverSon="li||hover1_on">
<ul>
<li class="hover1_on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div jdL="3" jdLtb="20" jdLtype="dashed"></div>
<div>给子元素加css，移出不去除css</div>
<div jdHoverSonOn="li||hover1_on">
<ul>
<li class="hover1_on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="hover0 hover1" jdHover="this||hover1_on">给自身加自定义 css 类名</div></span></li>
<li><span><div class="hover0 hover2" jdHover=".hover1||hover1_on">给其他元素加自定义 css 类名</div></span></li>
<li><span><div class="hover0 hover2" jdHoverOn="this||hover1_on">无移出事件</div></span></li>
<li></li>
<li><span><div>给自身加css，兄弟元素去除css</div></span></li>
<li><span><div></span></li>
<li class="level2"><span><ul></span></li>
<li class="level3"><span> <li class="hover1_on" jdHoverOn="siblings||hover1_on">1</li></span></li>
<li class="level3"><span> <li jdHoverOn="siblings||hover1_on">2</li></span></li>
<li class="level3"><span> <li jdHoverOn="siblings||hover1_on">3</li></span></li>
<li class="level2"><span></ul></span></li>
<li><span></div></span></li>
<li></li>
<li><span><div>给子元素加css，子元素的兄弟元素去除css</div></span></li>
<li><span><div jdHoverSon="li||hover1_on"></span></li>
<li class="level2"><span><ul></span></li>
<li class="level3"><span> <li class="hover1_on">1</li></span></li>
<li class="level3"><span> <li>2</li></span></li>
<li class="level3"><span> <li>3</li></span></li>
<li class="level2"><span></ul></span></li>
<li><span></div></span></li>
<li></li>
<li><span><div>给子元素加css，移出不去除css</div></span></li>
<li><span><div jdHoverSonOn="li||hover1_on"></span></li>
<li class="level2"><span><ul></span></li>
<li class="level3"><span> <li class="hover1_on">1</li></span></li>
<li class="level3"><span> <li>2</li></span></li>
<li class="level3"><span> <li>3</li></span></li>
<li class="level2"><span></ul></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td width="120">方法</td>
<td width="200">说明</td>
<td>参数</td>
</tr>
<tr>
<td>jdHover</td>
<td>鼠标进入后给<span>自身或其他元素</span>添加 css，鼠标移出后删除 css</td>
<td rowspan="2">
<p>作用元素||添加的css类名（可选）</p><br />
<table>
<tr>
<td>作用元素</td>
<td>效果</td>
</tr>
<tr>
<td>this</td>
<td>对自身生效</td>
</tr>
<tr>
<td>siblings</td>
<td>对自身生效，且对兄弟元素生效</td>
</tr>
<tr>
<td>[元素选择器]</td>
<td>对元素选择器</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>jdHoverOn</td>
<td>鼠标进入后给<span>自身或其他元素</span>添加 css，没有移出事件</td>
</tr>
<tr>
<td>jdHoverSon</td>
<td>鼠标进入子元素后添加 css，且子元素的兄弟元素删除 css</td>
<td rowspan="2">子元素选择器||添加的css类名（可选）</td>
</tr>
<tr>
<td>jdHoverSonOn</td>
<td>鼠标进入子元素后添加 css，没有移出事件</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div><!--maindiv-->
<div id="navselect" class="maindiv">
<div class="page_tit">下拉导航 [jdNavSelect]</div>
<div class="page_tit3">只需加一个标签即可实现</div>
<div class="table_row">
<div class="example">
<a href="navselect.html" target="_blank"><u style="color:#08c; font-size:14px;">查看demo</u></a>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="nav"></span></li>
<li class="level2"><span><ul class="aclear"></span></li>
<li class="level3"><span> <li><a href="javascript:void(0)">首页</a></li></span></li>
<li></li>
<li class="level3"><span><li <span>jdNavSelect="navselect"</span> <span>jdNavSelectFade="100"</span>><a href="javascript:void(0)">人物</a></span></li>
<li class="level4"><span><div class="<span>navselect</span>"></span></li>
<li class="level5"><span><dl></span></li>
<li class="level6"><span><dd><a href="javascript:void(0)">砂糖</a></dd></span></li>
<li class="level6"><span><dd><a href="javascript:void(0)">甘雨</a></dd></span></li>
<li class="level6"><span><dd><a href="javascript:void(0)">刻晴</a></dd></span></li>
<li class="level6"><span><dd><a href="javascript:void(0)">香菱</a></dd></span></li>
<li class="level5"><span></dl></span></li>
<li class="level4"><span></div></span></li>
<li class="level3"><span></li></span></li>
<li class="level2"><span></ul></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div>
</div><!--maindiv-->
<div id="poiup" class="maindiv">
<div class="page_tit">滚动吸附 [jdPoiup]</div>
<div class="page_tit2">当元素滚动到网页顶部时，把他吸附在网页上（不影响其他布局）</div>
<div class="page_tit3">使用场景：网页下拉时，导航超出屏幕范围时固定网页顶部，实现让导航在顶部一直显示。需与 css 一起配合使用。生效时会添加全局参数 active 的 css 类名</div>
<div class="table_row">
<div class="example">
<a href="poiup.html" target="_blank"><u style="color:#08c; font-size:14px;">查看demo</u></a>
</div><!--example-->
<div class="pre">
<ol>
<li><span><style></span></li>
<li><span>.poi1 {width:100%; background-color:#08c; height:50px; line-height:50px; color:#fff; text-align:center; font-size:16px;}</span></li>
<li><span>.poi1.on {position:fixed; top:0; left:0; z-index:10;}</span></li>
<li><span></style></span></li>
<li><span><div class="poi1" <span>jdPoiup="0"</span>>向下滚动</div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td width="120">属性</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>jdPoiup</td>
<td>顶部生效距离 或 元素选择器</td>
<td>[默认:0]当为元素选择器时，生效距离会自动读取元素的高度</td>
</tr>
<tr>
<td>jdPoiBlank</td>
<td>是否显示占位</td>
<td>[默认:1] [说明:1显示占位, 0不显示占位]</td>
</tr>
<tr>
<td>jdPoiHeight</td>
<td>自定义占位高度</td>
<td>[默认:无(元素本身高度)]</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div><!--maindiv-->
<div id="subCheck" class="maindiv">
<div class="page_tit">表单验证 jd.subCheck(this)</div>
<div class="page_tit2">原生弹窗</div>
<div class="table_row">
<div class="example">
<form method="post" action="hello.html" onsubmit="return jd.subCheck(this)">
<input class="xinput xful" type="text" placeholder="姓名" jdForm="required" jdMsg="姓名不能为空" />
<div jdH="10"></div>
<input class="xinput xful" type="text" placeholder="邮箱" jdForm="required||email" jdMsg="邮箱不能为空||邮箱格式错误" />
<div jdH="10"></div>
<input class="xinput xful" type="text" placeholder="密码" jdForm="pass1" jdMsg="密码强度不够" />
<div jdH="10"></div>
<input class="xinput xful" type="text" placeholder="数字（整数或小数）" jdForm="number" jdMsg="必须输入数字" />
<div jdH="10"></div>
<input class="xinput xful" type="text" placeholder="整数" jdForm="int" jdMsg="必须输入整数" />
<div jdH="10"></div>
<input class="xinput xful" type="text" placeholder="手机号码" jdForm="mobile" jdMsg="手机号码格式错误" />
<div jdH="10"></div>
<label><input type="checkbox" jdForm="required" jdMsg="请先阅读并同意隐私条例" />我已阅读并同意该隐私条例</label>
<div jdH="10"></div>
<button class="xbutton xful" type="submit">提交</button>
</form>
</div><!--example-->
<div class="pre">
<ol>
<li><span><form method="post" action="hello.html" <span>onsubmit="return jd.subCheck(this)"</span>></span></li>
<li class="level2"><span><input type="text" placeholder="姓名" <span>jdForm="required"</span> jdMsg="姓名不能为空" /></span></li>
<li class="level2"></li>
<li class="level2"><span><input type="text" placeholder="邮箱" <span>jdForm="required||email"</span> jdMsg="邮箱不能为空||邮箱格式错误" /></span></li>
<li class="level2"></li>
<li class="level2"><span><input type="text" placeholder="密码" <span>jdForm="pass3"</span> jdMsg="密码强度不够" /></span></li>
<li class="level2"></li>
<li class="level2"><span><input type="text" placeholder="数字（整数或小数）" <span>jdForm="number"</span> jdMsg="必须输入数字" /></span></li>
<li class="level2"></li>
<li class="level2"><span><input type="text" placeholder="整数" <span>jdForm="int"</span> jdMsg="必须输入整数" /></span></li>
<li class="level2"></li>
<li class="level2"><span><input type="text" placeholder="手机号码" <span>jdForm="mobile"</span> jdMsg="手机号码格式错误" /></span></li>
<li class="level2"></li>
<li class="level2"><span><input type="checkbox" <span>jdForm="required"</span> jdMsg="请先阅读并同意隐私条例" /></span></li>
<li class="level2"></li>
<li class="level2"><span><button type="submit">提交</button></span></li>
<li><span></form></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="page_note">
<p><strong>使用方法</strong></p>
<p>1. <form> 标签 添加 <span>onsubmit="return jd.subCheck(this)"</span></p>
<p>2. 在需要验证的表单字段添加 <span>jdForm</span> 属性</p>
<p>3. [可选] <span>jdMsg</span> 填写验证错误文本，多个验证用 <span>||</span> 分隔</p>
<p>4. 密码为必填项，无需再添加 <span>required</span> 属性</p>
</div>
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">jd.subCheck(this)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>jdForm</td>
<td>验证方法</td>
<td>
<p>[必填]</p><br />
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td><span>required</span></td><td>必填</td></tr>
<tr><td><span>email</span></td><td>邮箱</td></tr>
<tr><td><span>pass1</span></td><td>密码（强度1） 至少6位数</td></tr>
<tr><td><span>pass2</span></td><td>密码（强度2） 至少6位数+数字+字母</td></tr>
<tr><td><span>pass3</span></td><td>密码（强度3） 至少6位数+数字+字母+至少一位大写字母</td></tr>
<tr><td><span>pass4</span></td><td>密码（强度4） 至少6位数+数字+字母+至少一位大写字母+至少一个特殊符号（<span>!@#$%^&*?()+-</span>）</td></tr>
<tr><td><span>number</span></td><td>数字（整数或小数）</td></tr>
<tr><td><span>int</span></td><td>整数</td></tr>
<tr><td><span>mobile</span></td><td>手机号码，以13、14、15、18开头的11位数字</td></tr>
</table>
</td>
</tr>
<tr>
<td>jdMsg</td>
<td>验证文本</td>
<td>[可选] [说明：多个验证用<span>||</span>分隔，按照 <span>jdForm</span> 的顺序填写]</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
<br /><br />
<div class="page_tit2">使用第三方弹窗插件时，<strong>需要自己封装一个回调函数并传递相应参数，</strong>具体使用方法看例子。</div>
<div class="page_tit2">第三个参数为验证成功后的回调函数，在表单提交前执行。</div>
<link rel="stylesheet" type="text/css" href="https://ovsexia.gitee.io/xtiper/css/xtiper.css" />
<script type="text/javascript" src="https://ovsexia.gitee.io/xtiper/js/xtiper.min.js"></script>
<div class="table_row">
<div class="example">
<div class="page_tit3">使用 Xtiper 弹窗插件</div>
<form method="post" action="hello.html" onsubmit="return jd.subCheck(this, function(tip){xtip.msg(tip, {icon: 'e'})}, function(){xtip.load()})">
<input class="xinput xful" type="text" name="username" placeholder="姓名" jdForm="required" jdMsg="姓名不能为空" />
<div jdH="10"></div>
<input class="xinput xful" type="text" name="email" placeholder="邮箱" jdForm="required||email" jdMsg="邮箱不能为空||邮箱格式错误" />
<div jdH="10"></div>
<button class="xbutton xful" type="submit">提交</button>
</form>
<div jdL="3" jdLtb="30" jdLtype="dashed"></div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/layer/3.3.0/layer.min.js"></script>
<div class="page_tit3">使用 Layer 弹窗插件</div>
<form method="post" action="hello.html" onsubmit="return jd.subCheck(this, function(tip){layer.msg(tip, {icon: 2})}, function(){xtip.load()})">
<input class="xinput xful" type="text" name="username" placeholder="姓名" jdForm="required" jdMsg="姓名不能为空" />
<div jdH="10"></div>
<input class="xinput xful" type="text" name="email" placeholder="邮箱" jdForm="required||email" jdMsg="邮箱不能为空||邮箱格式错误" />
<div jdH="10"></div>
<button class="xbutton xful" type="submit">提交</button>
</form>
</div><!--example-->
<div class="pre">
<ol>
<li><span><form method="post" action="hello.html" onsubmit="return jd.subCheck(this<span>, function(tip){xtip.msg(tip, {icon: 'e'})}, function(){xtip.load()})"></span></li>
<li class="level2">...</li>
<li><span></form></span></li>
<li></li>
<li><span><form method="post" action="hello.html" onsubmit="return jd.subCheck(this<span>, function(tip){layer.msg(tip, {icon: 2})}, function(){xtip.load()})"></span></li>
<li class="level2">...</li>
<li><span></form></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div>
</div><!--maindiv-->
<div id="open" class="maindiv">
<div class="page_tit">打开链接 jd.open()</div>
<div class="page_tit3"></div>
<div class="table_row">
<div class="example">
<button class="xbutton" type="button" onclick="jd.open('hello.html')">打开链接</button>
<button class="xbutton" type="button" onclick="jd.open('hello.html', 'blank')">在新窗口打开链接</button>
</div><!--example-->
<div class="pre">
<ol>
<li><span><button type="button" onclick="jd.open('hello.html')">打开链接</button></span></li>
<li></li>
<li><span><button type="button" onclick="jd.open('hello.html', 'blank')">在新窗口打开链接</button></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">jd.open(<em>参数1</em>, <em>参数2</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>参数1</td>
<td>链接</td>
<td>[必填]</td>
</tr>
<tr>
<td>参数2</td>
<td>是否在新窗口打开</td>
<td>[可选] [默认:空] [blank:在新窗口打开]</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div><!--maindiv-->
<div id="slideto" class="maindiv">
<div class="page_tit">滚动条定位 jd.slideto()</div>
<div class="page_tit3"></div>
<div class="table_row">
<div class="example">
<button class="xbutton" type="button" onclick="jd.slideto('body')">滚动到顶部</button>
<button class="xbutton" type="button" onclick="jd.slideto('#open')">滚动元素</button>
<button class="xbutton" type="button" onclick="jd.slideto('#open', -50)">滚动元素，并设置位置偏移</button>
<button class="xbutton" type="button" onclick="jd.slideto('#open', 0, 3000)">设置动画时长</button>
<button class="xbutton" type="button" onclick="jd.slideto('#open', 0, 0)">无动画</button>
<button class="xbutton" type="button" onclick="jd.slideto('bodyBottom')">滚动到底部</button>
</div><!--example-->
<div class="pre">
<ol>
<li><span><button type="button" onclick="jd.slideto('body')">滚动到顶部</button>
</span></li>
<li><span><button type="button" onclick="jd.slideto('#wh')">滚动元素</button>
</span></li>
<li><span><button type="button" onclick="jd.slideto('#wh', -50)">滚动元素，并设置位置偏移</button>
</span></li>
<li><span><button type="button" onclick="jd.slideto('#wh', 0, 3000)">设置动画时长</button>
</span></li>
<li><span><button type="button" onclick="jd.slideto('#wh', 0, 0)">无动画</button>
</span></li>
<li><span><button type="button" onclick="jd.slideto('bodyBottom', -10, 0)">滚动到底部</button></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">jd.slideto(<em>参数1</em>, <em>参数2</em>, <em>参数3</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>参数1</td>
<td>元素选择器</td>
<td>[必填] [特殊:滚动到底部为 'bodyBottom']</td>
</tr>
<tr>
<td>参数2</td>
<td>位置偏移</td>
<td>
<p>[可选] [默认:0]</p>
<p>正数，距离顶部距离更小</p>
<p>负数，距离顶部距离更大</p>
</td>
</tr>
<tr>
<td>参数3</td>
<td>动画时长</td>
<td>[可选] [默认:500]</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div><!--maindiv-->
<div id="select" class="maindiv">
<div class="page_tit">获取下拉选中值 jd.select()</div>
<div class="page_tit3">弹窗层是使用率最多的弹层类型，具体说明请点击下面按钮</div>
<div class="table_row">
<div class="example">
<select class="xselect" id="select1">
<option value="1">砂糖</option>
<option value="2">甘雨</option>
<option value="3">刻晴</option>
<option value="4">香菱</option>
</select>
<br /><br />
<button class="xbutton" type="button" onclick="alert(jd.select('select1', 'index'))">获取索引</button>
<button class="xbutton" type="button" onclick="alert(jd.select('select1', 'value'))">获取value</button>
<button class="xbutton" type="button" onclick="alert(jd.select('select1', 'html'))">获取内容</button>
</div><!--example-->
<div class="pre">
<ol>
<li><span><select class="xselect" id="select1"></span></li>
<li class="level2"><span><option value="1">砂糖</option></span></li>
<li class="level2"><span><option value="2">甘雨</option></span></li>
<li class="level2"><span><option value="3">刻晴</option></span></li>
<li class="level2"><span><option value="4">香菱</option></span></li>
<li><span></select></span></li>
<li></li>
<li><span><button type="button" onclick="alert(jd.select('select1', 'index'))">获取索引</button></span></li>
<li><span><button type="button" onclick="alert(jd.select('select1', 'value'))">获取value</button></span></li>
<li><span><button type="button" onclick="alert(jd.select('select1', 'html'))">获取内容</button></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">jd.select(<em>参数1</em>, <em>参数2</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>参数1</td>
<td>id 选择器</td>
<td>
<p>[必填]</p>
</td>
</tr>
<tr>
<td>参数2</td>
<td>获取类型</td>
<td>
<p>[类型:string] [可选]</p><br />
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td><span>index</span></td><td>索引 [默认]</td></tr>
<tr><td><span>value</span></td><td>value值</td></tr>
<tr><td><span>html</span></td><td>内容</td></tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div><!--maindiv-->
<div id="cssact" class="maindiv">
<div class="page_tit">元素css类名操作</div>
<div class="page_tit2">一共有3个相关方法 <span>jd.cssOn()</span> <span>jd.cssOff()</span> <span>jd.cssSwitch()</span> 默认添加活动 css 类名，支持多个元素</div>
<div class="table_row">
<div class="example">
<style>
.cssact {background-color:#ddd; width:50px; height:50px;}
.cssact.on {background-color:#222;}
.cssact span {display:block; width:20px; height:20px; background-color:#fff; color:blue;}
</style>
<div class="cssact cssact1"></div><br />
<div class="cssact cssact2"></div><br />
<button class="xbutton" type="button" onclick="jd.cssOn('.cssact, .cssact2')">添加 css 类名</button>
<button class="xbutton" type="button" onclick="jd.cssOff('.cssact1, .cssact2')">删除 css 类名</button>
<button class="xbutton" type="button" onclick="jd.cssSwitch('.cssact1, .cssact2')">添加或删除 css 类名</button>
<button class="xbutton" type="button" onclick="jd.cssOn('.cssact1, .cssact2', {blank: this})">点击网页空白处还原</button>
</div><!--example-->
<div class="pre">
<ol>
<li><span><button type="button" onclick="jd.cssOn('.cssact1, .cssact2')">添加 css 类名</button></span></li>
<li><span><button type="button" onclick="jd.cssOff('.cssact1, .cssact2')">删除 css 类名</button></span></li>
<li><span><button type="button" onclick="jd.cssSwitch('.cssact1, .cssact2')">添加或删除 css 类名</button></span></li>
<li><span><button type="button" onclick="jd.cssOn('.cssact1, .cssact2', {blank: this})">点击网页空白处还原</button></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">jd.css[On|Off|Switch](<em>参数1</em>, <em>参数2</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>参数1</td>
<td>元素选择器</td>
<td>
<p>[必填]</p>
</td>
</tr>
<tr>
<td>参数2</td>
<td>参数对象</td>
<td><p>[类型:object] [可选]</p><br />
<table>
<tr>
<td>键值</td>
<td>说明</td>
</tr>
<tr>
<td>cssname</td>
<td>添加/删除的 css 类名</td>
</tr>
<tr>
<td>blank</td>
<td>点击空白处还原，这里只能填 <span>this</span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div><!--maindiv-->
<div id="onlyum" class="maindiv">
<div class="page_tit">只能输入数字 jd.onlyNum()</div>
<div class="page_tit3"></div>
<div class="table_row">
<div class="example">
<input class="xinput" type="text" onkeyup="jd.onlyNum(this)" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input type="text" onkeyup="jd.onlyNum(this)" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div>
</div><!--maindiv-->
<div id="render" class="maindiv">
<div class="page_tit">模板数据动态加载 jd.render()</div>
<div class="page_tit3">一般配合 ajax 使用</div>
<div class="table_row">
<div class="example">
<div class="xtablein xfirst xthead">
<table id="ullist" class="">
<thead>
<tr>
<th>序号</th>
<th>图片</th>
<th>链接</th>
<th>内容</th>
<th>输入框</th>
<th>表单</th>
</tr>
</thead>
<tbody>
<tr class="lilist">
<td align="center" jdBind="::id">1</td>
<td align="center"><img height="50" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" jdBind="src::picimg" /></td>
<td align="center"><a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" target="_blank" jdBind="href::picimg">链接</a></td>
<td align="center" jdBind="html::subject">百度</td>
<td align="center"><input type="text" jdBind="value::subject" value="百度" /></td>
<td align="center"><input type="radio" checked="checked" jdBind="checked::check" /> <input type="checkbox" checked="checked" jdBind="checked::check" /></td>
</tr>
</tbody>
</table>
</div>
<br />
<button class="xbutton" onclick="newdate()">模拟获取新数据</button><br /><br />
<a href="render.html" target="_blank"><u style="color:#08c; font-size:14px;">更多demo</u></a>
<script type="text/javascript">
function newdate()
{
//模拟数据
const demodata = [
{id: 2, subject: '淘宝', check:true, picimg: 'https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png'},
{id: 3, subject: '拼多多', check:false, picimg: 'https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png'},
]
jd.render(demodata, '#ullist', '.lilist', 'append');
}
</script>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="xtablein xfirst xthead"></span></li>
<li class="level2"><span><table id="ullist"></span></li>
<li class="level3"><span><thead></span></li>
<li class="level4"><span><tr></span></li>
<li class="level5"><span><th>序号</th></span></li>
<li class="level5"><span><th>图片</th></span></li>
<li class="level5"><span><th>链接</th></span></li>
<li class="level5"><span><th>内容</th></span></li>
<li class="level5"><span><th>输入框</th></span></li>
<li class="level5"><span><th>单选按钮</th></span></li>
<li class="level4"><span></tr></span></li>
<li class="level3"><span></thead></span></li>
<li class="level3"><span><tbody></span></li>
<li class="level4"><span><tr class="lilist"></span></li>
<li class="level5"><span><td align="center" jdBind="::id">1</td></span></li>
<li class="level5"><span><td align="center" jdBind="html::id">百度</td></span></li>
<li class="level5"><span><td align="center"><a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" target="_blank" jdBind="href::picimg">链接</a></td></span></li>
<li class="level5"><span><td align="center"><img height="50" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" jdBind="src::picimg" /></td></span></li>
<li class="level5"><span><td align="center"><input type="text" jdBind="value::subject" /></td></span></li>
<li class="level5"><span><td align="center"><input type="checkbox" checked="checked" jdBind="checked::check" /></td></span></li>
<li class="level4"><span></tr></span></li>
<li class="level3"><span></tbody></span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
<li><span><br /></span></li>
<li><span><button class="xbutton" onclick="newdate()">模拟获取新数据</button></span></li>
<li><span><script type="text/javascript"></span></li>
<li><span>function newdate()</span></li>
<li><span>{</span></li>
<li class="level2"><span>//模拟数据</span></li>
<li class="level2"><span>const demodata = [</span></li>
<li class="level2"><span> {id: 2, subject: '淘宝', check:true, picimg: 'https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png'},</span></li>
<li class="level2"><span> {id: 3, subject: '拼多多', check:false, picimg: 'https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png'},</span></li>
<li class="level2"><span>]</span></li>
<li></li>
<li class="level2"><span><span>jd.render(demodata, '#ullist', '.lilist', 'append');</span></span></li>
<li><span>}</span></li>
<li><span></script></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">jd.render(<em>参数1</em>, <em>参数2</em>, <em>参数3</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>参数1</td>
<td>父元素容器</td>
<td>
<p>[必填]</p>
</td>
</tr>
<tr>
<td>参数2</td>
<td>子元素容器（作为模板）</td>
<td>[类型:string] [可选] [说明：需要在首个子元素添加 id 或 class 选择器]</td>
</tr>
<tr>
<td>参数3</td>
<td>添加方式</td>
<td>
<p>[类型:string] [可选]</p><br />
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td><span>append</span></td><td>在尾部添加 [默认]</td></tr>
<tr><td><span>prepend</span></td><td>在头部添加</td></tr>
<tr><td><span>html</span></td><td>全部替换</td></tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div><!--maindiv-->
<div id="contextmenu" class="maindiv">
<div class="page_tit">右键菜单 jd.contextmenu()</div>
<div class="page_tit3">必须在 <span>$('body').jqdriver();</span> 初始化后添加 jd.contextmenu() 方法，否则需要用 <span>$(document).ready()</span> 方法</div>
<div class="table_row">
<div class="example">
<button class="xbutton contextmenu1">右键点击（默认风格）</button>
<button class="xbutton contextmenu2">自然风格</button>
<button class="xbutton contextmenu3">暗色风格</button>
<script>
$(document).ready(function(){
jd.contextmenu('.contextmenu1', [
{menu: '打开链接', call: function(){this.open('hello.html')}},
{menu: '自定义函数', call: function(){alert('自定义函数1')}},
{menu: '禁用的菜单', disabled: true},
{menu: '关闭'},
]);
jd.contextmenu('.contextmenu2', [
{menu: '打开链接', call: function(){this.open('hello.html')}},
{menu: '自定义函数', call: function(){alert('自定义函数2')}},
{menu: '禁用的菜单', disabled: true},
{menu: '关闭'},
], 'natural');
jd.contextmenu('.contextmenu3', [
{menu: '打开链接', call: function(){this.open('hello.html')}},
{menu: '自定义函数', call: function(){alert('自定义函数3')}},
{menu: '禁用的菜单', disabled: true},
{menu: '关闭'},
], 'dark');
});
</script>
</div><!--example-->
<div class="pre">
<ol>
<li><span><button class="contextmenu2">右键点击</button></span></li>
<li><span><script></span></li>
<li><span>$(document).ready(function(){</span></li>
<li class="level2"><span>jd.contextmenu('.contextmenu2', [</span></li>
<li class="level3"><span>{menu: '打开链接', call: function(){this.open('hello.html')}},</span></li>
<li class="level3"><span>{menu: '自定义函数', call: function(){alert('自定义函数')}},</span></li>
<li class="level3"><span>{menu: '禁用的菜单', disabled: true},</span></li>
<li class="level3"><span>{menu: '关闭'},</span></li>
<li class="level2"><span>], 'natural');</span></li>
<li><span>});</span></li>
<li><span></script></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">jd.render(<em>参数1</em>, <em>参数2</em>, <em>参数3</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>参数1</td>
<td>元素选择器</td>
<td>
<p>[必填]</p>
</td>
</tr>
<tr>
<td>参数2</td>
<td>菜单数据</td>
<td>
<p>[必填] [类型:array 嵌套 object]</p>
<p>[object.menu: 菜单标题] [object.call: 菜单函数] [object:disabled: 菜单禁用]</p>
</td>
</tr>
<tr>
<td>参数3</td>
<td>菜单风格</td>
<td>
<p>[类型:string] [可选]</p><br />
<table>
<tr><td width="120">可选值</td><td>解释</td></tr>
<tr><td><span>[无]</span></td><td>清新风格 [默认]</td></tr>
<tr><td><span>natural</span></td><td>自然风格</td></tr>
<tr><td><span>dark</span></td><td>暗黑风格</td></tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div><!--maindiv-->
<div id="tabs" class="maindiv">
<div class="page_tit">选项卡 jd.tabs()</div>
<div class="table_row">
<div class="example">
<style>
.tabs_ul li {line-height:30px;}
.tabs_ul li.on {background-color:#f0f0f0;}
.tabs_son {display:none;}
.tabs_son.on {display:block;}
</style>
<div>
<ul class="tabs_ul">
<li class="on" onclick="jd.tabs(this, '.tabs_con')">1. 点击</li>
<li onclick="jd.tabs(this, '.tabs_con')">2. 点击</li>
<li onclick="jd.tabs(this, '.tabs_con')">3. 点击</li>
</ul>
</div>
<div class="tabs_con">
<div class="tabs_son on">1111</div>
<div class="tabs_son">2222</div>
<div class="tabs_son">3333</div>
</div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><style></span></li>
<li><span>.tabs_ul li {line-height:30px;}</span></li>
<li><span>.tabs_ul li.on {background-color:#f0f0f0;}</span></li>
<li><span>.tabs_son {display:none;}</span></li>
<li><span>.tabs_son.on {display:block;}</span></li>
<li><span></style></span></li>
<li></li>
<li><span><div></span></li>
<li class="level2"><span><ul class="tabs_ul"></span></li>
<li class="level3"><span><li class="on" <span>onclick="jd.tabs(this, '.tabs_con')"</span>>1. 点击</li></span></li>
<li class="level3"><span><li onclick="jd.tabs(this, '.tabs_con')">2. 点击</li></span></li>
<li class="level3"><span><li onclick="jd.tabs(this, '.tabs_con')">3. 点击</li></span></li>
<li class="level2"><span></ul></span></li>
<li><span></div></span></li>
<li></li>
<li><span><div class="<span>tabs_con</span>"></span></li>
<li class="level2"><span><div class="tabs_son on">1111</div></span></li>
<li class="level2"><span><div class="tabs_son">2222</div></span></li>
<li class="level2"><span><div class="tabs_son">3333</div></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
<div class="paramax">
<div class="para xtablein xfirst xtableall">
<div class="parain">
<table>
<tr>
<td colspan="3">jd.render(<em>参数1</em>, <em>参数2</em>)</td>
</tr>
<tr>
<td width="120">参数</td>
<td width="200">说明</td>
<td>属性</td>
</tr>
<tr>
<td>参数1</td>
<td>元素本身</td>
<td>
<p>[必填]</p>
</td>
</tr>
<tr>
<td>参数2</td>
<td>作用元素的父元素</td>
<td>
<p>[说明] [作用元素必须被一个父标签包裹]</p>
</td>
</tr>
</table>
</div>
</div>
<div class="para_app">查看参数</div>
</div>
</div>
</div><!--maindiv-->
<div class="table_row">
<div class="page_tit3" style="text-align:right;">Jq Driver 网页驱动器</div>
</div><!--table_row-->
</div><!--pright-->
</div><!--page_pr-->
</div><!--page-->
<script type="text/javascript">
const jd = $('body').jqdriver();
</script>
<script>
$(window).scroll(function(){
saction();
});
function saction()
{
liarr = new Array("explain","hover","navselect","poiup","subCheck","open","slideto","select","cssact","onlyum","render","contextmenu","tabs");
d = new Array();
t = $(window).scrollTop();
for(i=0;i<liarr.length;i++)
{
d[i] = $("#"+liarr[i]).offset().top-100; //提前100像素生效
if(t>d[i]){
$(".li_"+liarr[i]).addClass("on").siblings().removeClass("on");
text = $(".li_"+liarr[i]).find("a").text();
$(".top_cen").text(text);
}
}
}
window.onload=function(){
bwidth = window.innerWidth;
if(bwidth>1200){
bheight = window.innerHeight-20;
pheight = $(".pleft").height();
if(bheight<pheight){
$(".pleft").css({"height":(bheight-20)+'px'});
}
}
setTimeout(function(){
$(".pleft").css({"transition-duration":"0.2s"});
},1);
}
function space(num)
{
s = ' ';
str = '';
for(var i=0;i<num;i++){
str += s+'';
}
return str;
}
//复制代码
$(document).on("click",".precopy",function(){
pa = $(this).parents(".pre");
olheight = $(pa).find("ol").height();
if($(pa).find(".precode").is(":hidden"))
{
ol = $(pa).find("ol li");
$(pa).find(".precode").css({"height":olheight+"px"});
html = '<textarea class="xtext xful">';
for(i=0;i<ol.length;i++)
{
if($(this).hasClass("precopy2"))
{
if($(ol[i]).hasClass("level2")){
html += space(2);
}else if($(ol[i]).hasClass("level3")){
html += space(4);
}else if($(ol[i]).hasClass("level4")){
html += space(6);
}else if($(ol[i]).hasClass("level5")){
html += space(8);
}else if($(ol[i]).hasClass("level6")){
html += space(10);
}else if($(ol[i]).hasClass("level7")){
html += space(12);
}else if($(ol[i]).hasClass("level8")){
html += space(14);
}else if($(ol[i]).hasClass("level9")){
html += space(16);
}else if($(ol[i]).hasClass("level9")){
html += space(18);
}
}
if($(ol[i]).find("span").html())
{
text = $(ol[i]).find("span").html();
text = text.replace(/\<\/{0,1}span\>/g,""); //去除span标签
text = text.replace(" "," "); //空格
html += text;
}
if(i!=ol.length-1 && $(this).hasClass("precopy2")){
html += "\n";
}
}
html += '</textarea>';
$(pa).find(".precode").html(html);
$(pa).find("ol").hide();
$(pa).find(".precode").show();
$(pa).find(".precode textarea").select();
}
else
{
$(pa).find("ol").show();
$(pa).find(".precode").hide();
$(pa).find(".precode").html("");
$(pa).find(".precode").css({"height":""});
}
})
$(document).on("blur",".precode textarea",function(){
$(this).parents(".pre").find("ol").show();
$(this).parent(".precode").hide();
$(this).parent(".precode").html("");
})
//代码暗色调
$(document).on("click",".pretype",function(){
$(this).parents(".pre").toggleClass("on");
})
//app
$(document).on("click",".top_btn.ll",function(){
$(".pleft").addClass("on");
$(".pleft_zw").addClass("on");
})
$(document).on("click",".top_btn.lr",function(){
$("body, html").animate({scrollTop:0},0);
$(".top_cen").text("关于 Xtiper");
})
$(document).on("click",".pleft_zw, .pleft li a",function(){
$(".pleft").removeClass("on");
$(".pleft_zw").removeClass("on");
})
$(document).on("click",".para_app",function(){
$(this).parent().find(".para").toggle();
text = $(this).text();
if(text=='查看参数'){
text = '收起参数';
}else{
text = '查看参数';
}
$(this).text(text);
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
