关注F2E-UED-SEO

$$('.widgetconfig select').addEvent('change',function(e){
if(this.value=='default.html'){
	$$('.widgetconfig1')[0].show();
	$$('.widgetconfig1')[1].hide();
}else{
	$$('.widgetconfig1')[0].hide();
	$$('.widgetconfig1')[1].show();
}
});

用Mootools的class选择器，选中某个select框，
判断他的值如果是default.html的话
第一个含有class=“widgetconfig1”的元素显示，第二个隐藏
如果不是default.html的话
第一个含有class=“widgetconfig1”的元素隐藏，第二个显示

Tagged with Mootools, 前端优化.

基于Mootools的Lazyload,连同ShopEx前端团队JS-FRAMEWORK-switchable奉上 (5)

五月 13th, 2011 by jxwinter, under Javascript.

ShopEx前端团队一直引以为傲的Mootools……

Gezhi同学一手编写的Switchable……

超级简单的代码套用……

看疗效：猛烈点击这里，注意旁边滚动条的长度！！！，同时可以通过firebug查看“被lazy”的代码！

关键代码分析：

<script src="mootools-1.2.4-core.js" type="text/javascript"></script>
<script src="switchable.js" type="text/javascript" ></script>

注意这里的2个Js的先后顺序，先插mootools再插swithable!

<textarea class="textarea-lazyload-block">
    需要加载的内容.......
</textarea>

在textarea的标签内，插入需要延迟加载的内容.
接下来，需要在页面的底部-的前面加入：

<script>
    new DataLazyLoad({textarea:'textarea-lazyload-block'});
</script>

只要你拥有这些简单的套用，复杂的lazyload迎刃而解！
点击这里下载mootools-lazyload文件包

Tagged with Download, Mootools, switchable, 前端优化.

Jquery和Mootools的回顶部效果！ (3)

八月 31st, 2010 by jxwinter, under Javascript.

淘布斯网站需要做一个回顶部的简单效果，mootools功能强大可以直接往上写，而Jquery简练，需要挂一个简单的小插件。
点击这里查看Mootools的回顶部Demo
先发下Mootools的写法点击下载实例

window.addEvent('domready',function(){
       $('gotop').inject(document.body).addEvent('click',function(){
		   new Fx.Scroll(window,{link:'cancel'}).toTop();
	   }).setOpacity(.8);
	   this.addEvent('scroll',function(){
	        if(window.getScrollTop()>100){
		    $('gotop').setStyle('top',window.getSize().y + window.getScrollTop() - $('gotop').getSize().y).show();
	       }else{
		      $('gotop').hide();
		   }
	   });
   });

ID为gotop点击触发事件，当页面是最顶部的时候，按钮隐藏，不过按钮的定位需要CSS绝对定位在某一位置

———————–

Jquery的写法则更为简单，直接挂上插件就可以使用！
不过在scrolltopcontrol.js的配置的参数信息需要配置正确
点击这里查看Jquery的回顶部Demo
下面是关键代码配置参数点击这里下载实例

    /*startline: 鼠标向下滚动了100px后出现#topcontrol*/
	/*scrollto: 它的值可以是整数，也可以是一个id标记。若为整数（假设为n），则滑动到距离
                    top的n像素处；若为id标记，则滑动到该id标记所在的同等高处*/
	/*scrollduration:滑动的速度*/
	/*fadeduration:#topcontrol这个div的淡入淡出速度，第一个参数为淡入速度，第二个参数
                    为淡出速度*/
	/*controlHTML:控制向上滑动的，默认为<img src="up.png" style="width:48px;
                    height:48px" />，可以自行更改。该处的html代码会被包含在一个id标记
                    为#topcontrol的div中。*/
	/*controlattrs:控制#topcontrol这个div距离右下角的像素距离*/
	/*anchorkeyword:滑动到的id标签*/
	/*state: isvisible:是否#topcontrol这个div为可见
		 shouldvisible:是否#topcontrol这个div该出现*/

    setting:{startline:1,scrollto:0,scrollduration:1000 fadeduration:[500, 100]},
	controlHTML: '<img src="up.png" style="width:24px; height:24px" />',
	controlattrs: {offsetx:5, offsety:5},
	anchorkeyword: '#top',
	state: {isvisible:false, shouldvisible:false},

Tagged with Download, Jquery, Mootools.

Jquery/Mootools 中文手册|参考文档 (0)

八月 3rd, 2010 by jxwinter, under Javascript.

仍个Jquery中文手册到自己Blog上，方便查查!
Jquery中文手册在线查看地址

由Zarknight 编译完成的Mootools中文手册，有幸在Google下到，争取把它变成自己的！！

Mootools中文手册在线查看地址

Tagged with Jquery, Mootools.

基于mootools框架的弹出层定位居中与关闭! (1)

三月 5th, 2010 by jxwinter, under Javascript.

首先这段代码是基于mootools框架的
原理是绝对定位弹出框这个层
然后通过mootools判断浏览器的宽度减去层的宽度再除以2
就是该层距浏览器左边的距离。
代码如下：（层的id=”popy_window”）

<script  type="text/javascript">
var popywindowWidth=$('popy_window').getSize().x
var allwindowWidth=window.getSize().x
var popywindowXposition=(allwindowWidth-popywindowWidth)/2
$('popy_window').setStyle('left',popywindowXposition);
</script>

这样就定义了绝对定位层的水平居中（垂直方面自己设定就行了）

关闭原理：
判断click事件触发,给层的CSS加入display:none;
代码如下：

<script  type="text/javascript">
$E('#popy_window .colsed_top').addEvent('click',function(e){
$('popy_window').setStyle('display','none');
});
</script>

Tagged with Mootools, 弹出层.

解决hover在IE6下非li标签上的伪类 (0)

一月 21st, 2010 by jxwinter, under Javascript.

解决hover在IE6下非li标签上的伪类：
实现方案原理：
通过变换思维，给非li标签onmouseover的状态加上一个class
这个class就是hover的样式，然后鼠标移开再去掉这个class
网友anonymous提供的解决方案：

function hover(id,tag,cname) {
   var id= document.getElementById(id);
   var tags = id.getElementsByTagName(tag);
   for(var i=0;i<tags.length;i++) {
       tags[i].onmouseover= function() {
           this.className +="" + cname;
       }
       tags[i].onmouseout= function() {
           this.className = this.className.replace(cname,'');
       }
    }
}
hover("id","tag","cname")

————————————————
第一种方法是纯手写JS实现
第二中方法是基于mootools框架写的js，其原理是一样的

代码如下：

window.addEvent('domready',function(){
    $ES('#Menu span').addEvents({
        'mouseover':function(e){
               this.addClass('now');
         },
        'mouseout':function(e){
              if(this.hasClass('now'))
              this.removeClass('now');
              };
         });
});

#Menu是ID,span是tag,now是class

Tagged with IE6, Mootools, 伪类, 原生JS.

Jxwinter's Blog 肖邦的悲伤

Tag Archives: Mootools

Mootools的Switchable功能效果展示下载 (3)

ShopEx模板开发手册之九阳神功 (0)

简单的ShopEx挂件选择框联动隐藏 (0)