jquery 如何实现 prompt 的功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 如何实现 prompt 的功能相关的知识，希望对你有一定的参考价值。
实现一个可输入值的弹出，当用户点击确定时返回值，点击取消时返回空
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function()
$('#btn0').click(function()
var width = document.body.clientWidth+'px';
var height = document.documentElement.clientHeight+'px';
var p =
width:$('#msg').width(),
height:$('#msg').height()
var left = ($(window).width() - p.width) / 2 + 'px';
var top = ($(window).height() - p.height) / 2 + 'px';
$('#middle').css('width':width,'height':height,'position':'fixed').show();
$('#msg').css('left':left,'top':top).show();
$('#output').hide();
$(this).hide();
)
$('#btn1').click(function()
$('#ff').html($('#inp').val());
$('#inp').val('');
$('#output').show();
$('#btn0').show();
$('#middle,#msg').hide();
)
$('#btn2').click(function()
$('#inp').val('');
$('#btn0').show();
$('#middle,#msg').hide();
)
)
</script>
<style type="text/css">
#middle
filter: alpha(opacity=50);
opacity:0.5;
-moz-opacity:0.5;
z-index:3;
background-color:#e4eaf3;
#msg
position:fixed;
float: left;
z-index:999;
width:160px;
border:2px solid #828d97;
background-color:#e4eaf3;
display:none;
</style>
<div style="z-index:1;float: left;">
<button id="btn0">点击我输入内容</button><br />
<span id="output" style="display:none">输入的内容为：<font color="red" id="ff" /></font></span>
</div>
<div id="middle"></div>
<div id="msg">
<div style="width:100%;font-size:13px;">请输入内容:</div>
<div><input type="text" id="inp" style="width:154px;"/></div>
<div style="text-align:center;">
<button id="btn1">确定</button>
<button id="btn2">取消</button>
</div>
</div> 参考技术A
这个可以有两种实现
第一种是通过在同一个页面中的层实现，模拟一个确定取消的对话框的层
第二种可以弹出一个新页面,当新页面点击的时候，首先告诉父页面你点击的是什么(确定或取消) ,然后关闭当前页面
jQuery如何实现类似JSTL的功能进行前后端分离？
作为互联网开发者，不可不知的应用分层：数据层>服务层>逻辑控制层>视图层。而在web开发中，视图层通常通俗指的是JSP/HTML。了解JSP的同学都应该知道，JSP有特有的JSTL和EL表达式。我现在有这样一个前后端分离的需求。具体需求是：在HTML中实现类似JSTL中的功能。目前我已经实现了一个简单的demo,demo实现原理：用HTML的xmlns（命名空间）进行自定义标签：<c:forEach></c:forEach>再定义<c:forEach>标签的样式为隐藏，通过jQuery来获取<c:forEach>上的属性“items”和“var”和html文本进行迭代遍历出字符串。然后将迭代出来的字符串，放到<c:forEach>自身的前面。然后移除<c:forEach>元素本身。但是在这上面遇到了问题。具体问题：在<c:forEach>中嵌套<tr>时，居然嵌套不上。代码截图如下：
还有html不解析el表达式。换成jsp页面导入jstl标签库。 参考技术A 因为你这是html，jsp用的服务端渲染，这里你要用前端js渲染
以上是关于jquery 如何实现 prompt 的功能的主要内容，如果未能解决你的问题，请参考以下文章
如何使用jQuery Draggable和Droppable实现拖拽功能
Linux 利用 PROMPT_COMMAND 实现审计功能