帝王谷资源网 Design By www.wdxyy.com
记得最早刚接触网页操作DOM元素的时候是做毕业设计的时候,用JQuery操作的。毕业工作后是从事C++方面的编程,两年后,又重新解决了网页编程,不过这次不是用JQuery了,用的是ExtJS。就我经验来看,程序员是一个需要不断学习的行业(这也是为什么周围的同事很多都有白头发的缘故吧)。
好了,今天这篇文章的主题是分享下我使用 ExtJS 操作 DOM 元素的一些经验。
设置元素点击处理函数的方法
复制代码 代码如下:
var elem = Ext.get('start');
elem.on('click', function(e, t) {
alert(t.id);
});
查询多个元素操作
复制代码 代码如下:
var body = Ext.query('body')[0];
body.className = "myStyle";
在实际项目中,由于需要更改一类元素的信息提示样式,如果根据 css 来查找的话,当需要消失操作时,就不能继续根据 css 来查找所有的元素了。这时,同事教会了我一种新的方法,如下:
复制代码 代码如下:
<span style='display:none;' group='message_group' class='error'></span>
<span style='display:none;' group='message_group' class='error'></span>
// 这样多个同样属于 group 下的元素,可以通过此种方式获取:
var elemMessageArray = Ext.select("span[group='message_group']");
var newCssObj = {};
if (isInfo) {
newCssObj["class"] = "info";
} else {
newCssObj["class"] = "error";
}
// 然后对每个元素重新设置css样式就行了
elemMessageArray.each( function(el) {
el.set(newCssObj);
el.update(text);
el.show("display");
});
元素的显示和隐藏
之前我一般用的方式
复制代码 代码如下:
Uncompleted = Ext.get('uncompleted');
elemUncompleted.setDisplayed(true);
这种方式能够提供动画效果,但是这样的话,如果需要元素消失时:元素虽然消失了,但是同样还是会占用了元素的空间位置,不便布局。后来,同事发现可以采用这种方式,虽然没有了动画效果,但是不会占用元素的位置:
复制代码 代码如下:
el.show("display");
el.hide("display");
刚才发现文档中的说明:
Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
仔细阅读文档是程序员必须要学会做的!
好了,今天这篇文章的主题是分享下我使用 ExtJS 操作 DOM 元素的一些经验。
设置元素点击处理函数的方法
复制代码 代码如下:
var elem = Ext.get('start');
elem.on('click', function(e, t) {
alert(t.id);
});
查询多个元素操作
复制代码 代码如下:
var body = Ext.query('body')[0];
body.className = "myStyle";
在实际项目中,由于需要更改一类元素的信息提示样式,如果根据 css 来查找的话,当需要消失操作时,就不能继续根据 css 来查找所有的元素了。这时,同事教会了我一种新的方法,如下:
复制代码 代码如下:
<span style='display:none;' group='message_group' class='error'></span>
<span style='display:none;' group='message_group' class='error'></span>
// 这样多个同样属于 group 下的元素,可以通过此种方式获取:
var elemMessageArray = Ext.select("span[group='message_group']");
var newCssObj = {};
if (isInfo) {
newCssObj["class"] = "info";
} else {
newCssObj["class"] = "error";
}
// 然后对每个元素重新设置css样式就行了
elemMessageArray.each( function(el) {
el.set(newCssObj);
el.update(text);
el.show("display");
});
元素的显示和隐藏
之前我一般用的方式
复制代码 代码如下:
Uncompleted = Ext.get('uncompleted');
elemUncompleted.setDisplayed(true);
这种方式能够提供动画效果,但是这样的话,如果需要元素消失时:元素虽然消失了,但是同样还是会占用了元素的空间位置,不便布局。后来,同事发现可以采用这种方式,虽然没有了动画效果,但是不会占用元素的位置:
复制代码 代码如下:
el.show("display");
el.hide("display");
刚才发现文档中的说明:
Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
仔细阅读文档是程序员必须要学会做的!
标签:
ExtJS,DOM元素
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年10月31日
2024年10月31日
- 【原神】V5.1攻略 |「骑士的剑影」活动合集
- 叶树茵.2005-INVISIBLE【IDO音乐】【WAV+CUE】
- 群星.1997-同根同心【EMI百代】【WAV+CUE】
- 高嘉丰.2024-早期科技Early.Technologies【摩登天空】【FLAC分轨】
- 宝丽金群星.1990-宝丽金90超白金精丫宝丽金】2CD【WAV+CUE】
- 抖音神曲《抖烧第四季DSD》DTS+WAV
- 群星《超炫电子古典》2CD【DTS-WAV】
- Sleepy Cat《Feline Rain Soothing Music for Cats》[320K/MP3][45.67MB]
- Sleepy Cat《Feline Rain Soothing Music for Cats》[FLAC/分轨][125.38MB]
- 群星《初声证明2324》[320K/MP3][41.39MB]
- S14全球总决赛T1战队怎么样 全球总决赛T1战队详细介绍
- S14全球总决赛GEN战队怎么样 全球总决赛GEN战队详细介绍
- 全球总决赛lck参赛队伍是哪些 全球总决赛lck所有队伍队员一览
- 《真三国无双起源》PC版21:9超宽屏展示:压迫力拉满
- 男子做兼职主播月入3毛 还被工作人员骂土鳖