Dropdown menu and observe(Prototype & script.aculo.us)

上一篇 / 下一篇  2008-10-31 16:00:11 / 个人分类：RoR、Mysql&linux

查看( 36 ) / 评论( 2 ) / 评分( 0 / 0 )

导入论坛 引用链接 收藏 分享给好友 推荐到圈子 管理 举报

TAG: prototype menu observe

引用 删除 Guest   /   2009-01-14 15:08:21
stone4102的个人空间 引用 删除 stone4102   /   2008-10-31 16:05:47
How to add HTML content to the DOM using Prototype
Monday, Oct 13th, 2008 at 1:55 am No Comments See that red beetle in the upper-right hand corner? I create that after the page loads, using Prototype. In fact, all the auxillary content in the header is created after the page loads. It’s not site content and it’s not navigation; it’s just for fun, so why load it before the “real” content, right?!

First, to add content using Prototype, I recommend that you already know or have the content you want to add to the DOM. For example, I wanted to add that red beetle to the DOM using Prototype. I already had it embedded into my document and here’s what the HTML looked like…

<a href="#" onclick="beetles(); return false;">
  <img src="/images/beetle1.png" alt="" id="beetle1" border="0" />
</a>To add this content to the DOM after the page has loaded using Prototype, we use the Element constructor, Element.insert, Element.update and document.observe. Here’s what the Prototype code looks like…

document.observe('dom:loaded', function() {
var linkBeetle1 = new Element('a', {
  href: '#',
  onclick: 'beetles(); return false;'
});

var beetle1 = new Element('img', {
  src: '/images/beetle1.png',
  id: 'beetle1',
  alt: '',
  border: '0',
});

linkBeetle1.update(beetle1);
$('header').insert(linkBeetle1);
};
new Element - creates a new HTML element with the provided attributes.

.update - updates/replaces the content of the element with the provided content. In this case, we’re attaching the <img> to the <a href> tag.

.insert - attaches the newly created element into the document to the element you specify.

document.observe(’dom:loaded’… - this will make it so that the content is loaded after the page has been loaded (but before the images are loaded).

And that’s all there is to it!
 

评分：0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2010-03-21  
日 一 二 三 四 五 六
 123456
78910111213
14151617181920
21222324252627
28293031   

数据统计

  • 访问量: 2479
  • 日志数: 393
  • 建立时间: 2008-01-02
  • 更新时间: 2008-11-07

RSS订阅

Open Toolbar