存档

‘html_js_css’ 分类的存档

详解wordpress中显示分类的wp_list_categories()函数的使用

2010年6月3日 wasw100 没有评论

参考文章：http://codex.wordpress.org/Template_Tags/wp_list_categories

注意：wp_list_categories（）与WordPress 2.1的list_cats（）和wp_list_cats（）两个函数类似 ，但推荐使用wp_list_categories（）。（这两个函数都不推荐使用）。
Usage 用法

<?php wp_list_categories ( $args ); ?>

参数包括：

<?php $args = array(
'show_option_all' => ,
'orderby' => 'name' ,
'order' => 'ASC' ,
'show_last_update' => 0 ,
'style' => 'list' ,
'show_count' => 0 ,
'hide_empty' => 1 ,
'use_desc_for_title' => 1 ,
'child_of' => 0 ,
'feed' => ,
'feed_type' => ,
'feed_image' => ,
'exclude' => ,
'exclude_tree' => ,
'include' => ,
'hierarchical' => true ,
'title_li' => __ ( 'Categories' ),
'number' => NULL ,
'echo' => 1 ,
'depth' => 0 ,
'current_category' => 0 ,
'pad_counts' => 0 ,
'taxonomy' => 'category' ); ?>

各个参数使用说明

show_option_all
默认为空，不显示；非空时，将显示首页，例如我们可以这样使用 

<?php wp_list_categories('show_option_all=首 页'); ?>

那么首页就显示在分类的最开头

orderby
排序，默认使用name排序，可以使用下面的选项进行排序
* id
* name – Default 名称 -默认
* slug
* count
* term_group

order
* ASC – Default 升序 -默认
* DESC 降序

show_last_updated
( boolean )按上次更新文章时间戳显示（TRUE）或不是（假）。默认为false。
* 1 (True) 1（真）
* 0 (False) – Default 0（假） -默认

style
* list – Default 列表 -默认
* none 无

show_count
是否显示文章数
* 1 (True) 1（真）
* 0 (False) – Default 0（假） -默认

hide_empty
文章数为空的类目是否显示
* 1 (True) – Default 1（真） -默认
* 0 (False) 0（假）

use_desc_for_title
是否显示这个链接的描述，但在2.9.1下测试无效果
* 1 (True) – Default 1（真） -默认
* 0 (False) 0（假）

child_of
显示某个ID分类下的自分类

feed
类目后显示rss订阅，默认无显示，例如 

<?php wp_list_categories('feed=rss'); ?>

feed_type
就是在rss地址后在加一层连接，例如原来是http://www.codeif.com/topic/category/soft/feed 加上参数feed_type=2，则变为http://www.codeif.com/topic/category/soft/feed/2

feed_image feed_image
( 字符串 ）设置为一个图像的URI（通常是一个RSS feed图标），作为一个供稿链接到每个类别’的RSS – 2此参数覆盖订阅的参数 。这个参数没有默认值

exclude
排除一个或者多个类别，排除多个时用英文逗号隔开

exclude_tree
排除category-tree

include
只包括在一个或多个类别，多个类别用英文逗号隔开

hierarchical
是否分层
* 1 (True) – Default 1（真） -默认
* 0 (False) 0（假）

title_li
设置类目外的名称和风格。 以“Categories”默认值。如果存在而空，外列表项目将不被显示。

number
设置的类别数目显示。这将导致限价值的SQL定义。 Default to no LIMIT.默认为没有限制。

echo
显示结果还是保存到一个变量中（不显示）
* 1 (True) – Default 1（真） -默认
* 0 (False) 0（假）

depth
（ 整数 ）此参数控制如何在多层次的分类层次结构要分类列入名单。.默认值是0（显示所有的分类及其子分类）。
* 0 -所有类别和子类别（默认）。
* -1 – All Categories displayed in flat (no indent) form (overrides hierarchical ). -1 -所有类别缩进显示在单位（没有）的形式（覆盖层次 ）。
* 1 -只显示顶层分类
* n -指定的深度（或级别），以在显示下降

current_category
在指定的类目的<li>下添加current-cat的class，默认为给当前页面添加。

pad_counts
在2.9版本中假如，是否包含自分类下的数目

* 1 (true) 1（真）
* 0 (false) – default 0（假） -默认

taxonomy
分类返回，此参数将在3.0版本有效：
* category – default 分类 -预设
* taxonomy – or any registered taxonomy 分类 -分类或注册

wp_list_categories（）位于wp-includes/category-template.php 。

–EOF–

分类: html_js_css 标签:

jquery,javascript遍历json数组例子

2010年5月24日 wasw100 没有评论

jquery,javascript遍历json数组例子如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery，javascript遍历json数组</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	var json = {users:[{id:1, name:"abc"},{id:2, name:"xyz"}]};
	//jquery遍历json数组
	$(json.users).each(function(index, entry){
		alert("jquery遍历 index:"+index+"  id:"+entry['id']+" name:"+entry['name']);
	});
	//javascript遍历json数组
	for(var i=0;i<json.users.length;i++){
		alert("javascript遍历 index:"+i+"  id:"+json.users[i].id+" name:"+json.users[i].name);
	}
});
</script>
</head>
</html>

–EOF–

分类: html_js_css 标签:

写html需要注意的两个小地方

2010年4月29日 wasw100 没有评论

为什么我的网页不居中，css已经设置好magin: auto了呀？为什么我的网页在有的机器上乱码，有的机器上却很好？
很可能的原因是：
1.html上没有设置doctype，所以你设置好的css可能不起作用
2.meta没有设置charset的字符类型

初学写网页的不要省略doctype html、meta charset这两个东西，下面的页面同样很简单，但效果会好很多。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title</title>
	</head>
	<body>
		hello world
	</body>
</html>

–EOF–

分类: html_js_css 标签:

[转] jQuery 1.4特性介绍

2010年4月14日 wasw100 2 条评论

来源网址:http://blog.csdn.net/wangjj_016/archive/2010/02/10/5304790.aspx

1月14日jquery发布了1.4版本，新版本有较大变化，但接口基本保持向下兼容。1.4的gzipped压缩版23K，压缩代码69K，为未压缩版 154K，体积略有增加。1.4有些不兼容1.3的地方，会引起原来的应用出错。使用1.4测试了下i.jrj.com.cn首页，好友关注人的ajax 请求都没出来。虽然1.4提供了兼容1.3版本的插件http://code.jquery.com/jquery.compat-1.3.js，但建议不要在现有的应用中使用，大家可以在新项目或项目改版升级中使用1.4。
我摘选了一些常用API的新特性，大家先睹为快，想更深入学习的可以看看jquery1.4新特性介绍和API。

jquery 1.4新特性介绍：http://jquery14.com/day-01#backwards
jquery API：http://api.jquery.com/

jquery1.4更新内容：

1. 1.4进行内部重构，改写了大多数常用方法，提升了常用方法的性能。

2. 扩展了下面的方法，增加setter函数作为参数。这些方法的接口向下兼容。
.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), and .toggleClass().

例如：
$(‘div’).html(function(html){    return html.replace(/&/gi,’<span class=”amp”>&</span>’);  });

3. Ajax改动比较大，使用1.4测试了下i.jrj.com.cn首页，ajax请求都没出来。
1) 增加了参数的数组序列化 {foo: ["bar", "baz"]}序列化为 “foo[]=bar&foo[]=baz”，而不是以前的foo=bar&foo=baz
三种方法使用原来的序列化:

// Enables for all serialization
jQuery.ajaxSettings.traditional = true;

// Enables for a single serialization
jQuery.param( stuff, true );

// Enables for a single Ajax requeset
$.ajax({ data: stuff, traditional: true });

2) 支持ETag， jq1.4使用ETag判断ifModified，jq1.3使用Last-Modified 判断
3) 根据content-type自动检测dataType是 JSON 或者 script
4) 加强JSON格式检测，不标准的{foo : “bar”}会被拒绝，应使用{“foo” : “bar”}
5) 可以明确指定JSONP回调函数的name
6) Success callback receives XHR object as third argument
7) jQuery.ajax() is now using onreadystatechange instead of a timer

4. 核心的jQuery()

1) 使用属性创建单个元素，这样创建元素就方便多了
2) jQuery()返回空jQuery对象，1.3返回jQuery(document)。所以1.4不推荐使用jQuery().ready()，可以使用jQuery(document).ready()或jQuery(function(){})

5. event
1) 新增事件代理 jQuery.proxy()
2) 新增多事件绑定
3) 增加focusin focusout事件方法

6. 不兼容以前版本的地方，可能会发生错误。
1) add()不再把选择器的匹配结果直接连接起来，1.4把匹配结果合并按照其在dom中的顺序排序
例如：页面上元素顺序是,<p>Added this… (notice no border)</p><div></div>
$(“div”).css(“border”, “2px solid red”).add(“p”).css(“background”, “yellow”)
jq1.3的结果是[<div></div>,<p>Added this... (notice no border)</p>]，jq1.4的结果是[<p>Added this... (notice no border)</p>，<div></div>]

2) clone返回带data数据和event时间的元素
3) jQuery.data(elem)返回元素对象，不再返回元素id
4) jQuery()不转成jQuery(document)
5) val(“…”)通过value选中元素
6) jQuery.browser.version返回浏览器的引擎版本号
7) 加强json标准检查
8) jQuery.param()默认以PHP/Rails形式序列化
9) jQuery.extend(true, …) 不再扩展非原生对象和数组。
10) 如果Ajax request未指定datatye且返回text/javascript，脚本会自动执行。
11) Ajax的ifModified使用ETag检测,jq1.3使用Last-Modified判断

–EOF–

分类: html_js_css 标签:

html form中onsubmit的使用

2010年4月8日 wasw100 没有评论

html form 中的onsubmit在点submit按钮时被触发，如果return false;则结果不会被提交到action中去（也就是提交动作不会发生），如果不返回或者返回true，则执行提交动作。（<a onclick=”return confirm(‘是否跳转到百度？’);” href=”http://www.baidu.com”>baidu</a>也同理）,下面是一个例子程序

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html form onsubmit使用</title>
<script type="text/javascript">
alert("加载此页面时执行");
function buttonSubmit(){
    document.form1.submit();
}
</script>
</head>
<body>
<a onclick="return confirm('是否跳转到百度？');" href="http://www.baidu.com">baidu</a>
<form name="form1" onsubmit="return confirm('是否进行提交？');">
<input type="submit" value="submit" />
<input type="button" value="button" onClick="buttonSubmit();"
</form>
</body>
</html>

结论：
1.如果html中使用form的onsubmit进行提交前的数据验证，需要验证函数返回一个布尔值，而且要写成onsubmit=”return 函数名();” return不能少，否则无论函数返回true还是false都能够提交，达不到验证的目的。
2.只能使用sunmit按钮进行提交才触发onsubmit事件，button按钮的提交不能触发onsubmit事件
–EOF–

分类: html_js_css 标签:

jquery的attr val

2010年4月7日 wasw100 没有评论

$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法
$(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法

$(this).val();获取某个元素节点的value值，相当于$(this).attr(“value”);
$(this).val(value);设置某个元素节点的value值，相当于$(this).attr(“value”,value);

jquery attr例子：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery attr属性</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#iButton").click(function(){
			alert($(this).attr("test"));	//获取test的属性
			$(this).attr("test","abc");//设置test的属性为abc
			alert($(this).attr("test"));
		});
	});
</script>
</head>

<body>
	<input id="iButton" type="button" test="123" value="按钮" />
</body>
</html>

 

对应的javascript dom代码为：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>attribute属性</title>
<script type="text/javascript">
function attrTest(){
	alert(document.getElementById("iButton").getAttribute("test"));
	document.getElementById("iButton").setAttribute("test","abc");
	alert(document.getElementById("iButton").getAttribute("test"));
}
</script>
</head>
<body>
	<input id="iButton" type="button" test="123" value="按钮" onclick="attrTest();" /> 

</body>
</html>

–EOF–

分类: html_js_css 标签:

window.location or window.location.href?

2010年1月26日 wasw100 没有评论

参考：
1.http://www.javascriptkit.com/jsref/location.shtml
2.http://www.highdots.com/forums/javascript-discussion-multi-lingual/window-location-window-location-href-276539.html

Location contains information about the current URL of the browser.
The most common usage of Location is simply to use it to automatically
navigate the user to another page:

<script type="text/javascript">
window.location="http://www.google.com"
</script>

所以推荐使用window.location，包含更多信息

理由（参考文章的第二篇）

Although "window.location.href" also seems to work. The "entire URL"
href property (of window.location) appears to be a bit redundant. Other
properties of "windows.location" could be useful for reading or changing
portions of the URL like domain/host names and port numbers (which are
sometimes not stated - permitted to remain the default).

–EOF–

分类: html_js_css 标签:

网页打印格式设置总结

2010年1月18日 wasw100 没有评论

1.分页符的添加

.page_break{
	page-break-after:always;
}

分页的时候加上：<div class=”page_break”></div>

2.为使各个浏览器显示效果尽量一致，加上

*{
	margin:0;
	padding:0;
}

3.A4纵向打印，浏览器显示和打印效果相差不大，设置body的宽度

body{
	width:640px;
	font-size:12px;
}

4.css擅长样式的控制，table善于格式的显示。css修饰table

参考文章：http://www.w3schools.com/css/css_table.asp

table添加边框

table{
	border-collapse:collapse;
}
table, th, td{
	border:1px solid #000000;
}

如果一个页面有多个table，这个table和其他table格式略有不同，可以使用下面的方法

<div id="t1">
  <table>
    <tr>
      <th scope="col">&nbsp;</th>
    </tr>
  </table>
</div>

css中，控制不同的格式

#t1 table{
	width:640px;
}
#t1 table,#t1 th,#t1 td{
	text-align:center;
}

5.控制打印时是否显示

@media print{<!--控制哪些打印，哪些不打印的样式-->
  .print   {display:block;}
  .notPrint {display:none;}
}

我们在html中引入css： <link rel=”stylesheet” type=”text/css” media=”screen” href=”styles/basic.css” />

media=”screen”，也可以时media=”print”，分别代表控制浏览器里面的格式，或者打印时的格式，如果没有写media属性，则表示css既控制浏览器显示，有控制打印显示，

所以上面的css就是单独控制打印的

–
文字间距 行间距

.space{
	word-spacing:20px;
	letter-spacing:20px;
	line-height:60px;
}

–EOF–

分类: html_js_css 标签:

解决ie6 ie7中js不能通过appendChild(tr)添加table行的方法

2009年9月22日 wasw100 没有评论

本机只有ie7,ff3.5,opera10，测试在这三个环境中测试通过。

在标准DOM中添加元素一般使用appendChild();
但用js在table中添加行时却失效了。
网上搜了一下说 ie6，ie7不支持table.appendChild(“tr”)

那在JavaScript中怎么在一个table中添加一行呢？
在http://www.w3schools.com/htmldom/dom_obj_table.asp看到w3c文档中HTML DOM Object存在tableObject.insertRow(index)方法。何不在插入行时用这个方法呢，毕竟在html中table比普通的标签有其特殊性，碰到table添加一行时，注意使用insertRow而不是appendChild，这样代码才能使用更多浏览器。看下面一段代码：

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
		function insRow()
		{
			var tbl = document.getElementById('myTable');
			var row = tbl.insertRow(0);
			var cell = row.insertCell(0);
			cell.innerHTML="new cell";
		}
</script>
	</head>

	<body>
		<table id="myTable" border="1">
			<tr>
				<td>
					cell
				</td>
			</tr>
		</table>
		<br />
		<input type="button" onclick="insRow()" value="Insert row">
	</body>
</html>

比使用标准的DOM还简单，而且也符合w3c标准，但有一点要说明的是：

innerHTML这个方法虽然没有在w3c文档中出现，但是由于使用的广泛性，很多浏览器都进行了支持，添加文本节点（text nodes）时可以用innerHTML，如果非要符合w3c标准，可以用createTextNode(str)方法，本例中在JavaScript最后一行改为：cell.appendChild(document.createTextNode(“new cell”))。

但是上面的例子还有一个与appendChild()不同的地方，就是appendChild值插在原有元素的后面，但是例子中是插在了第一行。怎么插在表格的最后一行，或者插在当前行的后一行或者前一行怎么做呢？
只要实例中把javascript改为：var row = tbl.insertRow(tbl.rows.length);

下面附加一段带有 在最后加一行，本行前前加一行，本行后加一行，删除当前行的html代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/htmt;charset=utf-8">
		<script type="text/javascript">
		var i=0;
		function insRow(){
			var tbl = document.getElementById("myTable");
			insRowIndex(tbl.rows.length);
		}
		function insRowIndex(rowIndex){
			var tbl = document.getElementById("myTable");
			var row = tbl.insertRow(rowIndex);
			var cell0 = row.insertCell(0);
			var cell1 = row.insertCell(1);
			cell0.innerHTML = "cell " + i++;
			cell1.innerHTML = "	<input type='button' value='delete' onclick='delRow(this)'>"
								+"<input type='button' value='insBefore' onclick='insBefore(this)'>"
								+"<input type='button' value='insAfter' onclick='insAfter(this)'>";
		}
		function delRow(row){
			var tbl = document.getElementById("myTable");
			var rowIndex =  row.parentNode.parentNode.rowIndex;
			tbl.deleteRow(rowIndex);
		}
		function insBefore(row){
			var rowIndex =  row.parentNode.parentNode.rowIndex;
			insRowIndex(rowIndex)
		}
		function insAfter(row){
			var rowIndex =  row.parentNode.parentNode.rowIndex;
			insRowIndex(rowIndex+1)
		}
</script>
	</head>

	<body>
		<table id="myTable" border="1">
			<tr>
				<td>
					单元格
				</td>
				<td>
					操作
				</td>
			</tr>
		</table>
		<br />
		<input type="button" onclick="insRow()" value="Insert row">
	</body>
</html>

–EOF–

分类: html_js_css 标签: ,

做网站多大宽度合适？—看各大门户页面宽度

2009年1月29日 wasw100 没有评论

做网站时页面多大宽度正好呢？

现在1024*768甚至更高的分辨率已成为主流，所以这里只讨论1024*768的分辨率。
不过非要向下兼容我的意见是760-780，不过我更喜欢用760.

下面讨论1024或更大宽度的情况下，先看下各大网站（如有错误，敬请指正）：

新浪： 950 px
网易： 960 px
腾讯： 910 px
搜狐： 950 px

校内网： 960px

csdn： 960 px
javaeye: 950 px
sun： 960 px

通过上面几个不同类型的网站，除腾讯用了910px外，其余的不是950px，就是960px。现在大家心中网站用多款心中大体有数了吧。

这里主要要考虑两个因素：视觉效果和用户体验。

从视觉效果来说，屏幕边缘区域并不是用户的有效视觉区域，也就是说，用户很少去看屏幕的边缘地带的。所以我最近在很多国外的网站看到一些100%宽度设计的网站，两边都会留20px左右的空白（而且这样看起来更加舒服）。

而从用户体验来说，太宽的屏幕，意味着一行会有更多的字，这一点是不好的。大家在看报纸或看书的时候会注意到分栏，比如报纸，无论是对开还是4开的报纸，都会分成几栏来显示，如南方都市报是分5栏，每栏15个5号字，这样就很容易阅读，如果不分栏，那么就相当于一行75个字，只有一两行字的话还行，如有二十几行，谁能读下去？！

现在显示器的屏幕越来越宽，如果网页的宽度也一味的宽下去，用户肯定要纠结了！

所以，我认为950-980的页面宽度是最合适的，如果考虑800*600的显示器，则可以考虑向下兼容的设计（不过，据统计，现在使用800*600分辨率的显示器的不到1%）。

参考：http://www.isparkle.cn/?p=47

–EOF–

分类: html_js_css 标签: