当前位置：文江博客话题详情

基于mootools1.3创意模仿表单

发布于 2022-10-15 08:42:36 字数 4618 浏览 21 评论 0

转：!nothing

基于mootools1.3创意模仿表单

HTML代码:

<div class="slider">
<label>Name</label><input type="text" />
</div>
<div class="slider">
<label>Street</label><input type="text" />
</div>
<div class="slider">
<label>E-mail</label><input type="text" />
</div>

复制代码CSS代码:注意div.slider相对定位,label改为块级元素,绝对定位.这样通过改变label的left属性，实现效果.

*{margin:0;padding:0;
font-family: sans-serif,微软雅黑,Microsoft YaHei,Helvetica,Tahoma,StSun,宋体,SimSun;line-height: 1.5em;font-size: 14px;}
.slider{position:relative;margin:0 0 10px 50px;}
div.slider label{position:absolute;display:block;margin:1px 0 0 2px;padding:2px;}
input[type="text"] { width:300px; border:1px solid #999; padding:5px; -moz-border-radius:4px;border-radius:4px;-webkit-border-radius:4px; }
input[type="text"]:focus { border-color:#777; }

复制代码JS代码:JS也没什么注意的了，大概就是循环添加事件而已.

<script type="text/javascript">
var labelSlider = {
data: {
tween: {
property: "left",
duration: 300
},
set: -50
},
start: function () {
this.divContainers = $("div.slider");
for (var i = 0; i < this.divContainers.length; i++) {
this.divContainers[i].getElement("label").set("tween", this.data.tween);
this.divContainers[i].getElement("input").addEvents({
focus: this.left.bind(this, [i]),
blur: this.goback.bind(this, [i])
});
}
},
left: function (at) {
this.divContainers[at].getElement("label").get("tween").start(this.data.set);
},
goback: function (at) {
if (this.divContainers[at].getElement("input").value == "") {
this.divContainers[at].getElement("label").get("tween").start(0);
}
} };
labelSlider.start();
</script>

复制代码学校的时光还是那么无聊，还要多久才能走出这个悲剧的环境.
等下一站天亮吧！

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风来 2022-10-22 08:42:36

＄＄转义成了＄　搞得我以为程序有问题

回复收藏 0

风渺 2022-10-22 08:42:36

jquery 美工专用
mootools　程序员专用
yui团队开发专用
prototype老程序员专用

回复收藏 0

触ぅ动初心 2022-10-22 08:42:36

楼主对mt熟悉吗，mt有类似jquery的show,toggle方法吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style type="text/css">
#msg{
background:orange;
display:none;
}
</style>
<script type="text/javascript" src="../mootools.core.js"></script>
</head>
<body>
<div id="msg">
look look</div>
<button id="btn"> click </button>
<script type="text/javascript">
$("btn").addEvent('click',function(e){
$("msg").show(); //same as
//$("msg").setStyle('display', 'block');
//$("msg").toggle();
});
</script>
</body>
</html>

复制代码按照下面的的例子试了一下mt的show，好象也不行
http://www.clientcide.com/wiki/c ... 5-element.shortcuts

这是show方法的说明　

Element.hide(), .show

Element.hide() will set an element's display to 'none'.

Element.show() will set it back to what it was before you hid it (inline, block, etc.) or, if you didn't call .hide() on it previously it defaults to 'block'. You can specify what to set the display to by passing that in (Element.show('block') or Element.show('inline'));

These are just shortcuts for Element.setStyle('display', 'block').

既然说show是setStyle('display', 'block').的快捷方式，为什么setStyle('display', 'block').有效而　show无效呢

回复收藏 0

~没有更多了~