xHtml instance with jQuery: Willin-Page

Description

WillinPage说明

简介：

WillinPage是一个简单的静态网站，介绍了Willin OR Guy（长岛冰泪个人博客）和Willin Studio。

整站共7个静态页面，符合W3C xhtml 1.0规范，加入了CSS3元素（IE只支持到CSS 2.1）。运用jQuery代码实现了整站AJAX。

演示截图

在线演示：DEMO

说明：

1. IE下需要允许脚本或ActiveX控件。
2. 顶部导航栏红色表示当前的页面，点击无效。
3. 因为IE6下，自动切换jQuery效果不如Flash，但是网上仍有近30%的人在使用IE6，所以首页幻灯设置为鼠标滑过切换。放弃IE这个世界该会多么美好。IE下会显示抱怨信息，点击后隐藏。

下载地址：源代码 / 备用地址

Core Codex

1. Ajax Module Code of jQuery:

//全局Ajax函数

$("#loading").ajaxStart(function(){
 
$(this).fadeIn('fast');
 
$('#ajaxpost').hide(0);
 
});
 
$("#loading").ajaxStart(function(){
 
$(this).fadeOut(100);
 
$('#ajaxpost').fadeIn(1000);
 
});
 
$('.homelink').click(function(){
 
if($(this).parent('li').is('.current_page_item')) return false;
 
$.ajax({
 
url: "html/home.html",
 
cache: false,
 
success: function(msg){
 
$("#ajaxpost").html(msg);
 
$.getScript("js/willin-tab.js");
 
}});
 
$('li.current_page_item').removeClass('current_page_item');
 
$('.homelink').parent('li').addClass('current_page_item');
 
return false;
 
});

1. CSS of Willin-Tab:

#msgbox ul{padding-left:5px}
 
#msgbox-left{border:1px dashed #ccf; display:block; float:left; height:205px; overflow:hidden; position:relative; width:33%}
 
#msgbox-right{border:1px dashed #ccf; display:block; float:right; height:205px; overflow:hidden; position:relative; width:66%}
 
#msgtabup,#msgtabdown{padding:1px; width:100%}
 
#msgtabdown{bottom:0; float:right; position:absolute; right:0; width:auto; z-index:999}
 
#msgtabdown img{border:0; margin-right:5px}
 
#msgtabdown img.current{border:1px dashed #f06!important; color:#f06}
 
#msgspan{bottom:24px; color:#f06; display:inline-block; height:20px; position:absolute; right:5px; z-index:999; background:#fff; opacity:0.8}
 
.msgtab{display:none; width:99%}
 
.msgtab span{color:#099; font-style:italic}
 
.msgtab li{background:url(img/lim.gif) no-repeat center left; padding-left:15px !important; margin-top:3px !important; font-size:12px !important;}
 
#msgbox-left li { padding-left:15px !important; margin-top:5px !important; background: url(img/lil.gif) no-repeat center left !important;}
 
.msgtitle{border-bottom:1px dashed #ccf; color:#f06; padding-left:5px; vertical-align:middle; width:100%}
 
.msgtitle img{cursor:pointer; margin-right:5px; vertical-align:middle}

1. Willin-Tab of jQuery:

jQuery(document).ready(function($){
 
$('.msgtab:first').css('display','block');
 
$('#msgtabs-1').addClass('current');
 
$('#msgspan').text($('#msgtabs-1').attr('alt'));
 
var i=0;
 
function slide(i){
 
$('#msgtabdown img').removeClass('current');
 
$('#msgtabs-'+i).addClass('current');
 
$('#msgspan').text($('#msgtabs-'+i).attr('alt'));
 
$('.msgtab').stop(true,true).slideUp();
 
$('#msgtab-'+i).stop(true,true).slideDown();
 
}
 
$('#msgtabdown img').hover(
 
function () {
 
i = $(this).prevAll().length+1;
 
slide(i);
 
},function () {
 
}
 
);
 
});

相关日志

• C#猴子选大王-单向循环链表算法 (0)
• C#单链表通讯录1.1 (4)
• Additional Learning on website1论文 (4)
• Working For Life (13)
• Recall Monash (0)
• 重庆一父亲送子高考归来途中被天降钢管砸死 (6)
• jQuery会自动切换的Tab选项卡Willin-Tab (3)
• jQuery美妙的标题提示加强版 (0)
• PR从1直接跳4，长岛冰泪谈谈SEO心得 (16)
• jQuery折腾一下我的WordPress (1)

玩法说明：

当玩家单击一张牌时，这张牌翻过来，显示3秒钟，如果3秒内没有翻开第二张牌，第一张牌就会翻回去。在3秒内，当玩家单击第二张牌时，第二张牌也会翻过来。如果揭开的两张牌相同，则这两张牌从游戏板上消失。如果不相同，这两张牌同时翻回去。直到所有的牌全部消失，游戏结束。

一键安装程序：MemorizeSetup.zip 4.31 MB
完整安装程序：MeWsetup.zip 1.12 MB

相关日志

• C#谷歌Google Adsense、阿里妈妈Alimama广告插件dll库1.0 (2)
• Additional Learning on website2论文 (7)
• Gagabux轻松日赚1美元 (18)
• 收到GagaBux的第一笔付款 (16)
• 从准备到数钱·零成本博客网赚BloggerAds全攻略 (0)
• Google Cash中文版、英文版电子书下载 (0)
• Google Adsense 如何增加点击率 (5)
• Additional Learning on website1论文 (4)

— A Simple Useful Tutorial for Webhosting

（节选）

Definition

       Linux: a free Unix-type operating system originally created by Linus Torvalds with the assistance of developers around the world.

SSH: Secure Shell

PHP: Hypertext Preprocessor

Q&A

1. Is Linux Interface Graphical User Interface?
   No, Linux is like MS-DOS. You need to type in commands to complete operation.
2. Then, why so many people choose Linux?
   Linux is open-source. Besides, it runs fast, stable and saves hard device resources.
3. How can a computer with Linux OS be a webhosting server?
   The common environment is LAMP: Linux + Apache + MySQL + PHP.
4. What is the hosting service in this tutorial?
   DreamHost, or “DH” for short. (Visit my blog willin.org for detail)
5. Where can I get a LAMP web hosting server?
   www.Wiwill.com (for Chinese).
6. What does “php.ini” do?
   This file controls many aspects of PHP’s behavior.

Overview

This term I’ve got a brief understanding of Linux from www.niit.com.cn/students. Coincidently, I have great interests in web developing and my website hosting server is Linux Operating System. So, I have further learned Linux especially remote server technology on webhosting.

DreamHost default setting of maximum allowed size for uploaded files is only 7MB, and I can’t even upload a short video. After learned about Linux, I have tried to revise my PHP configuration. And I made it after trying a lot.

In this tutorial, I use my DH web server as an example. Of course, for almost every Linux web server, it won’t be no use if you follow my instructions step by step.

Notice:

Don’t make change if you don’t know how it behaves.

If your website server is under safe mode, do not make any change and it won’t perform well. If not, don’t run your it in safe mode unless unexpected occasions.

Warning:

       If your hosting is in DH, you must know that: DH sharing servers do not accept Debug Mode. In season and out of season, once you make it to Debug Mode, your website will be shut down immediately and your file will be deleted for good.

Topic

1. To adapt your own php configuration, we need a SSH account first. If you already have one, skip this step.
   Login in DreamHost Web Panel (http://panel.dramhost.com).
   Choose “Users – Manage Users”, choose one to edit.
   Find “User Account Type” and tick “Shell account – allows SFTP/FTP plus ssh access”.
   Save changes.
2. Download PuTTY (a SSH client software), run PuTTYPortable.exe
   (You can find it easily from Google.com)
   
   Type FTP address in “Host Name(or IP address)”
   Port use “22” if failure, change it for “21”.
   Type in a name or click “Save” directly.
3. Click “Open”. Type in your Username and Password.
   Notice:
   No “*” when you typing in your password.
   If you login in successfully, you will see the interface showing “login as: ****” like this snapshot.
   Else you have to try it again.
   
4. Type in the command: mkdir $HOME/example.com/cgi-bin↙
   (Make a new cgi-bin fold under your domain root.)
   Notice:
   i. Replace example.com of your domain name.
   ii. “↙” means Enter.
   Same in the below.
5. Type in: cp /etc/php5/cgi/php.ini $HOME/example.com/cgi-bin/php.ini↙
   (Copy your old php.ini to your website category.)
6. Type in: cat << EOF > $HOME/example.com/cgi-bin/php-wrapper.cgi↙
   #!/bin/sh↙
   exec /dh/cgi-system/php5.cgi $*↙
   EOF↙
7. (Adapt CGI configuration. DreamHost uses FastCGI & PHP.)
8. Set properties of categories and files (or skip this step and use FTP client such as FlashFTP or CuteFTP to complete it). Type in:
   chmod 755 $HOME/example.com/cgi-bin↙
   chmod 755 $HOME/example.com/cgi-bin/php-wrapper.cgi↙
   chmod 640 $HOME/example.com/cgi-bin/php.ini↙
9. Type in: exit↙ and then close the SSH client.
10. Create the .htaccess file:
    Create a text and save as “.htaccess” with notepad. And upload it to your website root fold. (EditPlus Editor recommended)
    The content of “.htaccess” file:
    Options +ExecCGI
    AddHandler php5-cgi .php
    Action php-cgi /cgi-bin/php-wrapper.cgi
    Action php5-cgi /cgi-bin/php-wrapper.cgi
    If there is already one existing, copy and paste it to the top.
11.  Upload php.ini to your website cgi-bin fold and finish the configuration.

相关日志

• Additional Learning on website2论文 (7)
• Working For Life (13)
• C#猴子选大王-单向循环链表算法 (0)
• C#单链表通讯录1.1 (4)
• Recall Monash (0)
• 重庆一父亲送子高考归来途中被天降钢管砸死 (6)
• jQuery会自动切换的Tab选项卡Willin-Tab (3)
• jQuery美妙的标题提示加强版 (0)
• PR从1直接跳4，长岛冰泪谈谈SEO心得 (16)
• jQuery折腾一下我的WordPress (1)