- MooTools 1.3 Cookbook
- Jay Larry G. Johnston
- 383字
- 2021-04-02 19:07:08
Moving an element with a particular ID
Once an element is under our beck and call, we can send it somewhere else on the page.
How to do it...
In our HTML sketch, we are pretending to vote for the greater of two, very influential people. Each influence is represented by an element on the page with a unique ID attribute. Moving elements around when we know their unique ID attribute value is simple with the MooTool infused Element::inject() method.
<script type="text/javascript" src="mootools-1.3.0.js"></script>
</head>
<body>
<form action="javascript:" method="get">
Choose the greatest influence of the Internet:<br/>
<select id="influence">
<option value="">Vote Now:</option>
<option value="bill">Bill</option>
<option value="linus">Linus</option>
</select>
<input type="button" value="..."/>
</form>
<img id="bill" src="bill_gates.bmp" alt="Bill"/>
<img id="linus" src="linus_torvalds.bmp" alt="Linus"/>
<div>
<h1>Voted Greatest Influencer of the Internet: </h1>
</div>
<div id="my_target" style="width:150px; height:150px;
border:1px solid #BEBEBE; line-height:50px;
text-align:center;"></div>
<noscript>JavaScript is disabled.</noscript>
<script type="text/javascript">
$('influence').addEvent('change',function() {
var id_to_move = $('influence').value;
// use MooTools Element::inject() to move an item
$(id_to_move).inject('my_target');
// we can't have people voting twice
$('influence').removeEvents();
});
</script>
</body>
</html>
How it works...
The inject() method takes two parameters, though only one is mandatory. The requisite, first argument is the HTML element ID of the target canvas in which we wish to inject our element. The second argument that we may send is the keyword location of where we wish to inject the element relative to any existing content in the target element.
Appropriate values for the second argument of inject() include:
afterbeforetopbottom(defaultvalue)
Two of the numerous methods that are similar to this are replace() and grab(). To remove all existing content, use the former. To reverse the inclusion syntax, use grab() thusly: $('my_target').grab('bill').
There's more...
Moving elements on a page is the cornerstone to providing a user-friendly environment. However, it is very important that we always do this with caution. Moving an element when the user is not expecting it can disorient them or even make them think the page is malfunctioning. Also, be sure to take those with sight disabilities into consideration. Not all screen-reading software will properly notify a non-sighted visitor that page elements have changed!
Note
The industry best practice for non-sighted visitors and page modifications on the fly: if the modification happens further down the page from the triggering element, screen reading software will not have read to the point of modification. It is okay to modify in this way.
Modifying the page above or prior to the triggering element is not okay without sending some sort of tactile feedback to the user that the page should be refreshed.
- 中文版AutoCAD 2015實用教程
- Sphinx Search Beginner's Guide
- 中文版After Effects 2021入門教程
- Swing Extreme Testing
- Talend Open Studio Cookbook
- Midjourney AI案例實戰：繪本+動漫+插畫
- ASP.NET jQuery Cookbook
- 綁定的藝術：Maya高級角色骨骼綁定技法（第2版）
- iPad+Procreate室內設計手繪表現技法
- CMS Design Using PHP and jQuery
- The PEAR Installer Manifesto
- Photoshop CS6完美創意設計：不一樣的圖像藝術處理
- 從零開始：AutoCAD 2010中文版建筑制圖基礎培訓教程（第2版）
- Midjourney商業設計完全教程
- Professional Azure SQL Database Administration