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

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

html 复制代码
<!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代码如下:

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

});

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

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

效果如下

代码

html 复制代码
<input type="hidden" class="splitter" />
javascript 复制代码
$(document).ready(function() {

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

});
相关推荐
gplitems12316 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木17 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_7683502318 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:18 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛19 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼19 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔20 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗20 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗20 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥20 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js