我发现如果正确完成,使用jQuery创建HTML客户端可以是一个巨大的性能助推器.我使用AJAX返回JSON来检索动态内容,然后我构建相关的HTML并使用jQuery插入它.我第一次搞砸了这种技术,我发现IE的JavaScript中的字符串连接器的执行速度非常慢,因此构建一个超过50行的动态表执行得非常糟糕.
var shtml = '<table>';
for (var i = 0; i < 100; i++) {
shtml += '<tr><td>A bunch of content</td></tr>';
}
shtml += '</table>';
$('#myTable').append(shtml);
然后我发现了一种用于字符串连接的技术,它改变了一切.而不是使用sting +=运算符使用数组来进行连接;
var shtml = ['<table>'];
for (var i = 0; i < 100; i++) {
shtml.push('<tr><td>A bunch of content</td></tr>');
}
shtml.push('</table>');
$('#myTable').append(shtml.join(''));
我发现性能显着提高.然而,现在,在我开始看到浏览器本身一次性动态插入如此多的内容之前,存在大约100行的上限.有没有人有任何指针或技术可以帮助我实现大型动态HTML的下一个性能提升？
我不确定这是否恰当,但我认为这是一个有趣的问题.
有没有人在专业环境中实际使用短语DHTML？
前几天,我第一次看到了这个词,并且在想到它时感到不寒而栗.对我来说,动态HTML的首字母缩写只是听起来如此1999年,它让我回到了我第一次发现编程和Web开发的时代,并认为使用修改状态栏并使事物在页面上飞行的脚本非常棒.
我一个人从来没有使用过这句话,并且永远不会梦想在专业的环境中对客户或大学说这些,因为我觉得有一个业余和过时的耻辱.
你的想法是什么？
我有一个带有DIVs的网页,其中包含一个mouseover用于显示弹出信息泡泡的处理程序.我不希望一次看到多个信息泡泡.但是当用户将鼠标快速移动到两个项目上时,我有时会得到两个气泡.这不应该发生,因为显示弹出窗口的代码会取消之前的弹出窗口.
如果这是一个多线程系统,那么问题就很明显了:有两个线程试图显示一个弹出窗口,它们都会取消现有的弹出窗口,然后弹出自己的弹出窗口.但我认为JavaScript总是运行单线程,这会阻止这一点.我错了吗？事件处理程序是异步运行的,在这种情况下我需要同步访问共享数据,还是应该在库代码中查找用于取消弹出窗口的错误？
编辑添加:
SimileAjax.DOM.cancelEvent(domEvt),我假设根据名称取消事件的冒泡;moustout显示弹出窗口取消,这是为了防止弹出窗口烦人地闪烁但是烦人地产生相反的效果.我还有另一个戳,看看我是否可以解决我出错的地方.:-)
我在获取UI代码以便在IE中完成任务时遇到问题.
我有一张桌子 - 价值矩阵.每个单元格可以为空或包含项目列表.
我希望用户能够在单元格之间拖动项目.
所以我的HTML看起来像这样:
<table>
<tr><td></td><th scope="col">col 1</th><th scope="col">col 2</th></tr>
<tr><th scope="row">row 1</th>
<td class="droppable-cell">
<div class="draggable-item">item A</div>
<div class="draggable-item">item B</div>
</td>
<td class="droppable-cell"></td>
</tr>
<tr><th scope="row">row 2</th>
<td class="droppable-cell"></td>
<td class="droppable-cell">
<div class="draggable-item">item C</div>
<div class="draggable-item">item D</div>
</td>
</tr>
</table>
然后我使用jQuery 1.3.1和jQuery UI 1.6rc6:
$j('.draggable-item').each(function()
{
$j(this).draggable({
addClasses: false,
revert: true,
zIndex: 2000,
cursor: 'move'
});
});
$j('.droppable-cell').each(function()
{
$j(this).droppable({
addClasses: false,
activeClass: 'droppable-cell-candrop',
hoverClass: 'droppable-cell-hover',
tolerance: 'pointer',
drop: function(event, ui)
{
//function to save change
}); …我有一个内部Web应用程序,这是IE特定的,并使用了很多IE特定的模式框:(window.showModalDialog).
我最近收到了在网站页面之间导航时删除"flash"的请求.为此,我只是在主页面中添加了一个元转换标记:
<meta http-equiv="Page-Enter" content="blendTrans(duration=0.0)" />
除了模态框之外,这完美地工作.当您启动模式框,然后移动它时,它后面的网页会保留模式框的跟踪,而不是重新绘制网页内容.这可以防止用户移动模态框以读取其后面的任何内容.
有没有办法防止IE特定网站中的页面之间的"闪存",并让该网站仍然使用模态框？
请注意,这是一个庞大而复杂的站点,因此重新设计它不使用模态框不是一种选择.
这是一个asp.net,c#web应用程序,如果它有任何区别,我的所有用户都在使用IE 7和IE 8.
-编辑-
要复制此内容,请将以下内容放入html页面,然后在Internet Explorer中打开它:
<html>
<head>
<title>Test</title>
<meta content="blendTrans(duration=0.0)" http-equiv="Page-Exit">
</head>
<body>
<script language="javascript">
window.showModalDialog('modal.htm', window);
</script>
</body>
</html>
我正在启动一个带有window.open(...)的弹出窗口,我将一个elementId传递给新的弹出窗口.
然后在弹出窗口启动期间,我在开启窗口中找到与传递给弹出窗口的elementId匹配的元素.然后弹出窗口使用jQuery.bind(...)订阅该元素上的事件.然后从开启窗口内部我使用jQuery.trigger(...)触发这些事件,我也尝试了triggerHandlers.
问题是我的popup的eventHandler永远不会被调用.我可以在开启窗口内部订阅事件没问题.但是,当我从弹出窗口尝试时,它不起作用.
有没有人有任何想法如何解决这个问题？这是某种安全描述吗？
非常感谢阅读!
我对JavaScript和OOP非常熟悉,但我对设计用于编程UI(HTML)的JS类非常不熟悉.我搜索了一下,但没有遇到任何流行的模式.
假设我想动态创建类似于面板的对象(类似于Microsoft Windows面板).每个对象都需要一个容器,一个可以包含文本标签的标题区域,以及一个具有单击事件处理程序的关闭按钮.除了DOM表示(HTML)之外,该对象还具有JavaScript对象表示(变量和方法).这是我尝试过的一种方式:
//
// Window class
//
var Window = function(params) {
this.testMethod = function() {
console.log('test'); // just an example
}
this.windowDiv = document.createElement('div');
this.windowDiv.style.width = params.width + 'px';
this.windowDiv.style.height = params.height + 'px';
this.windowDiv.style.position = 'absolute';
this.windowDiv.style.top = '30px';
this.windowDiv.style.left = '30px';
this.windowDiv.style.border = '1px solid #000';
this.headerDiv = document.createElement('div');
this.headerDiv.style.width = '100%';
this.headerDiv.style.height = '30px';
this.headerDiv.style.background = '#bbb';
this.headerDiv.style.borderBottom = '1px solid #000';
this.headerDiv.innerHTML = params.title;
this.buttonDiv = document.createElement('div');
this.buttonDiv.style.width = '30px';
this.buttonDiv.style.height = '18px';
this.buttonDiv.style.position …我刚开始使用jQuery,各种来源建议以下内容应该用于通过ID引用元素:
$("#imgThumbnail")
理论上可以做出这样的事情:
$("#imgThumbnail").src;
但是我的测试表明$("#imgThumbnail")返回数组之类的东西,需要以下内容:
$("#imgThumbnail")[0].src;
每当我尝试通过ID(即var oObj = $("#someobjectid")[0];)引用某些内容时,我是否真的需要通过数组的索引来引用？
这里不足为奇,可能会欺骗:
学习Web编程的好书
需要阅读即将成为Web开发人员
,还会有更多.
对于个人项目,我开始使用Django进行一些Web编程.我已经编程了,因为我很年轻的几种语言,主要是Pascal/Delphi,C/C++,SQL Python(有时用其他语言,如Java,PHP或Perl)所以我不是新手程序员,但除了基本HTML我在网络编程(CSS,HTML,Javascript和AJAX)的前端方面经验很少,因为在我以前的专业项目中,如果有网络编程,有人会做前端部分.
我喜欢Django框架,但我感觉非常有限,并且在前端部分丢失了,并希望改进它.哪些书不会丢失100页来解释变量或功能是什么？(如果所有这些技术都包含在一起,那就更好了,但每个主题的不同书籍也都可以)
我正在从database.i填充国家/地区下拉列表.需要从下拉列表中选择一个值,并使用javascript将其分配给文本框.
码:
var textboxId = document.getElementById("txtCountry");
var dropdownListId =document.getElementById("ddlLocation");
var e = document.getElementById("ddlLocation");
var strUser = e.options[e.selectedIndex].value;
document.getElementById(textboxId).value = strUser;
document.getElementById(textboxId).focus();
通过这样做我得到错误.任何解决方案？
关心ravi