分类目录归档:HTML/CSS

CSS3 与 HTML5浏览器实现对比

Win7默认的IE版本是IE8, 2009年10月发布。
Win8默认的IE版本是IE10,2012年10月发布。

从IE9开始才支持部分的HTML5。到IE10才稍微全面支持CSS3和HTML5,基本和firefox支持相当…。如果一定要使用IE至少应该使用IE9,最好应该是IE10,玛尼这个怪胎应该尽快消失。

以下几张来自网络的图,非原创:
1

2

3

4

5

6

7

目录联动选择最佳实践范例

简单来说就是选择一级目录时显示二级目录,选择二级目录时显示三级目录,这样需求如果使用Ajax来实现,思路很清晰。不过我这里没有使用这个方法,而是一次性读取整个目录,在客户端实现联动。由于这样的程序很常见,所有这里做一个范例保存参考,未来需要时可以避免重新造轮子。

控制器代码(如果有需要重用,可以封装成一段业务逻辑代码):

//控制器
	public function view_test(){
		// 记录客户端选择的目录,类似1-14-85 1-14-,如果-后为空说明没有选择目录
		$selectedCates = isset($_REQUEST['selectedCates'])?trim($_REQUEST['selectedCates']):'';
		
		// 读取目录列表,每个类目按照格式:目录包含子类方式组织(叶子类目去掉)
		$erpCates = A('erpCates')->getSubCates();
		$erpCatesArr = json_decode($erpCates,true);
		
		// 组织传递到视图的类目选中(或初始)数据,是否选中
		$cateList = array();
		if(empty($selectedCates)){
			foreach($erpCatesArr[0] as $idx=>$vle){
				$cateList[0][$vle['id']] = array('id'=>$vle['id'],'name'=>$vle['name'],'selected'=>0); 
			}
		}else{
			$cids = explode('-',$selectedCates);
			$pid = 0;
			$count = count($cids); 
			for($i = 0; $i < $count; $i++){
				
				foreach($erpCatesArr[$pid] as $idx=>$vle){
					$selected = 0;
					if($vle['id'] == $cids[$i]){ $selected = 1; }
					$cateList[$pid][$vle['id']] = array('id'=>$vle['id'],'name'=>$vle['name'],'selected'=>$selected);
				}
				$pid = $cids[$i];
			}
		}
		// 类目选择初始
		$this->smarty->assign('cateList',$cateList);
		// 全部类目数据
		$this->smarty->assign('erpCates',$erpCates);
		$this->smarty->display('title_test.html');
	}
#############################################################################
// 或者封装成一段业务逻辑代码
	public function act_initCates($selectedCates){
		// 读取目录列表,每个类目按照格式:目录包含子类方式组织
		$erpCates = A('erpCates')->getSubCates();
		$erpCatesArr = json_decode($erpCates,true);
		
		// 组织传递到视图的类目选中(或初始)数据,寻找了那个类目,是否选中
		$cateList = array();
		if(empty($selectedCates)){
			foreach($erpCatesArr[0] as $idx=>$vle){
				$cateList[0][$vle['id']] = array('id'=>$vle['id'],'name'=>$vle['name'],'selected'=>0); 
			}
		}else{
			$cids = explode('-',$selectedCates);
			$pid = 0;
			$count = count($cids); 
			for($i = 0; $i < $count; $i++){
				
				foreach($erpCatesArr[$pid] as $idx=>$vle){
					$selected = 0;
					if($vle['id'] == $cids[$i]){ $selected = 1; }
					$cateList[$pid][$vle['id']] = array('id'=>$vle['id'],'name'=>$vle['name'],'selected'=>$selected);
				}
				$pid = $cids[$i];
			}
		}
                return $cateList;
	}
//在控制器中如下使用
	public function view_test(){
		// 记录客户端选择的目录,类似1-14-85 1-14-,如果-后为空说明没有选择目录
		$selectedCates = isset($_REQUEST['selectedCates'])?trim($_REQUEST['selectedCates']):'';
                $cateList = A('title')->act_initCates($selectedCates);

                // 读取目录列表,每个类目按照格式:目录包含子类方式组织
		$erpCates = A('erpCates')->getSubCates();

		// 类目选择初始
		$this->smarty->assign('cateList',$cateList);
		// 全部类目数据
		$this->smarty->assign('erpCates',$erpCates);
		$this->smarty->display('title_test.html');
        }

这段代码是实现了当选择提交返回之后,选择的信息不丢失(选择信息由$cateList带回来)。接下来就是一段客户端的实现(JS)。

<script type="text/javascript">
var mod = "{$mod}";
var act = "{$act}";
// 类目数据,目录包含子类目,去掉叶子目录
var erpCatess = {$erpCates}
{literal}
$(function(){
        // 每个目录被选中时,都执行先清除其后的元素,再附加当前选中类目的子类目
	$(document).on('change','.erpCate',function(){
		var catePath 	= $(this).val();
		catePath 		= catePath.split('-');
		var cid 		= catePath.pop();
		selectHtml(cid,$(this));
	});
	// 提交表单时,把选中的类目组成成1-14-80 1-4-这种格式赋值给隐藏表单域
	$("#searchForm").submit(function(){
		var cids = [];
		$("#catesCon select").each(function(){
			cids.push($(this).val());
		});
		$("#selectedCates").val(cids.join('-'));
	});
})
// 这段代码实际并没有很强重用性,可以需用分离
function selectHtml(pid,e){
	var selectHtml 	= '';
	if(pid == ''){
		e.nextAll('.erpCate').remove();
		return false;
	}
	erpCates = erpCatess[pid];
	if(!erpCates){
		e.nextAll('.erpCate').remove();
		return false;
	}
	for(var i=0;i<erpCates.length;i++){
		selectHtml 	+= "<option value='"+erpCates[i].id+"'>"+erpCates[i].name+"</option>"; 
	}
	$('.erpCate').attr('name','');
	e.nextAll('.erpCate').remove();
	e.after('<select class="erpCate"><option value="">请选择</option>'+selectHtml+'</select>');
}
{/literal}
</script>

HTML代码部分:

<form id="searchForm" name="" method="post" action="">
	<input type="hidden" value="{$mod}" name="mod" />
	<input type="hidden" value="{$act}" name="act" />
	<input type="hidden" value="" name="selectedCates" id="selectedCates" />
	<table>
		<tr>
			<td id="catesCon">
			{foreach $cateList as $iid=>$cca}
			<select name="select_{$iid}" class="erpCate">
			<option value="">请选择</option>
			{foreach $cca as $cidx=>$cvle}
			<option value="{$cvle['id']}" {if $cvle['selected'] == 1}selected="selected"{/if}>{$cvle['name']}</option>
			{/foreach}
			</select>
			{/foreach}
			</td>
			<td><input type="submit" value="搜索" /></td>
		</tr>
	</table>
</form>

在选中数据回显上,服务端根据提交的数据组织数据(如果没有选中就是默认的数据),然后在客户端循环输出这个数据即可,这个实现方式是一最佳实践。

永久链接:http://blog.ifeeline.com/1747.html

HTML编辑器 – KindEditor 基本使用

kindeditor

下载:http://www.kindsoft.net/down.php

文件说明:

asp		ASP程序
asp.net		ASP.NET程序
php		PHP程序
JSP		JSP程序
examples	例子

attached		上传的附件
plugins			插件(js)
themes			皮肤文件
kindeditor.js		编辑器主文件
kindeditor-min.js	编辑器主文件(压缩)
kindeditor-all.js	包含了插件
kindeditor-all-min.js	包含了插件(压缩
)

最简单的例子:

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>KindEditor</title>
	<script charset="utf-8" src="kindeditor.js"></script>
	<script>
	        KindEditor.ready(function(K) {
	                window.editor = K.create('#editor_id');
	        });
	</script>
</head>
<body>
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>
</body>
</html>

只需要引入kindeditor.js文件,然后运行一个初始化脚本就可以。默认的样式是取themes下的default,语言取lang下的zh_CN.js,一般如果需要使用不同的themes和不一样的语言,就需要手动引入。Kindeditor提供了很多插件,放入到plugins中,如果需要使用,也要手动引入。

初始化放入textarea中内容需要装换HTML特殊字符(>,<,&,”),PHP中可以使用htmlspecialchars进行装换。

通过指定K.create()的第二参数可以对编辑器进行配置:

var options = {
        cssPath : '/css/index.css',
        filterMode : true
};
var editor = K.create('textarea[name="content"]', options);

必须认清一个事实,Kindeditor的编辑器是在一个iframe中完成可视化操作的,意思是编辑的内容实际并没有放入到textarea中,获取数据:

// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery

// 设置HTML内容
editor.html('HTML内容');

这里可以直接使用editor那是因为初始化通过K.create()赋值给了window.editor,可以直接调用editor.html()获取内容,也可以通过调用editor.sync()后(同步内容到textarea),直接去取textarea的值。

KindEditor在默认情况下自动寻找textarea所属的form元素,找到form后onsubmit事件里添加sync函数,所以用form方式提交数据,不需要手动执行sync()函数。

KindEditor默认采用白名单过滤方式,可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式,保留所有标签。

// 关闭过滤模式,保留所有标签
KindEditor.options.filterMode = false;

KindEditor.ready(function(K)) {
        K.create('#editor_id');
}

这个的详细配置,参考:http://kindeditor.net/docs/option.html#id67

基本了解这些就可以基本使用这个编辑器了。如果要做更多定制化的操作,需要详细阅读文档了解更多内容。

HTML中的CHECKBOX和SELECT

HTML中的CHECKBOX只要添加了checked属性,这个复选框就会被选中,SELECT中的option只要添加selected属性就会被选择。实际上只要添加属性就可以了,但是通过firebug可以看到,实际解析时,添加的checked会变成checked=”checked”,selected会变成selectd=”selected”。

如果CHECKBOX没有指定value,并且这个CHECKBOX选中了,这个时候提交表单过去,传递过去的是字符串“on”。

如果SELECT的option没有指定value,并且这个select的option被选中了,这个时候提交表单过去,传递过去的是option节点的值。

按照这个思维,为了实现全选、反选的功能:
select_all
当我点击全选时,希望下面的所有CHECKBOX也勾选,那么这要把它们每个都添加checked属性即可,反选时把它们全部去掉即可。我使用jQuery中的attr()方法来操作,不过很快就出现了问题,属性被正常添加去除,但是复选框的勾却没有同时显示勾选。折腾了一会,在jQuery中找到prop()方法:

////////////////////
http://api.jquery.com/prop/

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

这里说明了Attributes 和 Properties的区别。

http://blog.ifeeline.com/1017.html

集成Google翻译工具

Google的翻译质量还是很高的。要集成翻译工具其实非常简单,明白如下URL即可:
http://translate.google.com/translate?u=http://shipping.vfeelit.com&sl=en&tl=it&hl=it&ie=UTF-8

u         要翻译的URL链接地址
sl        源URL网页的语言
tl        要翻译成那种语言
hl        Google页面语言,一般和tl相同
ie        编码

Google翻译
在具体集成中,只要动态修改u的值即可。

效果参考:Google翻译工具参考

永久链接:http://blog.ifeeline.com/915.html

HTML中的空格

虽然”&nbsp;”可以当作空格用,但是”&nbsp;”其实和空格是不一样的,nbsp是英文Non-Breaking Space的缩写,可以直接翻译成“不被折断的空格”。

比如下面这段html:

<h2>10 Most Sought-after Skills in Web Development</h2>

假设h2的宽度有限,只能容下“10 Most Sought-after Skills in Web”,由于Web Development之间用的是空格,”Development”就会被移到第二行。因为Web Development是相关的两个词,所以如果可以把它们同时移到第二行,效果可能会更好一点。为了到达这个目的,我们可以在Web Development之间用”&nbsp;”来代替空格,这个样它们就会被连在一起。

<h2>10 Most Sought-after Skills in Web&nbsp;Development</h2>

永久链接:http://blog.ifeeline.com/792.html

CSS控制table总结

Table 算是块元素,但比较特殊,它有margin,但是没有padding
它的属性cellspacing设定单元格之间的间距,cellpadding设定表格的内边距,注意:单元格不能设置margin,如果要设置类似的外边距,只能设置cellspacing属性,单元格可以设置padding对应cellpadding属性,单元格可以设置border部分对应表格的border属性。

一般情况下表格是默认有cellspacing的,所以最好是同时设置 cellpadding=”0″ cellspacing=”0″,然后在设置样式,但是如果对表格设置了border-collapse:collapse,单元格间距立即无效,这个样式说明把两个边框合并为一个,当有冲突时不同浏览器解释不一,所以应用表格边框应该使用如下样式:

table{
    border-collapse:collapse;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
}
table td{
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}

overflow不能应用于表格,因为表格是不能溢出的,只有表格的单元格能溢出。应当把overflow:hidden赋给单元格。

永久链接:http://blog.ifeeline.com/790.html

Dreamweaver中为phtml文件着色

Dreamweaver默认只会为已知的文件着色(通过文件后缀名判断),Dreamweaver我一般用来编辑html和css。对应phtml是混杂了php和html的文件,我写完它用php样式着色,搜索配置文件:
Dreamware文档类型

找到如下代码,把phtml加入:

<documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic" winfileextension="php,php3,php4,php5,phtml" macfileextension="php,php3,php4,php5,phtml" file="Default.php" writebyteordermark="false">

Dreamware代码着色

永久链接:http://blog.ifeeline.com/667.html