easyui渲染隐藏域＜input type=“hidden“ /＞为textbox可作为分割条使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了easyui渲染隐藏域＜input type=“hidden“ /＞为textbox可作为分割条使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在修改前端代码的时候，偶然发现使用javascript代码渲染的方式将<input type="hidden" />渲染为textbox时，会显示一个神奇的效果，这个textbox输入框并不会隐藏，而是显示未一个细条，博主发现非常适合用来当分割条使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link type="text/css" rel="stylesheet" href="/css/themes/icon.css"/>
		<link type="text/css" rel="stylesheet" href="/css/themes/default/easyui.css" />
		<link type="text/css" rel="stylesheet" href="/css/public.css" />
		<title>应用列表</title>
		<script type="text/javascript" src="/js/public/jquery.min.js"></script>
		<script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="/js/easyui/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="/js/public/public.js"></script>
		<script type="text/javascript" src="/js/public/ajaxUtils.js"></script>
		<script type="text/javascript" src="/js/application_list.js"></script>
	</head>
	
	<body>
		<div id="application_dialog" style="display:none;">
			<form id="application_form">
				<input type="hidden" id="id" name="id" />

				<table style="border-spacing:5px;">
					<tr>
						<td>应用名称</td>
						<td><input id="name" name="name" /></td>
					</tr>

					<tr>
						<td>访问路径</td>
						<td>
							<input id="href" name="href" />
						</td>
					</tr>

					<tr>
						<td>描述信息</td>
						<td>
							<input id="description" name="description" />
						</td>
					</tr>
				</table>
			</form>
		</div>
			
		<table id="application_list"></table>
	</body>
</html>

不小心把id渲染成了textbox，涉及的js代码如下：

$(document).ready(function() {
    $("#id").textbox({
		width: 200,
		required: true
	});

});

于是页面变成了这样，我还寻思这条红色的线哪来的。

easyui渲染隐藏域＜input type=“hidden“ /＞为textbox可作为分割条使用,easyui,前端,javascript

于是，他就成了我项目中的统一分隔条了~

效果如下

easyui渲染隐藏域＜input type=“hidden“ /＞为textbox可作为分割条使用,easyui,前端,javascript

代码文章来源地址https://www.toymoban.com/news/detail-810359.html

<input type="hidden" class="splitter" />

$(document).ready(function() {

	$("#qiling_detail .splitter").textbox({
		width: 205
	});

});

到了这里，关于easyui渲染隐藏域＜input type=“hidden“ /＞为textbox可作为分割条使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

easyui渲染隐藏域＜input type=“hidden“ /＞为textbox可作为分割条使用

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2