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

已于 2024-01-18 18:39:58 修改
阅读量1.1k 收藏 9
点赞数 7
文章标签： easyui 前端 javascript
于 2024-01-18 14:59:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heyl163_/article/details/135674463
版权

最近在修改前端代码的时候，偶然发现使用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
	});

});

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

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

效果如下

代码

<input type="hidden" class="splitter" />
$(document).ready(function() {

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

});

沐雨橙风ιε
关注
easyui 隐藏input_给Easyui-Datebox设置隐藏或者不可用的解决方法
weixin_39790504的博客
12-23 791
我们公司做的是一套安全监测系统。所以呢对于前台页面没有像一些门户网站布局那么丰富，特效特别炫。目前只需要一套简单的UI界面即可，所以我选择了用easyui进行搭建，easyui是一种基于jQuery的用户界面插件集合。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。方便而且也比较美观。但是随着项目的进展，对于一些功能的选择上，需要给一些元素加一些样式。...
easyui 隐藏input_easyui datagrid 列显示和隐藏
weixin_42300090的博客
12-23 511
//当查询IT基础设施的时候隐藏'STAFF_ID'、'ITSM_STAFF_ID'if($("input[name='currentstate']").val()==2){$('#ordertable').datagrid('hideColumn','STAFF_ID');$('#ordertable').datagrid('hideColumn','ITSM_STAFF_ID');}else{...
easyui-textbox
03-26 345
TextBox 扩展自 $.fn.validatebox.defaults. 重写 $.fn.textbox.defaults. TextBox 是加强的输入控件，使我们建设表单更加快捷. 是一些复杂控件的基础控件，比如combo,datebox,spinner,等等. 依赖 validatebox linkbutton 实例 html创建方式 <in...
easyui 隐藏input_easyui datagrid 隐藏 | 学步园
weixin_31423913的博客
12-23 763
easyui datagrid 隐藏列1、隐藏前图2、隐藏后图3、代码1$("#corp-grid").datagrid({title:"泥头车企业管理",toolbar:"#corp-grid-toolbar",border:false,fit:true,width:$(window).width()-252,columns:[[{field:"ckb",checkbox:true},{fiel...
easy ui 隐藏textbox
热门推荐
写代码的张三也会写博客
03-30 2万+
easyUI textbox隐藏实现： 页面代码： 使用js隐藏textbox: easyUI textbox隐藏原理： 使用easyUI的textbox生成的实际代码如上，真正达到textbox展示效果的，是标签；代码中设置的id，仅体现在已经被隐藏的input框中，使用通常的$("#id")选择的，是已经隐藏的input标签，实际要选择操作的，应该是紧邻的同辈元
<input class="easyui-textbox" type="text" name="emailId" style="width: 200px; visibility:hidden;" id="emailId"> 在弹窗内不隐藏，如何修改
06-10
如果弹窗内的元素也不隐藏，可能是... 邮箱地址：<input class="easyui-textbox" type="text" name="emailInput" style="width: 200px;" id="emailInput"> </div> </div> ``` 这样应该可以让弹窗内的元素隐藏起来了。
easyui下拉框easyui-combobox input class=easyui-combobox 及控制层代码
JesseCary的博客
07-12 1301
var url;  function searchDataDic(){ $("#dg").datagrid('load',{ "dataDicName":$("#s_dataDicName").combobox("getValue"), "dataDicValue":$("#s_dataDicValue").val()  });  }  function openDa
easyui-textbox和easyui-combobox的onchange事件响应实例
08-01
<script type="text/javascript" src="http://www.jq22.com/jquery/easyui/1.3.5/jquery.easyui.min.js"></script> </head> <body> <div> <label>Textbox:</label> <input id="textbox" class="easyui-textbox" ...
EasyUI textbox事件，EasyUI textbox input events
12-10
在使用UasyUI的时候，在一般的input输入框上添加class="easyui-textbox"属性，则在该输入框上添加的事件将不起作用，但是如果去掉class="easyui-textbox"变成一般的input则起作用。 控件的生成原理，它是把你原有的...
easyui 隐藏input_easyUI的grid的checkbox列隐藏问题
weixin_42512246的博客
12-31 365
外派工作闲来无事，准备开始对完成的项目开始zuo，一眼就看到了grid的checkbox列，这时候就想能不能不显示这一列呢，于是乎上网查了下发现并没有好的解决方案。反正也是没事做，就看看源码，尝试着写了下实现。checkbox显示前效果(原谅我的涂鸦，大家看效果就好。。毕竟外派人员，啥也不能泄漏)隐藏后效果下面是实现代码，colum信息已删除，看onLoadSuccess方法就可以了：$('#li...
notepad++删除注释正则表达式
清水的专栏
09-16 831
notpad++正则搜索：/* */ /\*(.|[\r\n])*?\*/ notpad++正则搜索：<!-- --> <!--(.|[\r\n])*?--> eclipse批量搜索：/* */ /\**\*/ eclipse批量搜索：<!-- --> <!--*-->
easy ui 隐藏文本框
ssssdfdsf的博客
08-17 2318
主要是动态来显示隐藏文本框来展示  html  <select class="easyui-combobox" style="width:70%" data-options="label:'部门类型:',required:true,prompt:'请选择部门类型',onChange:choose"
easyui 隐藏input_Easyui passwordbox（密码框）_EasyUI 插件
weixin_28893183的博客
01-13 1148
扩展自$.fn.textbox.defaults，使用$.fn.passwordbox.defaults重写默认值对象。(该组件自1.5版开始可用)该插件允许用户在具有更好交互功能的输入框中输入密码。 密码框会通过显示圆点的方式来保护您输入的密码文本，同时输入框中会提供一个眼睛的图标来通过点击的动作查看您输入的密码，来确保您输入的密码正确无误。依赖关系•textbox用法通过标签创建密码框。...
jquery控制easyui中combobox、textbox显示隐藏
最新发布
沧海一粟
10-31 1469
easyui textbox 隐藏_EasyUI 带清除图标的文本框(TextBox with Clear Icon)_easyui demo
weixin_42227109的博客
03-05 686
TextBox with Clear IconThis example shows how to create an textbox with an icon to clear the input element itself.源代码TextBox with Clear Icon - jQuery EasyUI DemoTextBox with Clear IconThis example sho...
easyui-textbox 隐藏解决方案
兔的骄傲
08-04 1万+
解决方法：在脚本里面写：$("#textbox的id值").next().hide(); 代码示例： 这是我的定义需要隐藏的属性 在脚本按照格式写就好了。
easyui textbox 隐藏_easyui combobox禁用隐藏箭头示例
weixin_34524593的博客
02-23 485
本示例扩展了easyui combobox方法setComboboxState，调用setComboboxState方法后(传递true)可以禁用combobox(调用combobox内置的disable方法)，同时隐藏右侧的箭头图标，调整显示的textbox占用原来箭头的位置。传递false启用combobox，同时显示箭头并还原textbox长度，效果如下combobox禁用状态效果combo...
<legend class="field_title"> <a href="#" class="easyui-linkbutton" plain="true" onclick="addTableRow()"><i class="fa fa-plus-circle fa-lg fa-fw fa-col"></i>增加行</a> </legend> <table style="width: 100%;"> <thead > <tr> <th>操作</th> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> <tr> <td><input type="button" name="comment" value="删除"></td> <td><input type="text" name="comment"></td> <td><input type="date" name="date1"></td> <td><input type="date" name="date2"></td> <td><input type="date" name="date3"></td> <td><input type="text" name="commen1t"></td> <td><input type="date" name="date4"></td> <td><input type="file" name="attachment"></td> </tr> </thead> </table>新增和删除
06-04
在上述代码中，使用了一个`<table>`元素来呈现表格，并在表格的第一行添加了一个`<legend>`元素作为标题。在第一行的标题中，使用了一个`<a>`元素来实现“增加行”功能，并为它添加了一个`onclick`事件，当用户点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值