关注F2E-UED-SEO

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

八月 19th, 2011 by jxwinter, under Javascript.

一杯茶的功夫…原来部门的两位同事离职了…
原来的小业务部门也散了…
正所谓物事人非…
好吧不提这些往事…
今天分享的是mootools的switchable效果，这些效果我一个月以前已经整理好放到了ShopEx官方的wiki上…
现在就同步到我的私人blog里。

先说一下引用switchable的方法：（switchable基于Mootools1.3版本以上）

1.完成html+css代码的编写，依次加入mootools.js和switchable.js，注意先后顺序
2.最外层的父元素必须声明类名class为”Auto_Widget”!!!
3.在外层的父元素上写上属性data-widget-type,选择效果名称,例如Tabs,Switchable,Accordion,Popup
4.如有必要,在外层的父元素上写上属性data-widget-config,选择你想要的参数配置实现不同的效果。

下面放出各种效果：
具体的各种效果引用方法和参数配置，请点击这里。
全部实例打包下载，请点击这里。

一、Slide卡盘效果
数字图片轮播文字图片轮播大图小图轮播滚动公告
二、Tab标签页效果
简单的Tab标签页标签页延迟展示 3
三、Accordion手风琴效果
手风琴效果手风琴-支持多面板展开基础的在线客服效果
四、Carousel旋转木马效果
点击上下滚动一组内容点击文字左右滚动点击图片左右滚动
五、Popup 弹出层效果
弹出层原理剖析实例竖向弹出菜单实例
六、Lazyload 延迟加载机制
延迟加载实例展示
七、倒计时效果
倒计时实例一倒计时实例二经典团购流程实例

Tagged with Download, Mootools, switchable, 前端优化, 弹出层, 控制滚动.

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

八月 15th, 2011 by jxwinter, under Javascript.

前段时间在Tbu压力较大，现在已经调入UED两个月了，上周同事好奇的在google里随便那么一搜 ShopEx UED，赫然发现我的blog居然排名第三，亢奋之激情立马溢于言表…哈哈哈哈！
前面很久没写blog了，我将努力改掉这个坏习惯！

今天随便写点：
在制作ShopEx挂件时，经常需要用到不同的模板页，配置菜单需要显示隐藏对应的模板页面参数配置：
简单的分享一些基础的mootools判断隐藏显示代码：

$$('.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插件jCarousel图片滚动切换（带按钮） (17)

九月 2nd, 2010 by jxwinter, under Javascript.

jCarousel是一款JQuery 插件，用来控制水平或垂直排列的列表项. 这些项目（可以是静态HTML内容或是Ajax加载内容）内容是可以来回滚动的（可以有动画效果）。

相关配置文件和一些基本介绍：请点击这里查看
废话不多说,上效果：
Demo:

简单的拿example举例： —-含外部控制的滚动切换

jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null   //注意这里不能带标点符号 兼容(IE)
    });
});

这里非常需要注意的一点是：
配置的参数的最后1个不能带有逗号或者是分号！否则IE下是会显示JS报错！从而导致JS失效！

Example里的一些东西都可以经过修改转成各种效果，很实用！
这里提供了打包下载！欢迎分享！

Tagged with Download, Jquery, 控制滚动.

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模仿select下拉框效果！用到slideToggle和animate (4)

八月 17th, 2010 by jxwinter, under Javascript.

不多说，先看效果：点击这里查看演示 | 点击这里下载实例

关键Js代码：

$(function(){
	  $(".select_list li:odd").addClass("currert");
	  $("#menuClick").click(function(){
		$("#vMenuList").slideToggle();
		return false;
	  });
	  $(".select_list > li > a").hover(function(){
		  $(this).animate({
			paddingLeft: 20
		  },100);
	      },function(){
		  $(this).animate({
			paddingLeft: 5
		  },50);
	 });
});

解释一下：

 $(".select_list li:odd").addClass("currert");

获取class=”select_list”下的li的偶数行给其添加class=”currert”,同时定义currert的样式，起到隔行换色的效果

$("#menuClick").click(function(){
		$("#vMenuList").slideToggle();
		return false;
	});

获取id=”menuClick” 通过鼠标点击触发事件，触发id为vMenuList的sildsToggle的事件。
这段才是下拉框或者是下拉菜单的核心代码！！

$(".select_list > li > a").hover(function(){
		$(this).animate({
			paddingLeft: 20
		},100);
	},function(){
		$(this).animate({
			paddingLeft: 5
		},50);
	});

这一段是鼠标下拉框的触发水平移动事件：
获取class=”select_list”下的子元素li的子元素a，当鼠标放上（hover）触发：animate事件，左边内边距20px;时间100ms(0.1秒)，当鼠标移开的时候再次触发animate事件，左边内边距5px;时间50ms(0.05秒)。

Tagged with Jquery.

简单的三种Jquery下拉菜单 (2)

八月 11th, 2010 by jxwinter, under Javascript.

鼠标划过显示菜单, 离开隐藏菜单, 没有能比这个跟简单的了.

jQuery(document).ready(function(){
	// 找到所有菜单, 并添加显示和隐藏菜单事件
	jQuery('#menus > li').each(function(){
		jQuery(this).hover(
			// 显示菜单
			function(){
				jQuery(this).find('ul:eq(0)').show();
			},
			// 隐藏菜单
			function(){
				jQuery(this).find('ul:eq(0)').hide();
		});
	});
});

点击这里查看Demo演示

————————————————————————————————————————
淡出淡入导航菜单，需要注意的是，这里需要加入延迟处理！

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];

jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
			// 取消淡出菜单的线程, 延时淡入菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeIn(200);
				}, 400);
			},
			// 取消淡入菜单的线程, 延时淡出菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeOut(200);
				}, 400);
			});
	});
});

点击这里查看Demo演示

——————————————————————————————————————-

鼠标悬停显示滚动展开菜单, 离开滚动卷起菜单. 需要加上延迟处理, 原因同淡出淡入导航菜单的处理.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];

jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(

			// 取消卷起菜单的线程, 延时展开菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideDown(200);
				}, 400);
			},

			// 取消展开菜单的线程, 延时卷起菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideUp(200);
				}, 400);
			}

		);
	});
});

点击这里查看Demo演示

Tagged with Jquery.

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

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

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

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

Mootools中文手册在线查看地址

Tagged with Jquery, Mootools.

基于Jquery的lightbox插件 (0)

七月 27th, 2010 by jxwinter, under Javascript.

Jquery的lightbox插件非常强大，而且支持自定义属性，便于修改！
强烈推荐！！

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>
<script type="text/javascript">
$(function(){
	$.Lightbox.construct({
		show_linkback: false,               /* 不显示右上角的方向链接 */
		opacity:0.6,                        /* 背景透明度60% */
		auto_resize:false,                  /* 不限制图片大小 */
	});
});
</script>

Demo连接地址：
点击这里查看参数点击这里效果演示

Demo下载地址：
点击这里下载相关文档

Tagged with Download, Jquery, lightbox.

Jquery控制相应的图片替换文字 (0)

七月 12th, 2010 by jxwinter, under Javascript.

上周用Dedecms做了店掌柜的官方站点，
中间有一个环节用Jquery获取淘宝店铺信用的图片，来替换Dedecms字段输出的值。

for(var i=0;i<$('.taolevel').length;i++){
     if($('.taolevel').eq(i).text()=='一钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_1.gif />') }
     if($('.taolevel').eq(i).text()=='二钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_2.gif />') }
     if($('.taolevel').eq(i).text()=='三钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_3.gif />') }
     if($('.taolevel').eq(i).text()=='四钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_4.gif />') }
     if($('.taolevel').eq(i).text()=='五钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_5.gif />') }
     if($('.taolevel').eq(i).text()=='一皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_1.gif />') }
     if($('.taolevel').eq(i).text()=='二皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_2.gif />') }
     if($('.taolevel').eq(i).text()=='三皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_3.gif />') }
     if($('.taolevel').eq(i).text()=='四皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_4.gif />') }
     if($('.taolevel').eq(i).text()=='五皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_5.gif />') }
     if($('.taolevel').eq(i).text()=='一金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_1.gif />') }
     if($('.taolevel').eq(i).text()=='二金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_2.gif />') }
     if($('.taolevel').eq(i).text()=='三金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_3.gif />') }
     if($('.taolevel').eq(i).text()=='四金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_4.gif />') }
     if($('.taolevel').eq(i).text()=='五金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_5.gif />') }
     if($('.taolevel').eq(i).text()=='商城'){
     $('.taolevel').eq(i).html('<img src=http://www.shopex.cn/images/mall.gif />') }
  };

原理：所有均只运行1次即跳出循环，
如果class为taolevel的标签下的文字全等于“店铺信用”
则用对应的图片的html代码来替换当前的文字

Tagged with Dedecms, Jquery.

Jxwinter's Blog 肖邦的悲伤

Archive for 'Javascript'

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

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

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

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

Gezhi同学一手编写的Switchable……

超级简单的代码套用……

Jquery插件jCarousel图片滚动切换（带按钮） (17)

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

使用Jquery模仿select下拉框效果！用到slideToggle和animate (4)

简单的三种Jquery下拉菜单 (2)

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

基于Jquery的lightbox插件 (0)

Jquery控制相应的图片替换文字 (0)

« Older Entries

分类目录

功能

最近文章

最近评论

链接表

2012年二月
一	二	三	四	五	六	日
« 一
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29