ToFishes系列jQuery插件 – jCuteForm美化的表单插件

jCuteForm插件,针对单选、多选、下拉框的一个替代美化插件。jCuteForm实际上是3个插件的组合,可以分别拿出来使用,它们是: jRadio, jCheckbox, jSelect。

而且不同于其他一些美化插件的工作原理,是对现有的<radio />,<select />等标签进行拆解,内容再封装,生成div模拟的方式,外观定制有些繁琐,而且比较难调控。本插件跳过这几步,依旧遵循ToFishes系列插件结构,表现,行为相分离的原则,结构自定(提供的Demo使用em,a等标签,只是需要一些class等给插件提供参考点,即使是这些class也可以自定),外观由前端人员根据结构自定预先写好,之后调用jCuteForm实现功能。

jCuteForm表单美化插件预览图

继续阅读~ 评论(5)

总结自己的前端学习经验

今天给一个同事简单讲如何去把一个psd效果图实现为一个html网页。很自然的就总结出了自己是如何过来的。

应该是水到渠成了吧。从3年多前开始由 阿捷 (可惜无缘其人)的《XHTML+CSS经典重构教程》入门,很感谢他对w3c标准的推广,以致于偶从一个dw表格布局都不熟悉,直接开始了手写XHTML+css的路程。

而js方面也是,当偶2年前知道jQuery的时候,以致于偶从一个js不熟悉的情况下,直接用jQuery实现了很棒的效果。

前端暂时应该还没有大学专业课程学习的吧。而偶的成长完全是在工作中大量实践、应用起来的。

因此,偶深深的觉得:没有不会的,只有不用的。工作是最好的学习课堂。不会很多东西没关系,只要能跟随工作的需要一步步提高就行了。

学习css和jQuery,一是《XHTML+CSS经典重构教程》+CSS手册,二是来源于网络的jQuery15天教程+jQuery手册。由此,偶另外的一个经验就是:知道如何用,知道啥能用。

继续阅读~ 参与评论~

透明背景的一点研究

偶然被同事引发的研究(他在做一个透明背景,问了偶),如何设置透明背景。貌似游戏类网站最多这种应用。

透明背景可以是纯色,也可以是背景图,偶只用纯色测试了。

大概思路:由于透明会继承到子元素,从而不能达到满意效果,故写一个冗余标签p,设置背景透明,然后将其绝对定位,并置于内容层之下,达到背景透明的目的。

继续阅读~ 参与评论~

jTabView选项卡插件的简易原理版

发布了jTabView插件,看着代码好像很复杂,原理却很简单,其他的功能都是围绕这个做的扩展。

如果不需要那么复杂的功能,用起来倒是杀鸡用牛刀了,而且代码也不简洁。以下就是核心实现代码,做了一个简单tab插件。

/* 简单选项卡插件 */
;(function($){
    $.fn.TabSimple = function(c){
        c = $.extend({
            tab: ".s-tab", //标题项
            con: ".s-con", //内容项
            curr: "curr",  //当前高亮的css类名
            event: "click" //触发的事件,jQuery所支持的所有事件
        },c);
        return this.each(function(){
            var tab = $(this).find(c.tab);
            var con = $(this).find(c.con);
            tab.bind(c.event, function(){
                var i = tab.index($(this));
                tab.removeClass(c.curr); //或tab.find("." + c.curr).removeClass(c.curr)
                $(this).addClass(c.curr);
                con.hide().eq(i).show();
            });
        });
    };
})(jQuery);

HTML结构自定义了,跟ToFishes系列jQuery插件 – jTabView选项卡式浏览所述一致。

2010-10-14,Release Update V2:

;(function($){
    $.fn.jTabSimple = function(c){
        c = $.extend({
            tab: ".tabs li", //标题项
            con: ".tab-con", //内容项
            curr: "curr",  //当前高亮的css类名
            index: 1,	   //默认显示的tab
            remote: false, //远程加载
            loading: null, //自定义loading的提示html片段
            event: "click" //触发的事件,jQuery所支持的所有事件
        },c);

        return this.each(function(){
            var tab = $(this).find(c.tab);
            var con = $(this).find(c.con);
            var index = tab.index(tab.filter("." + c.curr)) + 1;
            if(index == 0)
            	index = c.index;
            tab.bind(c.event, function(){
            	var i = tab.index($(this));
            	return toggle(i);
            });
            function toggle(i){
               	tab.removeClass(c.curr).eq(i).addClass(c.curr);
            	if(c.remote){
                    var loading = c.loading ||  '<div class="loading"></div>';
                	con.html(loading);
                	$.get(tab.eq(i).find("a").attr("href"), function(ret){
                		con.html(ret);
                	});

                	return false;
                } else {
                	con.hide().eq(i).show();
                }
            };
            toggle(index - 1);
        });

    };
})(jQuery);

继续阅读~ 参与评论~

3栏布局-两侧固定宽度中间自适应宽度

早在工作中,写一些图片列表时候就有的这种感觉。怎么写的呢?一个li,里面img左浮动,其他内容不变,即可形成左侧缩略图,右侧描述信息的样子,看这个图:

左右两栏内容图例

左右两栏内容图例

结构类似于<img /> <div>introduction</div>,如果在firebug下看,可以发现div区域是包括img区域的,但是内容会环绕图片。div不设置宽度,此时div是和父级元素(li)是一样宽度的。一次偶然我随手给div加了个overflow:hidden,发现div覆盖区域适应了内容宽度,不再包含img区域了。然后用zoom:1的设置使IE也达到此效果。IE6有点瑕疵,div和img会有空白相隔。

而本文就是来源于此发现,从而很容易的实现3栏布局:两侧栏固定宽度,中间自适应宽度。无需其他说明,看代码就一切明了了。

html:

<body>
  <div class="side fl">
     左侧栏
  </div>
  <div class="main">
	<div class="side fr">
	    右侧栏
	</div>
	<div class="main">
		中间自适应
	</div>
  </div>
</body>

css:

  .fl, .fr {float:left;display:inline;}
  .fr{float:right;}

  .side {width:200px;height:500px;background:#ccc;}
  .main {height:500px;overflow:hidden;zoom:1;border:1px solid red;}

是的,就是这么简单简洁的代码,点击这里可以看到Demo

再来一个完整页面源码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>两侧固定宽度,中间自适应宽度布局</title>
    <style type="text/css">
    #left {float:left;width:200px;background:red} 
    #main, #mid {overflow:hidden;zoom:1;background:green}
    #right {float:right;width:200px;background:pink}
    </style>
</head>
<body>
    <div id="left">left</div>
    <div id="main">
        <div id="right">right</div>
        <div id="mid">center</div>
    </div>
</body>
</html>

继续阅读~ 参与评论~

linux下的文件重命名

linux下对文件重命名有两种命令: mv  ,rename

mv很简单,move文件移动

mv /dir/file1  /dir2/file1

两个参数,第一个是源文件,第二个是目的地,如果第二个参数文件名不一样,则会重命名。

当两个参数不带目录,只有文件名时,那就是重命名了。这是单个文件的重命名。

rename  arg1  arg2  arg3

rename才是真正的批量重命名命令。而且他是3个参数,不是2个。

arg1:旧的字符串

arg2:新的字符串

arg3:匹配要重命名的文件,可以使用3种通配符,*、?、[char],*表示任意多个字符,?表示单个字符,[char]匹配char单个自定的精确字符,可以填写任意字符,foo[a]*表示只匹配fooa开头的文件名,如果一个文件是foobcc.txt,是不会被匹配的。

值的注意的是,此命令在不同的linux版本也有不同,Debian一系的操作系统别有用法。举例说明:

比如/home下有两个文件 abbcc.txt, addbb.txt , a.txt

我想把a替换为xxx,命令是这样的 : rename “a” “xxx” *.txt

那么它会首先去匹配有哪些文件需要修改,这里凡是.txt后缀的文件都会被匹配,如果改成?.txt则只会匹配到一个文件,那就是a.txt。然后把匹配到的文件中的a字符替换为xxx,注意测试时abab.txt这样的,只会替换第一个a,有待再了解。

说到Debian一系的操作系统,比如Ubuntu,这个命令这样使用是不对的,报错,向下面这样的:

Bareword “a” not allowed while “strict subs” in use at (eval 1) line 1.

经过Google之后发现有这样的说法:

On Debian-based distros it takes a perl expression and a list of files. you need to would need to use:
rename ‘s/foo/foox/’ *

这里是一个perl表达式,好理解点说就是综合了前两个参数为1个,这样就只需要2个参数,而非上面所说的3个参数形式。

所以在Ubuntu下执行上面举例的重命名时,命令是这样的:rename ‘s/a/xxx/’ *.txt

由于没有深入应用,今天是群里有人问了,于是自己动手实践了一下,总结上面简单的用法,也算以备后忘吧。

继续阅读~ 参与评论~

好久没碰到过的IE6注释bug

IE6为众前端所不喜,不仅仅是功能支持很落后,还有一大堆的bug。而且,就连写个注释都能引起莫名奇妙的bug。

好久没碰到了,但是今天写了一个简单的页面,随手添了一个空的注释<!– –>,随后被复制了好几处,于是有了好几个空的注释。结果发现问题了。

1、好大一个空白间距。如同插入了一个水平的空白行,30px那么高。

2、文字被复制溢出(呃。。。想不起叫什么名字了),就是在容器之外,明明没有边框,没有文字的地方,出现了容器内容里的文字。

往往这些问题发生在有浮动的元素情况下。而注释为空或不为空都会偶尔发生这些bug。貌似空的注释更容易出现。

另记一个注释引起的问题。IE6要使用png24透明图片,借助一个js:DD_belatedPNG_0.0.8a-min.js,那么有时在应用了透明的元素旁边写了一些注释,会出现意料外的情况,貌似那次是元素位置歪了吧,去掉注释就ok了。

总结:ie6很多问题,字体大小,行高,高度,浮动,注释。。。这些皆可以成为原因,也可以成为解决的方法。


继续阅读~ 参与评论~

ToFishes系列jQuery插件 – jTabView选项卡式浏览

网上有不少jQuery的选项卡插件,官方的tab貌似也不错,但用来用去哪有自己写的顺手。

该插件实际使用于公司旗下网站 – 易扑网(eapoo.com), 在网站开发过程中编写,同时扩展了不少功能。

本插件遵循 结构、表现、行为 相分离的原则,所以,html结构与css样式(决定UI)请自己决定。

jTabView选项卡式浏览插件截图

继续阅读~ 评论(2)

1 2 22 23 24 25 26 27 28

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(51)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(33)移动开发(4)自然(22)