`

动态添加元素css丢失的终极解决办法

 
阅读更多
在Jquerymoblie的使用过程中,动态添加元素后css丢失。

      这个问题在之前JqueryMobile使用心得(3)中我已经说明了其原因(因为页面标签首先经过jquery.mobile-1.0a2.min.js的处理,添加了许多标签,然后再用css布局),并且给出了一种解决方法:动态加载jquery.mobile-1.0a2.min.js。

      但是经过测试,上面这种方法并不好。首先异步加载造成用户可以看到没有加载JS的页面,并且JS加载过一次后,如果再要动态添加新元素的话,就意味着多次加载JS文件,显示问题先不说,这效率也堪忧。

      因此必须提出新方法。

      新方法有两个,调用JS的顺序与普通方式相同,都别动态添加JS。

一是将按照jquery.mobile-1.0a2.min.js处理过后的样式,来动态添加元素。jquery.mobile-1.0a2.min.js处理过后的样式可以通过chrome浏览器的审查元素功能看到。这个办法的缺点很明显:添加了很多奇怪的标签。

例如:

一般情形下动态添加元素:

onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' ";

if($obj[i].wtype == "dir"){//文件夹

onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";

}else{//非文件夹直接下载

onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";



按照jquery.mobile-1.0a2.min.js处理过后的样式,来动态添加元素:



onelist = "<li class='ui-li-has-icon ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-c' role='option' tabindex='0' data-theme='c'>" +

"<div class='ui-btn-inner'>" +

"<div class='ui-btn-text'>" +

"<img class='ui-li-icon ui-li-thumb' src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' />" +

"<a class='ui-link-inherit' href='#' ";

if($obj[i].wtype == "dir"){//文件夹

onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +

  "<span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + CountSize($obj[i].wsize) + "</span>" +

  "<a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'>" +

  "<span class='ui-btn-inner'>" +

    "<span class='ui-btn-text'></span>" +

    "<span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'>" +

      "<span class='ui-btn-inner ui-btn-corner-all'>" +

        "<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>" +

      "</span>" +

    "</span>" +

  "</span>" +

  "</a></div></div></li>";

}else{//非文件夹直接下载

onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +

  "<span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + CountSize($obj[i].wsize) + "</span>" +

  "<a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'>" +

  "<span class='ui-btn-inner'>" +

    "<span class='ui-btn-text'></span>" +

    "<span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'>" +

      "<span class='ui-btn-inner ui-btn-corner-all'>" +

        "<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>" +

      "</span>" +

    "</span>" +

  "</span>" +

  "</a></div></div></li>";

}

}



瞧这多了多少代码啊!不过这也是JueryMobile UI前端实际最终处理的代码量。

方法二:refresh

其实JueryMobile 中早就封装了refresh方法。你只需要对新添加的元素节点refresh一下就可以了。

例如: $("#节点名").listview("refresh");

还是刚才那个函数,采用普通的动态添加元素方法,最后加个refresh就搞定了。



function ShowMyListOK(){//处理根目录文件列表函数

if( $glb_result == ""){

alert("返回为空!请重新登录!");

}else{

//alert("成功: "+$glb_result);

$("#wlist").empty();

var $obj = jQuery.parseJSON($glb_result);

var onelist = "";

$.each( $obj, function(i, n){

if( $obj[i].wname != ""){

   onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' ";

if($obj[i].wtype == "dir"){//文件夹

onelist += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";

}else{//非文件夹直接下载

onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";

}

$("#wlist").append(onelist);

}

});

$("#wlist").listview("refresh");

}

}



这个方法很好,但是为什么没有早点发现呢?因为jquery.mobile-1.0a2.js的源码确实很不好读。本人JS水平有限,看到里面内容后,以为调用里面方法必须创建对象,误解了JQuery的原意。试了半天才搞出来,必须发帖纪录一下这个小成功。



http://hi.baidu.com/%CE%F7%B1%B1%C5%DD%C3%E6%CD%F5/blog/item/e743654de9424a24afc3ab8b.html
分享到:
评论

相关推荐

    动态添加css或js链接

    ### 动态添加CSS或JS链接 在Web开发过程中,我们经常会遇到需要动态加载样式表(CSS)或脚本(JavaScript)的情况。这种方式不仅能够提高页面的加载速度,还可以实现更加灵活的功能。本文将详细介绍如何在ASP.NET ...

    css伪元素 长方体 css伪元素 长方体

    css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...

    jquery动态添加元素事件失效问题解决方法

    总之,jQuery的`on()`方法是解决动态添加元素事件失效的关键,它通过在静态父元素上监听事件并转发给动态子元素,实现了对动态内容的事件处理。合理使用`on()`方法,能够帮助我们创建更加动态、响应式的Web应用。

    动态添加style元素

    动态添加`&lt;style&gt;`元素是一种常见的方式,它允许我们在不刷新页面的情况下更新或注入新的样式规则。这种技术在实现页面动态效果、组件化开发或者处理某些特定的交互场景时非常有用。 首先,我们要理解`&lt;style&gt;`元素...

    CSS优先级冲突:终极解决指南

    ### CSS优先级冲突:终极解决指南 在前端开发过程中,CSS(Cascading Style Sheets,层叠样式表)是必不可少的一项技术。它不仅能够帮助设计师和开发者控制网页的布局、颜色、字体等视觉特性,还能通过媒体查询实现...

    通过JS动态向网页中添加CSS样式语句代码

    总结来说,通过JavaScript动态添加CSS样式提供了一种灵活的方式来改变网页的外观,而AJAX则使得我们可以从服务器获取并应用样式,尤其在需要实时更新或个性化定制页面样式时,这种方法显得尤为重要。通过`LoadCss....

    前端体验设计——HTML5+CSS3终极修炼

    - **动画与过渡效果**:CSS3支持更复杂的动画和过渡效果,通过`transition`和`animation`属性可以轻松实现元素的平滑变化,提升视觉效果。 - **网格布局**:CSS Grid是一种全新的布局模式,允许开发者创建复杂的二维...

    CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body).pdf

    总之,解决CSS设置元素`width: 100%`在`body`作为父元素时失效的方法包括:清除父元素(如`body`)的默认样式,使用JavaScript动态设置宽度,或者结合媒体查询实现响应式布局。每种方法都有其适用场景,开发者应根据...

    JavaScript动态生成css

    JavaScript动态生成CSS是一种常见的前端开发技术,它允许我们在运行时创建、修改或删除CSS样式,以实现更加灵活和动态的页面样式控制。这种方式通常用于响应式设计、动画效果、主题切换或者在某些特定条件下需要调整...

    css3实现多个元素依次显示效果

    因此,在动画开始前,文章建议给元素添加一个class,如aninode,初始时设置为visibility:hidden(隐藏状态但占用空间),当需要元素显示时,再通过JavaScript给元素添加animated类来触发动画效果,并通过CSS设置该类...

    css + div网页布局终极解决方案

    【CSS + Div 网页布局终极解决方案】 在网页设计领域,CSS (Cascading Style Sheets) 和 Div 结合的布局方式已经成为主流,因为它提供了更高效、灵活且可维护的页面构建方法。本文将深入探讨如何利用 CSS 和 Div ...

    JavaScript动态添加css样式和script标签

    JavaScript动态添加CSS样式和script标签的知识点涵盖了Web开发中的客户端脚本编程技术,允许开发者在运行时动态地操作和修改网页的样式和行为。以下是对给定文件中所提到知识点的详细解释: 1. 动态添加CSS样式 - ...

    纯CSS3炫酷元素边框线条动画特效

    【CSS3炫酷元素边框线条动画特效】是一种利用现代浏览器对CSS3特性的支持,创造出引人注目的视觉效果的技术。在这个项目中,开发者通过纯CSS3代码,不依赖JavaScript,实现了动态的边框线条动画。下面我们将深入探讨...

    推箱子游戏(css元素)

    css网页设计推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)推箱子游戏(css元素)...

    移除html元素的某个css属性

    在前端开发中,动态地添加、修改或删除HTML元素的CSS样式是一项常见的需求。特别是在JavaScript与CSS的交互过程中,如何有效地控制元素的样式变得尤为重要。本文将深入探讨如何正确移除HTML元素上的某个CSS属性,...

    asp.net后台代码动态引用添加JS和css文件

    在ASP.NET中,`System.Web.UI.HtmlControls`命名空间下的`HtmlGenericControl`类可以用于创建HTML元素,如`&lt;link&gt;`和`&lt;script&gt;`标签,从而实现在运行时动态添加CSS和JS文件的功能。 #### 代码示例:动态添加CSS文件...

    css终极网页换肤+cookice.rar

    综上所述,“css终极网页换肤+cookie.rar”提供的是一种结合了CSS动态换肤和Cookie持久化存储的技术,它允许用户自定义网页主题,且在下次访问时保持个性化设置。这一技术的实现涉及到了前端开发的多个方面,包括CSS...

    CSS按钮与伪元素

    比如,可以利用伪元素在按钮上创建自定义的悬停动画,或者在按钮内部添加动态加载的指示符。通过`position`属性(如`relative`、`absolute`或`fixed`)和`z-index`控制伪元素的位置和层次,以实现各种视觉效果。 在...

    HTML5+CSS3超酷动态表单

    同时,CSS3还引入了`transition`属性,允许我们在元素状态改变时添加平滑过渡效果。对于输入框,可以设置边框颜色和阴影的过渡时间,使高亮效果更自然: ```css input { transition: border-color 0.3s, box-shadow...

    简单的纯CSS3图片和HTML元素发光特效

    2. `box-shadow`属性:用于为元素添加阴影效果,但在这里我们将利用它来实现发光效果。通过设置合适的颜色、模糊半径、偏移量等参数,我们可以创建出类似发光的效果。例如: ```css .element:hover { box-shadow: 0...

Global site tag (gtag.js) - Google Analytics