1、JS部分
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
function seashowtip(id,flag,iwidth){
var my_tips=$("#mytips");
var tips;
if($("#"+id).attr("datatype")=="normal"){
tips="请输入"+$("#"+id).attr("min")+"个到"+$("#"+id).attr("max")+"个之间的字符";
}else if($("#"+id).attr("datatype")=="number"){
tips="请输入"+$("#"+id).attr("min")+"到"+$("#"+id).attr("max")+"位的数字";
}else if($("#"+id).attr("datatype")=="floatdata"){
tips="请输入有"+$("#"+id).attr("min")+"到"+$("#"+id).attr("max")+"位小数位小于1的小数";
}
if(flag){
my_tips.html(tips);
my_tips.css("display","");
my_tips.css("width",iwidth);
var l=document.getElementById('xxx').value;
var t=document.getElementById('yyy').value;
my_tips.css("left",l);
my_tips.css("top",t);
}
else
{
my_tips.css("display","none");
}
}
2、页面部分
<div id=mytips style="position:absolute;background-color:#ffffff;width:121;height:16;border:1px solid gray;display:none;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3); left:0; top:5"></div>
<input id="xxx" type="hidden" /><input id="yyy" type="hidden" />
<table width="600" border="0" cellpadding="0" cellspacing="1">
<tr>
<td>商品组名称:</td>
<td><input type="text" max ="20" min ="5" datatype="normal" owntxt="商品组名称" ifnull="notnull" id="groupName" name="tpgDTO.groupName"
class="text ui-widget-content ui-corner-all" style="width: 400px;" value="<s:property value="tpgDTO.groupName"/>" onmousemove="seashowtip('groupName',1,160)" onmouseout="seashowtip('groupName',0,160)"/>
</td>
</tr>
<tr>
<td>备注</td>
<td><input type="text" max = "300" min = "3" datatype="normal" owntxt="备注" ifnull="cannull" id="remark" name="tpgDTO.remark"
class="text ui-widget-content ui-corner-all" style="width: 400px;" value="<s:property value="tpgDTO.remark"/>" onmousemove="seashowtip('remark',1,160)" onmouseout="seashowtip('remark',0,160)"/>
</td>
</tr>
<tr>
<td>test浮点数:</td>
<td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="浮点数" ifnull="cannull" id="testfloat"
class="text ui-widget-content ui-corner-all" style="width: 400px;" onmousemove="seashowtip('testfloat',1,200)" onmouseout="seashowtip('testfloat',0,200)"/>
</td>
</tr>
<tr>
<td>test整数:</td>
<td><input type="text" max ="8" min ="1" datatype="number" owntxt="整数" ifnull="cannull" id="number"
class="text ui-widget-content ui-corner-all" style="width: 400px;" onmousemove="seashowtip('number',1,120)" onmouseout="seashowtip('number',0,120)"/>
</td>
</tr>
<tr>
<td>test比较大小前者:</td>
<td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="毛利" ifnull="cannull" id="lower"
class="text ui-widget-content ui-corner-all" style="width: 400px;" onmousemove="seashowtip('lower',1,200)" onmouseout="seashowtip('lower',0,200)"/>
</td>
</tr>
<tr>
<td>test比较大小后者:</td>
<td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="毛利" ifnull="cannull" id="uper"
class="text ui-widget-content ui-corner-all" style="width: 400px;" onmousemove="seashowtip('uper',1,200)" onmouseout="seashowtip('uper',0,200)"/>
</td>
</tr>
<tr>
<td>范围</td>
<td><button id="show-filtercond-btn" style="font-size: 90%;">制定筛选条件</button></td>
</tr>
</table>
不懂的联系QQ526151410
- 大小: 50.2 KB
分享到:
相关推荐
首先,我们需要理解基本的HTML结构,这通常包括一个输入框(`<input>`元素)和一个用来显示提示信息的下拉列表(可以是`<ul>`或`<div>`)。例如: ```html 请输入关键词"> <div id="suggestionList"></div> ``` 接...
此外,还需要一个容器元素,如`<ul>`或`<div>`,用于显示提示信息。这些元素可以通过ID或类选择器在jQuery中被选中。 接着,我们需要监听输入框的`keyup`事件,每当用户在输入框中键入字符时,该事件就会触发。在...
结合 PoshyTip 插件,我们可以实现更友好的提示信息展示,即在验证失败时以信息气泡的形式向用户展示错误信息。 PoshyTip 是一个基于 jQuery 的高质量提示插件,它提供了多种样式和自定义选项,可以创建美观、动态...
`focus`事件中,我们可以初始化提示信息;`keyup`事件中,根据用户输入动态更新提示内容。 ```javascript $("#inputId").on("focus", function() { // 初始化提示 }).on("keyup", function() { // 根据用户...
jQuery UI 的提示框(Tooltip)是一种优雅的方式来展示额外的信息,帮助用户理解页面上的元素或数据。这些提示通常会在鼠标悬停在特定元素上时出现,提供简洁明了的说明。 **一、jQuery UI 的安装与引入** 在使用 ...
jQuery Dreamweaver代码提示插件的工作原理是分析jQuery的API文档,并将其中的方法、属性和参数等信息整合到Dreamweaver的代码提示系统中。当你在Dreamweaver中输入jQuery语法时,插件会即时显示相关的函数和方法,...
// 在这里处理用户输入并显示下拉提示 }); }); ``` 3. **数据源**:下拉提示的数据通常来源于服务器或预先定义的数组。这里假设我们有一个 JSON 数组,包含了提示项。 ```javascript var suggestions = ['Apple'...
它允许用户在输入框中输入信息时,自动显示一组预定义的标签作为提示。这些标签是预先设定好的,可以在后台数据库或者JSON文件中存储,当用户输入与某一个或多个标签相关的字符时,插件会智能地匹配并展示出来。这种...
总结来说,`jQuery validator addMethod`提供了一种灵活的方式来自定义表单验证规则,可以根据不同的输入情况显示不同的错误信息。结合jQuery Validation Plugin的其他功能,如`rules`和`messages`,我们可以构建出...
总之,这款“jQuery带提示信息的日期日历插件”结合了美观的界面设计和实用的功能,是网页开发中增强日期输入交互的好帮手。通过学习和使用此类插件,开发者不仅可以提升工作效率,还能提升网站的整体质量和用户体验...
在构建一个交互性强、用户体验优秀的在线机票预定网站时,jQuery 的智能输入提示功能扮演着至关重要的角色。这个功能能够帮助用户快速找到他们想要的目的地,提高预订效率,降低用户操作难度,从而提升整个网站的...
比如,当用户输入电话号码时,可以使用jQuery的.fadeIn()和.fadeOut()方法显示和隐藏提示信息。在输入框聚焦和失去焦点时,也可以用.slideToggle()来改变提示文字的可见性。 总结来说,“jquery input国际电话输入...
对于“自动在文本框提示信息”,我们通常指的是当用户聚焦到文本输入框时,显示一段预设的提示文本,而当用户开始输入时,这个提示文本会自动消失或者改变。 实现这一功能,首先需要在HTML中设置一个文本输入框,并...
jQuery对话框和提示信息是用户交互的重要组成部分,它们可以用来展示警告、确认信息、提供输入字段或者显示详细内容,从而提高用户体验。本文将深入探讨jQuery中的这些功能及其应用。 首先,我们来了解jQuery的`...
在这个例子中,当用户在密码输入框中键入大写字母时,会显示一个红色的提示信息。当用户输入非大写字母时,提示会自动消失。 总的来说,通过结合JQuery的事件处理和DOM操作能力,我们可以轻松实现输入框大写提示的...
在本教程中,我们将深入探讨如何利用jQuery来实现一个搜索输入框的功能,当用户在input框中输入关键词时,能自动筛选并显示与之匹配的相关信息。 首先,我们需要在HTML中设置一个input元素作为搜索框,并且定义一个...
这种功能常见于搜索框,当用户开始输入关键词时,插件会自动显示与输入内容匹配的建议列表,类似于Google搜索的下拉提示。 在描述中提到的"支持多控件传值和回填",这意味着该插件不仅限于单个输入框,而是可以同时...
在`blur`事件中,如果输入为空或者不符合要求,提示框可以显示错误信息,并以动画形式呈现;在`change`事件中,可以检查输入是否符合验证规则,若符合则清除提示,否则显示相应的错误提示。 例如,以下是一个简单的...
"基于jQuery的鼠标移到问号上出现提示框的demo"是一个常见的交互元素,常用于提供表单项的附加信息或帮助用户理解复杂的输入要求。这个功能利用了jQuery库的强大功能,使得在网页上实现这种交互效果变得简单高效。 ...
在网页开发中,用户输入的数据验证是至关重要的,特别是对于日期和时间这类敏感信息。`Jquery`,作为一款广泛使用的JavaScript库,提供了强大的功能来帮助开发者实现这一目标。本篇文章将详细介绍如何利用`Jquery`...