小芳个人博客

栏目导航

首页 >> 前端设计

HTML5 圆角

在文章之前发个自己几句代码搞定的一个东东。。。

代码就是：

button{

font-size:16px;

height:30px;

width:80px;

border-radius:15px;

background-color:fang_333;

color:fang_FFFFFF;

}</style>

<p>

CSS3+HTML5很神奇的东西

在CSS3里面有大量的对对象进行圆角描述，透明描述，颜色滤镜，动画描述等等，很多以前用PS，flash才能干到的事情到现在只要用html+css就可以搞定。

使用CSS+html代码实现图片，flash能干的事情有很大的意义的，我们都知道，图片，动画是需要占用大量的带宽的。也许你会说我的带宽足够，不担心打不开网页，但是你想过没有，中国普遍网速慢，再说了，从服务器角度出发，节省IO开销，网络开销义不容辞...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.wwww{
    padding:30px 20px 34px 50px;

    text-align:center; color:fang_00C;
    font-family:"黑体";
    margin:30px 20px 40px 50px;
    color:fang_F00;
    background-color:fang_FC3;
    border:fang_F03 5px solid; }
    fang_we{ color:fang_390;}
    .wwww1{padding-top:200px;}
</style>
</head>

<body>

<div class="wwww">
hello word
</div>

<div class="wwww wwww1" id="we">
wddfsdjfkasdjasld
</div>

</body>
</html>

utf.js

/* utf.js - UTF-8 <=> UTF-16 convertion
 *
 * Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp>
 * Version: 1.0
 * LastModified: Dec 25 1999
 * This library is free.  You can redistribute it and/or modify it.
 */

/*
 * Interfaces:
 * utf8 = utf16to8(utf16);
 * utf16 = utf16to8(utf8);
 */

function utf16to8(str) {
    var out, i, len, c;

    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
	c = str.charCodeAt(i);
	if ((c >= 0x0001) && (c <= 0x007F)) {
	    out += str.charAt(i);
	} else if (c > 0x07FF) {
	    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
	    out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
	    out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
	} else {
	    out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
	    out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
	}
    }
    return out;
}

function utf8to16(str) {
    var out, i, len, c;
    var char2, char3;

    out = "";
    len = str.length;
    i = 0;
    while(i < len) {
	c = str.charCodeAt(i++);
	switch(c >> 4)
	{ 
	  case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
	    // 0xxxxxxx
	    out += str.charAt(i-1);
	    break;
	  case 12: case 13:
	    // 110x xxxx   10xx xxxx
	    char2 = str.charCodeAt(i++);
	    out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
	    break;
	  case 14:
	    // 1110 xxxx  10xx xxxx  10xx xxxx
	    char2 = str.charCodeAt(i++);
	    char3 = str.charCodeAt(i++);
	    out += String.fromCharCode(((c & 0x0F) << 12) |
					   ((char2 & 0x3F) << 6) |
					   ((char3 & 0x3F) << 0));
	    break;
	}
    }

    return out;
}

JS中的几种提示框

三种不同的JS常用提示框

alert

alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。

window.alert("欢迎！请按“确定”继续。");

如果要换行则用\r\n表示

<SCRIPT LANGUAGE="JavaScript">
function test()
{
alert("您好！!\r\nhttp://www.163.com")
}
</script>
<INPUT onclick=test() type=button value="测试">

confirm

使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。 confirm 方法的返回值为 true 或 false 。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。

<SCRIPT LANGUAGE="JavaScript">
function test1()
{
var aa= window.confirm("单击“确定”继续。单击“取消”停止。");
if (aa) {
window.alert("你选了确定！");
}
else window.alert("你选了取消！");
}
</script>
<INPUT onclick=test1() type=button value="测试">

prompt

<SCRIPT LANGUAGE="JavaScript">
function test3()
{
var bb= window.prompt("欢迎？","请在此输入您的姓名。");
t3.value=bb;
}
</script>
<input id="t3">
<INPUT onclick=test3() type=button value="测试">

折腾CKeditor与CKfinder的一点心得

提到CKeditor、CKfinder，大家也许有些陌生，但提到FCKeditor，一定大名鼎鼎了。CKeditor与CKfinder就是它的新版本。

In 2009, we decided to rename the editor, bringing to light the next generation of our software: CKEditor 3.0.

需要注意的是新版本的CKeditor是不能上传和管理文件的，如果需要上传、管理文件需要安装它的姊妹产品：CKfinder。
不过貌似CKfinder是需要授权许可的（好像我在上传文件时好像看到一段话，大概意思是说你正使用的CKfinder体验版本，点击获取一个授权）。
下面说说初次使用容易遇到的问题：

一、配置：
你可以使用客户端JavaScript脚本以及你喜欢的服务器端语言（比如我这里用的PHP）来部署和配置它。
比如通过JavaScript方式来调用CKeditor编辑器及CKfinder：


加载CKEditor失败

通过PHP方式调用编辑器：

//配置CKeditor
require("public/ckeditor/ckeditor.php");
$CKEditor = new CKEditor();
$CKEditor->returnOutput = true;
$CKEditor->basePath = "public/ckeditor/";
$CKEditor->config[&fang_39;width&fang_39;] = 600;
$CKEditor->config[&fang_39;toolbar&fang_39;] = array(
			array( &fang_39;Source&fang_39;, &fang_39;-&fang_39;, &fang_39;Undo&fang_39;,&fang_39;Redo&fang_39;,&fang_39;Find&fang_39;,&fang_39;Replace&fang_39;,&fang_39;-&fang_39;,&fang_39;Bold&fang_39;,&fang_39;TextColor&fang_39;,&fang_39;BGColor&fang_39;, &fang_39;Italic&fang_39;, &fang_39;Underline&fang_39;, &fang_39;Strike&fang_39;,&fang_39;SelectAll&fang_39;,&fang_39;RemoveFormat&fang_39;),
			//&fang_39;/&fang_39;,
			array( &fang_39;Image&fang_39;, &fang_39;Flash&fang_39;,&fang_39;Table&fang_39;,&fang_39;Rule&fang_39;,&fang_39;Link&fang_39;, &fang_39;Unlink&fang_39;, &fang_39;Anchor&fang_39; ),
			array( &fang_39;JustifyLeft&fang_39;,&fang_39;JustifyCenter&fang_39;,&fang_39;JustifyRight&fang_39;,&fang_39;JustifyFull&fang_39;,&fang_39;Subscript&fang_39;,&fang_39;Superscript&fang_39;,&fang_39;OrderedList&fang_39;,&fang_39;UnorderedList&fang_39;,&fang_39;Outdent&fang_39;,&fang_39;Indent&fang_39;,&fang_39;FitWindow&fang_39;,&fang_39;-&fang_39;), 

		);
$config[&fang_39;skin&fang_39;] = &fang_39;office2003&fang_39;;
//配置CKfinder
require_once &fang_39;public/ckfinder/ckfinder.php&fang_39; ;
$ckeditor = new CKEditor( ) ;
$ckeditor->basePath	= &fang_39;public/ckeditor/&fang_39;;
CKFinder::SetupCKEditor( $CKEditor, &fang_39;/public/ckfinder/&fang_39;) ;

$initialValue = &fang_39;被编辑内容&fang_39;;
$strEditor = $CKEditor->editor("content", $initialValue);
echo $strEditor;

二、因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
CKeditor安装CKfinder之后直接上传文件会出现这个错误提示，原因是CKfinder有一个认证检测函数CheckAuthentication，该函数内容只有一行：return false;，大家在这里添加自己的验证方式。
编辑：CKfinder\config.php，找到function CheckAuthentication()一行，将下面的return false;改为你自己的验证函数即可。比如：

if(isset($_SESSION[&fang_39;mySession&fang_39;])){
    return true;
} else {
    return false;
}

当然，你也可以直接将原来的return false改为return true，不过这是一种危险的做法。

三、上传的有中文文件名的文件时会出现乱码并且编辑器无法显示上传文件。
CKfinder直接将文件以原文件名保存到服务器的，不知道官方有没提供更改保存文件名的配置方法（我没找到），所以直接更改PHP文件。
打开：ckfinder\core\connector\php\php5\CommandHandler\FileUpload.php

//找到下面这几行，大约在59-61行左右：
if ($sFileName != $sUnsafeFileName) {
  $iErrorNumber = CKFINDER_CONNECTOR_ERROR_UPLOADED_INVALID_NAME_RENAMED;
}
//以下两行解决中文乱码问题(重命名)
$sExtension=CKFinder_Connector_Utils_FileSystem::getExtension($sFileName);
$sFileName=date("Ymd")."_".date("His").".".$sExtension;

ckeditor(fckeditor)安装配置

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.htmlfang_.filebrowserImageUploadUrl（配置文档手册）