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)

WordPress改造记录

安装了wp,但是很多地方不足以满足需求,记录一下自己的改造部分。

1、代码高亮

做这行工作怎能没有代码,高亮就是第一步想要实现的。
使用Google SyntaxHighlighter高亮插件,直接在添加插件页面搜索即可,然后安装。有Usage页面链接到http://code.google.com/p/syntaxhighlighter/wiki/Usage,看了一下,两种定义方式,使用pre或textarea标签:

<pre name="code" class="c-sharp">
... some code here ...
</pre>
Or
<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

另外希望编辑器上有个按钮,点击插入源码功能。这个自然应该是涉及到TinyMCE工具栏定制,遂搜索了一下有关代码高亮的内容(本以为这个插件安装后自动有这个功能。。原来是要手动编辑html)。这时发现了一篇说“Google Syntax Highlighter 与WordPress – tinyMCE 的兼容性”, 原来pre标签插入是有问题的,pre的name属性在编辑器的“可视化”与“HTML”方式切换的时候,会将name属性去掉,因为xhtml里name不是pre的标准属性。于是测试了一下textarea标签,发现转换以后,源码的换行会被转为<br />显示在文本域中。。。不尽人意啊。于是按那篇博客所说的方法改造了一下。

在 wp-admin/includes/post.php 里面,搜素到$initArray变量的赋值行,在最后添加一个值:

'extended_valid_elements' => "pre[name|class]"
注:如果你是新手或不懂代码,没看懂以上简略的引用,就去看引用页面吧(上面加了链接的),比较详细。

这个意思看着就明白,额外的有效元素pre拥有有效的属性name和class。这样在编辑器两种编辑模式下转换,就不会丢失name属性了。

编辑器代码插入按钮还在研究ing…

2010-8-16注:今天找到了一个新插件:Auto SyntaxHighlighter,安装以后编辑器就可以拥有插入代码功能了,试了一下,浏览器查看源码发现跟Google SyntaxHighlighter高亮插件有重复的文件引用,所以保留一个插件就可以了。可以在安装新插件的页面搜索:Auto SyntaxHighlighter即可。截图:

继续阅读~ 评论(2)

VPS折腾手记

从淘宝买了vps,昨日晚上账号到手,折腾到凌晨2点,之后今天又继续折腾到现在,总算服务器+blog+ftp折腾完毕。

Apache2主要是设置虚拟主机,因为本服务承载了两个人的blog;blog则是权限问题(文件上传需要读写) ,ftp是完全安装配置。

主机是Ubuntu10.04系统。默认安装有Apache2,Mysql,其他则无。使用Xshell登录SSH。

配置Apache2的虚拟主机,修改/ect/apache2/httpd.conf (默认是空文件的),直接添加

NameVirtualHost ip
<VirtualHost ip>
ServerName www.cssor.com
DocumentRoot /docroot
<Directory “/docroot”>
Options FollowSymLinks
AllowOverride None
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

<VirtualHost ip>
ServerName 域名2
DocumentRoot /docroot2
<Directory “/docroot2″>
Options FollowSymLinks
AllowOverride None
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

这里也折腾了不少,开始是没配置directory标签,出了个警告,赶紧加上,接着是没配置 NameVirtualHost,又是警告,

然后NameVirtualHost偶配置了多个,还是警告,才知道NameVirtualHost配置一个就够了,后面跟着ip就行了。这样两个域名都ok了。

Apache2的管理命令:

$root: /etc/init.d/apache2 restart  //重启

$root: /etc/init.d/apache2 stop //停止,换成start是启动

编辑配置文件是vi /etc/apache2/httpd.conf

以上Apache是配置ok了。然后为了方便上传,安装了ftp服务器(如果是一个人,可以用Xftp以Sftp的方式管理),使用vsftpd。

$root: apt-get install vsftpd

一路安装下来,最后是配置:

vi  /etc/vsftpd.conf

去掉了一些原有语句的注释:

#本地用户可用
local_enable=YES
#加点banner提示
ftpd_banner=Hello~~
#不让匿名访问
anonymous_enable=NO
#按推荐的来
local_umask=022
#启动chroot列表(Change root)
chroot_list_enable=YES
#锁定ftp根目录,不让向上访问
local_root=/home

#使用用户列表文件
userlist_enable=YES
#用户列表没有定义的用户不能访问ftp
userlist_deny=NO
write_enable=YES #开启可写,这个配置 郁闷了,刚配置时没有加上,导致ftp可以访问了,但是愣是不能上传,又折腾一会儿,看到有资料提及此配置。

上面开启了用户列表文件,那么就需要配置一下了:

vi /etc/vsftpd.user_list

加入几个用户名,比如

user1
user2 #每行一个用户名

:wq保存退出即可。然后在系统中添加用户: useradd user1 ; useradd user2; 分别设置密码: passwd user1; passwd user2;。

接下来配置blog,上传wp程序到Apache配置的虚拟主机对应的目录去。然后访问域名,出现安装页面。这里忘了要说一下,VPS系统默认安装有Mysql数据库,用户名是root,默认密码空

blog安装出现wp-config.php无法写入问题,及之后博客上传主题文件(忘了这里也是需要ftp的,wp为虾米这么弄,http上传下载也可以撒)等无法写入,连ftp也是无法写入的。

于是权限的设置郁闷了一下。这里不得不说,有两个命令,有些相似,不常用就弄混了。

文件所属命令 chown,和 权限设置命令 chmod ,(change owner, change mode)

可以想象到了,偶把chomd用成了chown,结果发现依然存在权限问题。。。郁闷啊。新手,直接根目录统统的 777 权限。

chown -R 777 /home/user1 #杯具的只是改了所属用户而已。777可以替换为用户名,比如 chown -R user1 /home/user1, -R会递归子文件

chmod u+w+r+x /home/user1 # 这才真正的解决权限问题,u 与文件属主拥有一样的权限,刚刚chown了,那么u指所有用户(777)或user1, +赋予权限,-删除权限,w写,r读,x执行

另外apt-get install phpmyadmin用于管理mysql 。

简略手记完毕。

补充:真伤心,修改固定链接以后,全部404,遂搜索半天,虚拟主机里配置Directory里的 AllowOverride All,.htaccess文件权限修改了,不行,去看Apache2的配置,哎,Ubuntu自带的Apache2配置太乱了,找不到地方,后来才看到/etc/apache2/mods-available/rewrite.load文件里一句话:LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so

而/etc/apache2/apache2.conf里没有包含mods-available文件夹下的任何文件,只好把这句话又写入到httpd.conf,

这样总算是好了。

继续阅读~ 参与评论~

1 2 22 23 24 25 26 27

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