[转载]关于横向菜单导航。兼容IE6,7,8,Firefox,Chrome

mikel阅读(909)

[转载]关于横向菜单导航。兼容IE6,7,8,Firefox,Chrome。 – nyth – 博客园.

公司人少,所以有时候前台就也做一点。最近一个网站需要做一个横向菜单导航,以前也做过一些小例子想着没啥,网站做完后直接上传,第二天老板可说咋在我这显示不对呀,我过去一看。

突然想起来,IE6没试。我就回来开始调,也没调好,网上也有很多,但是一直也没找个合适的。最后还是google出来了一个外国的网页,一看这个不错。确实很好(它的主要特点是那个JS)。我在网上也搜了不少例子,可是一改就乱,就是这个原因换了好些也没见个合适的。记着,用时查看。。。。。

就这了。有空时,把css给注释下。方便改写。(在调css样式做自己样式的时候,用firbug改着调着很方便

对了,老外的博客地址:http://javascript-array.com/scripts/simple_drop_down_menu/

HTML:

01 <ul id="sddm">
02 <!--如果栏目下没有子菜单就不用onmouSEOver="mopen('m1')" onmouSEOut="mclosetime()"以及下面的那个DIV -->
03 <li><a href="#" onmouSEOver="mopen('m1')" onmouseout="mclosetime()">Home</a>
04 <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
05 <a href="#">HTML DropDown</a> <a href="#">DHTML DropDown menu</a> <a href="#">JavaScript
06 DropDown</a> <a href="#">DropDown Menu</a> <a href="#">CSS DropDown</a>
07 </div>
08 </li>
09 <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
10 <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
11 <a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX dropdown</a>
12 <a href="#">DIV dropdown</a>
13 </div>
14 </li>
15 <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
16 <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
17 <a href="#">Visa Credit Card</a> <a href="#">Paypal</a>
18 </div>
19 </li>
20 <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
21 <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
22 <a href="#">Download Help File</a> <a href="#">Read online</a>
23 </div>
24 </li>
25 <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
26 <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
27 <a href="#">E-mail</a> <a href="#">Submit Request Form</a> <a href="#">Call Center</a>
28 </div>
29 </li>
30 </ul>
31 <div style="clear: both">
32 </div>
33 <div style="clear: both">
34 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
35 </div>

JS:(主要就是这个把不变的东西用js来固定住,其余的都可以自定义)

01 <script type="text/JavaScript">
02 <!--
03 var timeout         = 500;
04 var closetimer      = 0;
05 var ddmenuitem      = 0;
06
07 // open hidden layer
08 function mopen(id)
09 {
10 // cancel close timer
11 mcancelclosetime();
12
13 // close old layer
14 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
15
16 // get new layer and show it
17 ddmenuitem = document.getElementById(id);
18 ddmenuitem.style.visibility = 'visible';
19
20 }
21 // close showed layer
22 function mclose()
23 {
24 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
25 }
26
27 // go close timer
28 function mclosetime()
29 {
30 closetimer = window.setTimeout(mclose, timeout);
31 }
32
33 // cancel close timer
34 function mcancelclosetime()
35 {
36 if(closetimer)
37 {
38 window.clearTimeout(closetimer);
39 closetimer = null;
40 }
41 }
42
43 // close layer when click-out
44 document.onclick = mclose;
45 // -->
46 </script>

CSS:

01 #sddm
02 { margin: 0;
03 padding: 0;
04 z-index: 30}
05
06 #sddm li
07 { margin: 0;
08 padding: 0;
09 list-style: none;
10 float: left;
11 font: bold 11px arial}
12
13 #sddm li a
14 { display: block;
15 margin: 0 1px 0 0;
16 padding: 4px 10px;
17 width: 60px;
18 background: #5970B2;
19 color: #FFF;
20 text-align: center;
21 text-decoration: none}
22
23 #sddm li a:hover
24 { background: #49A3FF}
25
26 #sddm div
27 { position: absolute;
28 visibility: hidden;
29 margin: 0;
30 padding: 0;
31 background: #EAEBD8;
32 border: 1px solid #5970B2}
33
34 #sddm div a
35 { position: relative;
36 display: block;
37 margin: 0;
38 padding: 5px 10px;
39 width: auto;
40 white-space: nowrap;
41 text-align: left;
42 text-decoration: none;
43 background: #EAEBD8;
44 color: #2875DE;
45 font: 11px arial}
46
47 #sddm div a:hover
48 { background: #49A3FF;
49 color: #FFF}

[转载]大小不定的图片垂直居中汇总

mikel阅读(1021)

[转载]大小不定的图片垂直居中汇总 – Dm.Yang’s Blog – 博客园.

最近一段时间一直学习js,CSS接触不多,前几天在蓝色理想经典论坛上看到一篇帖子(CSS图片垂直居中方法整理集合),按照上面的做法做了一些改进和扩展,分享如下:

针对一个box里面的n张图片,我总结了下面几种方法(持续更新)使其在box里面垂直居中(水平居中就不废话了,你懂的~)。

1、使line-height值和box的height值相同

结构如下(下面第6点的结构也一样,除了box的扩展类名不同):

1 <div class="box line-height"><br> <!--[if lte ie 7]><i></i><![endif]--><br>   <img src="http://bbs.blueidea.com/images/default/logo.gif" alt="blueidea" /><a href="">蓝色理想</a><br>   <img src="http://images.cnblogs.com/logo_small.gif" alt="博客园" /><a href="">博客园</a><br></div><br>

样式:

1 .line-height{height:100px;line-height:100px;overflow:hidden;zoom:1;}<br>.line-height i{writing-mode:tb-rl;_height:100%;vertical-align:middle;}/* 使用writing-mode:tb-rl;height:100%;兼容IE6 */

这种方式的优点是:同时支持块级和内联极元素;支持图片和图片以及图文混排。

缺点是:只能显示一行。

说明:这里使用writing-mode兼容ie6,参考了blueidea的那篇文章,以前算是孤陋寡闻吧,看来对ie使用“以毒攻毒”的办法还 是挺有效的嘛。同时在结构上也做了调整,传统的方式(即box里面嵌套一个span,然后把img放里面对span使用与i类似的样式)如果是把两张图放 在span里面,则IE6下两张图会上下排列(writing-mode的缘故),所以小弟在此做了一点点改进。

2、对box使用padding-bottom=padding-top方法

结构和第1点类似,,除了box的扩展类名不同,少了ie注释。

样式如下:

1 .padding{padding-top:3em;padding-bottom:3em;}/* 当然也可以用绝对值 */

优点:支持图片和图片以及图文混排;支持所有浏览器。

缺点:box的高度不能固定。

说明:如果box的高不固定,这算是最简单的一种方法了吧,简单到用起来的时候心里头都慌慌的(就像大中小学生对待1加1等于几那个问题一样^_^)。可是经过测试,在所有主流浏览器下都有效,读者可以试着换张灰常大的图试试(我没测试哈)。

3、使用定位方法

结构如下(下面4、5点的结构也一样,除了box的扩展类名不同):

1 <div class="box position"><br>  <span class="inner"><br>        <img src="http://bbs.blueidea.com/images/default/logo.gif" alt="blueidea"><a>蓝色理想</a><br>       <img src="http://images.cnblogs.com/logo_small.gif" alt="博客园"><a>博客园</a><br>    </span></div>

优点:所有浏览器都支持;支持图片和图片以及图文混排。

缺点:垂直方向的居中不完美,需要根据box的高度作调整;需额外嵌套一层标签。

说明:这个应该不算什么新方法了吧,以前做垂直居中都用这法子。定位确实是一种很不错的布局方式,如果不考虑IE6,float早可以回家休息了(貌似也不远了,请参考拜拜了,浮动布局-基于display:inline-block的列表布局,此文将让您有足够的理由放弃float)。

4、使用display:table-cell方法

结构同上,样式如下:

1 .table-cell{height:100px;display:table;}<br>.table-cell .inner{display:table-cell;vertical-align:middle;}

优点:完全按照table式布局。但要注意合法的table-cell元素应该作为table元素的子元素出现;支持图片和图片以及图文混排。

缺点:IE6/7不支持(要用hack,可以与定位法杂交);需额外嵌套一层标签。

说明:这种方法也不是什么新法子,模拟表格做布局,你懂的。

5、使用font-size方法

结构同上,样式如下:

1 .font-size{height:100px;}<br>.font-size .inner{font-size:50px;*font-size:65px;_font-size:80px;}<br>.font-size .inner a{font-size:14px;vertical-align:middle;}

优点:支持图片和图片以及图文混排。文本需重定义font-size。

缺点:font-size值强烈依赖box的height值;一个font-size值不能兼容所有浏览器,ie6、7下需做另外调整;目前Opera(10.6)不支持这种方法;需额外嵌套一层标签。

说明:这应该是几种方法中最蛋疼的一种了吧,兼容性也最差,在实际操作中尽量避免吧。

6、使用inline-block方法

结构同1,样式如下:

1 .inline-block{height:100px;}<br>.inline-block:after{content:".";visibility:hidden;display:inline-block;height:100%;vertical-align:middle;}<br>.inline-block i{display:inline-block;height:100%;vertical-align:middle;}/* ie6/7下可以使用此方法兼容 */<br>.inline-block img{vertical-align:middle;}

优点:如果不用:after伪元素而是添加一个额外的标签(如i),可兼容所有浏览器;支持图片和图片以及图文混排。

缺点:IE6/7不支持:after伪元素,这时需要用hack(或像本文一样额外添加了一个无语义的i)。

说明:inline-block!好东西!

叽叽喳喳说了半天,现在奉上测试源码,请单击查看Demo

注:本文测试所用到的浏览器为IE6、7、8,FF 3.6,Chrome 7.0,Opera 10.6,Safari 5.0。由于本人水品有限,目前想到的方法就这么多(后续会有更新),有不对的地方望各位指正!

本文出自chemdemo博客园,转载请注明来源,谢谢。

(全文完)

[转载]jQuery数组处理详解(含实例演示)

mikel阅读(1078)

[转载]jQuery数组处理详解(含实例演示) – Mr.Think的博客@MrThink.net… – 博客园.

jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的介绍,顺便对JQuery数组做个总结.温故,知新.
强烈建议你打开DEMO演示后再看下面的详解: 点此查看DEMO
1. $.each(array, [callback]) 遍历[常用]
解释: 不 同于例遍 JQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略.
each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例:

var _mozi=[墨家,墨子,墨翟,兼爱非攻,尚同尚贤]; //本文所用到的数组, 下同
$.
each(_mozi,function(key,val){
//回调函数有两个参数,第一个是元素索引,第二个为当前值
alert(_mozi数组中 ,索引 : +key+ 对应的值为: +val);
});

相对于原生的for..in,each更强壮一点. for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取;
2. $.grep(array, callback, [invert]) 过滤数组[常用]
解释: 使 用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回 true 以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串(个人不推荐,欲了解自行查阅);

$.grep(_mozi,function(val,key){
//过滤函数有两个参数,第一个为当前元素,第二个为元素索引
if(val==墨子){
alert(数组值为 墨子 的下标是: +key);
}
});

var _moziGt1=$.grep(_mozi,function(val,key){
return key>1;
});
alert(_mozi数组中索引值大于1的元素为: +_moziGt1);

var _moziLt1=$.grep(_mozi,function(val,key){
return key>1;
},true);
//此处传入了第三个可靠参数,对过滤函数中的返回值取反
alert(_mozi数组中索引值小于等于1的元素为: +_moziLt1);

3. $.map(array,[callback])按给定条件转换数组 [一般]
解释:作为参数的转换函数会为每个数组元素调用, 而且会给这个转换函数传递一个表示被转换的元素作为参数. 转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组, 并扩展至原始数组中.
这个是个很强大的方法,但并不常用. 它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素.

var _mapArrA=$.map(_mozi,function(val){
return val+[新加];
});
var _mapArrB=$.map(_mozi,function(val){
return val==墨子 ? [只给墨子加]+val : val;
});
var _mapArrC=$.map(_mozi,function(val){
//为数组元素扩展一个新元素
return [val,(val+[扩展])];
});
alert(在每个元素后面加\’[新加]\’字符后的数组为: + _mapArrA);
alert(只给元素 墨子 添加字符后的数组为: + _mapArrB);
alert(为原数组中每个元素,扩展一个添加字符\’[新加]\’的元素,返回的数组为 +_mapArrC);

4 .$.inArray(val,array)判断值是否存在于数组中[常用]
解释: 确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 ).
记 得indexOf()方法了吗? indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0 的值,若未找到则返回-1.现在, 知道怎么用了吧. 有了它, 判断某个值是否存在于数组中,就变得轻而易举了.

var _exist=$.inArray(墨子,_mozi);
var _inexistence=$.inArray(卫鞅,_mozi)
if(_exist>=0){
alert(墨子 存在于数组_mozi中,其在数组中索引值是: +_exist);
}
if(_inexistence<0){
alert(卫鞅 不存在于数组_mozi中!,返回值为: +_inexistence+!);
}

5 .$.merge(first,second)合并两个数组[一般]
解释: 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素.
这个方法是用JQuery的方法替代原生concat()方法, 但功能并没有concat()强大, concat()可以同时合并多个数组.

//原生concat()可能比它还简洁点
_moziNew=$.merge(_mozi,[鬼谷子,商鞅,孙膑,庞涓,苏秦,张仪])
alert(合并后新数组长度为: +_moziNew.length+. 其值为: +_moziNew);

6 .$.unique(array)过滤数组中重复元素[不常用]
解释: 删除数组中重复元素. 只处理删除DOM元素数组,而不能处理字符串或者数字数组.
第一次看到这个方法,觉得这是个很便捷的方法, 可以过滤重复, 哈, 多完美, 但仔细一看, 仅限处理DOM元素. 功能8折了.所以, 我给它定义成了一个不常用的元素, 至少, 我用jQuery以来没用到过它.

var _h2Arr=$.makeArray(h2obj);
//将数组_h2Arr重复一次
_h2Arr=$.merge(_h2Arr,_h2Arr);
var _curLen=_h2Arr.length;
_h2Arr=$.unique(_h2Arr);
var _newLen=_h2Arr.length;
alert(数组_h2Arr原长度值为: +_curLen+ ,过滤后为: +_newLen
+
.共过滤 +(_curLen_newLen)+个重复元素)

7. $.makeArray(obj) 将类数组对象转换为数组[不常用]
解释: 将类数组对象转换为数组对象, 类数组对象有 length 属性,其成员索引为0至 length-1.
这是个多余的方法, 无所不能的$本来就包含了这个功能. jQuery官网上解释的非常模糊. 其实, 它就是将某个类数组对象(比如用getElementsByTagName获取的元素对象集合)转换成数组对象.

var _makeArr=$.makeArray(h2obj);
alert(h2元素对象集合的数据类型转换为: +_makeArr.constructor.name);//输出Array

8. $(dom).toArray()将所有DOM元素恢复成数组[不常用]
解释: 把jQuery集合中所有DOM元素恢复成一个数组;
并不常用的方法, 个人甚至觉得它和$.makeArray一样多余.

var _toArr=$(h2).toArray();
alert(h2元素集合恢复后的数据类型是: +_toArr.constructor.name);

[转载]Windows Phone 7应用之sina微博

mikel阅读(993)

[转载]Windows Phone 7应用之sina微博——UI设计 – 乱世经典 – 博客园.

Windows phone 7应用一直没有时间去做,上周在APP Store的论坛上看到一个国外DVP写了一篇Twitter在Wp7上客户端,仔细看了一下觉得很简单,只是单一利用WP7获取Twitter上信息列 表. 国内的微博我只玩过163网易的,但是可惜的是并没对开发人员开放API. 反而Sina推出了自己微博的API访问接口. 而且还出了相关SDK.

2010-11-27_212919

仔 细看了API文档很详细, 尝试把Sina的微博移植WP7客户端上,注册了一个新浪账号觉得Sina的微博界面有些过于简陋了.而且给我的第一感觉对页面色调的搭配上有些不舒服. 总体布局是4:1左右比例, 图片的边框有些太过明显,sina微博虽然给我第一感觉并不太好,但功能确实比网易的要丰富. 决定逐步的把Sina MiniBlog[微博]移植到WP7客户端上.本篇关于客户端UI设计 展示只做了两个界面.

Wp7 在安装附带有一个Express Bland 4设计器, Vs2010中关于如果做UI设计 总觉得界面太小 想对属性都是通过编码方式确定 尝试一番很耗费时间久放弃了,对于开发人员来说Express Bland设计器很多人第一直觉是抗拒的. 但是我使用完之后才知道设计器所带方便.

2010-11-27_214237

关 于WP7上Sina客户端 我打算逐步迭代方式把功能完善上来.对于WP7 的UI设计第一次做,色调搭配以及模板设计完全是按照自己设想去做. 有可能不太合适,也希望有人提出更好建议.打开Express Bland 4工具 新建一个Project.:命名SinaMiniBlogWP7Demo

2010-11-27_215052

创建解决方案结构:

2010-11-27_215151

创建WP7上Sina客户端登陆页面:LoginFrom.xaml先看看UI效果:

2010-11-27_215725

Sina链接API需要提供一个指定登陆账户.登陆微博WP7上客户端.登陆之后显示主页面设计UI如下:

2010-11-27_220035

如上展示模板.静态数据.初步设想是登陆WP7上Sina客户端后用户能够同Web页面一样操作自己的微博.而不是单一预览自己微博信息.发布自己微薄信息模板[功能上加上图片 超级链接等]:

2010-11-27_220443

微博信息及时浏览列表静态单一模板:

2010-11-27_220546

经常用微博的用户应该都知道,微博列表不仅可以发表单一信息 同时还可以发表丰富图片文字信息, 并且支持他人回复评论,收藏和转发等基本功能,鉴于此我特别比对自己比较熟悉的网易,初步分析三个微博预览模板,如上只是单一文字信息模板,:

模板A:包含图片 文字 超链接富文本显示模板 设计效果如下:

2010-11-27_221735

模板B:针对某条微博信息附带有文字或图片评论模板 设计效果如下:

2010-11-27_223238

如 上市附带评论文字信息模板,.对于附加图片的模板正在制作,另外对于有人也提出是否在回复人前面加上相关的个人图像类似QQ,但我觉得这样一来就反而使页 面更加混乱 信息失去重点,另外一个很实际问题 会给更多的人产生必要信息流量, 类似出现多条评论时 加以隐藏是一个触控按钮,对于单一列表 如果用户采用触屏方式当已到达 列表地步就会自动浏览加载更多信息和列表.

在发布微博信息那个页面也有人提出是否单独建立一个页面,附加更多表情和图片 在目前操作不便, 毕竟屏幕宽度有限,.这个问题正在考虑.

如上市关于Sina微博在WP7上UI设计初步设想,欢迎各位在留言中提出相关建议.

[转载]C#3.0新特性 扩展方法

mikel阅读(945)

[转载]C#3.0新特性 扩展方法 – 星空有我 – 博客园.

扩展方法可以使我们为现有的添加方法,现有的类可是是CLB的也可以是自己定义的。
注意事项:
通过this修饰方法第一个参数
方法声明在静态类中
方法通过对象调用
重要注意事项:
扩展方法和类中方法同名,扩展方法将永远不会被调用
扩展类型如果修改,扩展方法可能失效

下面我们讲一个扩展silverlight中RichTextBox的例子,在实际的开发中我们可能需要对RichTextBox取值或者设置值,在silverlight中并没有提供这个方法
实例如下:

建一个RichTextBox的扩展类RTBExtension:

代码

接下里我们在界面上拖一个RichtextBox TextBox 和两个Button,来测试这两个扩展方法

代码

运行的效果:

从Textbox中取值设置给RichtextBox

从RichtextBox中取值设置给Textbox

[转载]Jquery拖拽并简单保存

mikel阅读(1067)

[转载]Jquery拖拽并简单保存 – ygm – 博客园.

今闲着无聊 顺便看了下JQuery ui的拖拽插件,实现拖拽的方法很简单,看到效果后兴奋小下…但是如何保存顺序呢,想到了cookie,但是用如何用cookie保存顺序呢,直接保 存html代码下次读取覆盖可以,但是总感觉内容多的话 保存的东西比较多,后用ui插件获取id保存id在读取实现了顺序的保存,废话不多说..直接看代码…

<!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 runat=”server”>
<title></title>
<style type=”text/css”>
div
{
border: 1px solid red;
}
#myList
{
padding-top: 20px;
width: 500px;
background: #EEE;
list-style-type: none;
}
#myList li
{
height: 30px;
cursor: pointer;
margin: 20px;
border: 1px solid blue;
}
#myList a
{
text-decoration: none;
color: #0077B0;
}
#myList a:hover
{
text-decoration: underline;
}
#myList .qlink
{
font-size: 12px;
color: #666;
margin-left: 10px;
}
</style>

<script src=”JQuery-1.3.2.min.js” type=”text/JavaScript”></script>

<script src=”ui.core.js” type=”text/JavaScript”></script>

<script src=”ui.sortable.js” type=”text/javascript”></script>

<script src=”cookie.js” type=”text/javascript”></script>

<script type=”text/javascript”>
$(function() {

$(“#myList”).sortable({ delay: 1, containment: “div”, connectWith: “.otherlist”, stop: function() {
//alert($(“#myList”).sortable(“serialize”));
//alert($(“#myList”).sortable(“toArray”));
$.cookie(“myCookie”, $(“#myList”).sortable(‘toArray’), { expires: 7 })
}
});

$(“.qlink”).click(function() {
alert(this.className);
});
if ($.cookie(“myCookie”)) {
var ids = $.cookie(“myCookie”).split(“,”);
for (var i = 0; i < ids.length; i++) {
$(“#” + ids[i]).appendTo(“#myList”);
}
}

});

</script>

</head>
<body>
<div>
<ul id=”myList”>
<li id=”myList_mood”><a href=”#”>心情</a> </li>
<li id=”myList_photo”><a href=”#”>相册</a> <a href=”#” class=”qlink”>上传</a> </li>
<li id=”myList_blog”><a href=”#”>日志</a> <a href=”#” class=”qlink”>发表</a> </li>
<li id=”myList_vote”><a href=”#”>投票</a> </li>
<li id=”myList_shate”><a href=”#”>分享</a> </li>
<li id=”myList_group”><a href=”#”>群组</a> </li>
</ul>
</div>
</body>
</html>

呵呵.. 这下看到了效果,不足方面望高手赐教….

[转载]ASP.NETMVC3RC的一些新特性 (2010.11.9发布版)

mikel阅读(1086)

[转载]ASP.NETMVC3RC的一些新特性 (2010.11.9发布版) – 撞破南墙 – 博客园.

1控制Controller的SESSION

[ControllerSessionState(SessionStateBehavior.Disabled)]

//禁用SESSION

public class CoolController : Controller {

public ActionResult Index() {

object o = Session[“Key”]; // 触发异常

}

}

[ControllerSessionState(SessionStateBehavior.ReadOnly)]

public class CoolController : Controller {

public ActionResult Index() {

Session[“Key”] = “value”; // SESSION属于只读

}

}

2新的验证属性

2.1比较Compare

public class User {

[Required]

public string Password { get; set; }

[Required, Compare(“Password”)]

public string ComparePassword { get; set; }

}

2.2 控制客户端属性

UserName 属性被赋予UserNameAvailable,当username属于被编辑页面的时候,客户端验证将调用UserNameAvailable 方法

public class User {

[Remote(“UserNameAvailable”, “Users”)]

public string UserName { get; set; }

}

The following example shows the corresponding controller.

public class UsersController {

public bool UserNameAvailable(string username) {

return !MyRepository.UserNameExists(username);

}

}

2.3LabelFor和LabelForModel的新的重载函数

@Html.LabelFor(m => m.PropertyName, “Label Text”);

@Html.LabelForModel(“Label Text”);

3action可以使用缓存

当前时间: @DateTime.Now

被缓存时候的事件: @Html.Action(“GetDate”)

The GetDate action is annotated with the OutputCacheAttribute:

[OutputCache(Duration = 100, VaryByParam = “none”)]

public string GetDate() {

return DateTime.Now.ToString();

}

4″Add View” 的对话框变干净了。

不会跟以前一样把整个.NET FRAMEWORK 的类 都包含进去。

5 更小粒度的验证Granular Request Validation

跳过验证。

这次是粒度到了某个属性

public class BlogPostViewModel {

[SkipRequestValidation]

public string Description {get; set;}

}

之前的版本的粒度是整个函数

[HttpPost]

[ValidateInput(false)]

public ActionResult Edit(BlogPostViewModel post) {

// Save the post in the database

[转载]XML和实体序列化和反序列化

mikel阅读(1000)

[转载]XML和实体序列化和反序列化 – 星空有我 – 博客园.

近来的项目中用到了序列化就抽空学习了一下,拿出来给大家分享一下:

类为我们提供了自己对象串行化(Serialize)和反串行化(Deserialize)的xml的方法,该类可以序列化的内容:
公共类的公共读写字段或者属性
XmlElement对象
XmlNode对象
Dataset对象
实现了Icollection 或IEnumerable的类

该类在设计中有一个设计需求:
需要被序列化的类要提供一个空参数的构造函数,否则运行时会出现异常

在开发过程中可能会有很多地方要用到对象和XML相互转化,在此提供一个通用的类,提供泛类型的支持。

该类提供两方法,一个是从实体到返回XML字符串的方法,一个是把XML字符串装成对象实体的方法。下面我们来看看这个类是怎么用的。

首先建两个类USer和Users,User测试一个实体的序列化和反序列化,USers测试一个List集合序列化和反序列化。注意这两个类都标注了[Serializable]特性,并且提供了空参数的构造函数。

代码

[Serializable] public class User { public int ID { get; set; } public string Name { get; set; } public string Add { get; set; } public int Age { get; set; } public User() { this.ID = default(int); this.Name = default(string); this.Add = default(string); this.Age = default(int); } }
[Serializable] public class Users { public List<User> Datas { get; set; } public Users() { this.Datas=new List<User>(); } }

下面我们建一个页面Default.aspx,在这个页面中我们测试序列化,提供两个按钮和两个TextBox,来分别显示单个实体的序列化和List集合的序列化。

代码

<form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="一个对象序列化" onclick="Button1_Click" /> <br /> <asp:TextBox ID="TextBox1" runat="server" Width="100%" Height="200"></asp:TextBox><br /> <asp:Button ID="Button2" runat="server" Text="多个对象序列化" onclick="Button2_Click" /><br /> <asp:TextBox ID="TextBox2" runat="server" Width="100%" Height="200"></asp:TextBox><br /> </div> </form>

后台代码的实现:

代码

/// <summary> /// 一个对象序列化 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Button1_Click(object sender, EventArgs e) { User user = new User() { ID=1001,Name="小王",Add="北京",Age=21}; var str = SHelper.SaveXmlFromObj<User>(user); this.TextBox1.Text = str; } /// <summary> /// 多个对象序列化 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Button2_Click(object sender, EventArgs e) { Users users = new Users(); User user = new User() { ID = 1001, Name = "小王", Add = "北京", Age = 21 }; users.Datas.Add(user); users.Datas.Add(user); users.Datas.Add(user); var str = SHelper.SaveXmlFromObj<Users>(users); this.TextBox2.Text = str; }

序列化结果如下:

单对象:

<?xml version=”1.0″?><User xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:xsd=”http://www.w3.org/2001/XMLSchema“>  <ID>1001</ID>  <Name>小王</Name>  <Add>北京</Add>  <Age>21</Age></User>

List集合:

<?xml version=”1.0″?><Users xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:xsd=”http://www.w3.org/2001/XMLSchema“>  <Datas>    <User>      <ID>1001</ID>      <Name>小王</Name>      <Add>北京</Add>      <Age>21</Age>    </User>    <User>      <ID>1001</ID>      <Name>小王</Name>      <Add>北京</Add>      <Age>21</Age>    </User>    <User>      <ID>1001</ID>      <Name>小王</Name>      <Add>北京</Add>      <Age>21</Age>    </User>  </Datas></Users>

下面我们来测试反序列化:

首先建一个webservice,写两个测试方法:

代码

[WebMethod] public string GetObjFromXml(string data) { var obj = SHelper.LoadObjFromXML<User>(data); if (obj != null) { return obj.Name; } else { return "传入数据出错"; } } [WebMethod] public string GetObjsFromXml(string data) { var obj = SHelper.LoadObjFromXML<Users>(data); if (obj != null) { string returnstr = ""; foreach (User user in obj.Datas) { returnstr += user.Name + "\n"; } return returnstr; } else { return "传入数据出错"; } }

编译后运行,我们用刚才序列化出来的字符串贴出参数值位置就可以测试反序列化的方法,在此不再详述,有兴趣的童鞋可以把实例代码运行。

示例代码:http://files.cnblogs.com/Clivia/SerializerHelper.rar

[转载]强烈推荐:2010 iPhone/iPad英文原版书籍(第一季)

mikel阅读(1059)

[转载]强烈推荐:2010 iPhone/iPad英文原版书籍(第一季) – 银光映画 – 博客园.

iPhone/iPad开发的中文资料并不多,所以参考最新最经典的英文书籍成了程序员必须的修炼。

网上收集的2010年关于iPhone/iPad出版的书,与大家共勉,有做或打算学习iPhone/iPad开发的不要错过。

附件空间有限,放在网盘了,有AD,等待时间,不爽,有好网盘的推荐下。

1、iPhone and iPad in Action(经典Action系列)



Book Description
iPhone and iPad In Action, compiled by mobile software developer and blogger Brandon Trebitowski, simplifies existing iPhone topics while also updating them to account for the 3.4 SDK framework including iPad coverage. Beyond covering the basics of iPhone development, this edition also explores exciting topics such as the accelerometer, peer-to-peer gaming, mapkit, push notifications, and in-app purchasing. The reader is provided with step-by-step instructions on how to integrate the APIs into new or existing applications.
After completing this book, the reader will have all of the knowledge necessary to create fully functional iPhone applications ready for the App Store. There are many sample applications to work from including a chat client, video game, interactive map, and many others.
About the Author
Brandon Trebitowski is a software developer and author. In August of 2008, he started iCodeBlog.com to teach aspiring developers how to write software for the iPhone. After the blog was acquired by RightSprite in December of 2008, he began working full time for them developing mobile software.
Christopher Allen hosts iphonewebdev.com, the largest iPhone web dev community, and is a founder and organizer of the iPhoneDevCamp conference. A longtime technologist, Chris was one of the authors of TLS, the next-generation SSL protocol.
Shannon Appelcline is a widely published writer and technologist, who has written everything from game programming articles to comic books.
Book Details

  • Paperback: 600 pages
  • Publisher: Manning Publications; 1 edition (September,   2010)
  • Language: English
  • ISBN-10: 1935182587
  • ISBN-13: 978-1935182580

下载地址(11.43 MB)

2、iPhone 4 Made Simple

Book Description

Congratulations—you’ve purchased the new iPhone 4, the coolest smartphone on the market. Now it’s time to learn how to take advantage of all the features, apps, and secret techniques available. To accomplish this, look no further than

iPhone 4 Made Simple

. Over 1,000 screen visuals and clear-cut instructions guide you through both basic and advanced features of the iPhone 4, from email and calendar tips to navigating the App Store and understanding Bluetooth and Wi-Fi networks. Written by two successful smartphone trainers and authors, this is the go-to guide for the latest and greatest version of the iPhone.
What you’ll learn

  • Use copy/Paste, spotlight search, and voice memos
  • Support for both Windows and Mac users
  • Use music, videos, photos & voice notes
  • Detailed iTunes instructions
  • Sync playlists, videos, contacts, calendar, and notes
  • Fast email, phone, calendar, and browser tips
  • Create your own ringtones & wallpapers
  • Use Google Maps to find just about anything!
  • Navigate the App Store for games, productivity apps, and more
  • Understand Bluetooth and Wi-Fi network setup & security
  • Install & remove software icons
  • Use you phone internationally and save money when traveling overseas
  • Save your battery life by understanding the network settings
  • All the best tips and tricks for the touch screen

Book Details

  • Paperback: 840 pages
  • Publisher: Apress; 1 edition (August, 2010)
  • Language: English
  • ISBN-10: 1430231920
  • ISBN-13: 978-1430231929

下载地址(41.76 MB)

3、Beginning iPad Application Development

Book Description
A hands-on approach to iPad application development. Beginning iPad Application Development is written to help jumpstart beginning iPad developers. It covers the various topics in such a manner that you will progressively learn without being overwhelmed by the details. It adopts the philosophy that the best way to learn is by doing, hence the numerous Try It Out sections in all the chapters, which first show you how to build something and then explain how things work.

Although iPad programming is a huge topic, the aim for this book is to get you started with the fundamentals, and help you understand the underlying architecture of the SDK, and appreciate why things are done certain ways. After reading this book (and doing the exercises), you will be well equipped to tackle your next iPad programming challenge.

This book is for the beginning iPad developer who wants to start developing iPad applications using the Apple iPhone SDK. To truly benefit from this book, you should have some background in programming and at least be familiar with object-oriented programming concepts. If you are totally new to the Objective-C language, you might want to jump straight to Appendix D, which provides an overview of the language. Alternatively, you can use Appendix D as a quick reference while you tackle the various chapters, checking out the syntax as you try the exercises. Depending on your learning pattern, one of those approaches may work best for you.

From the Back Cover
Learn to develop successful—and profitable—iPad applications. Eager to start developing applications for the iPad? Then look no further than the book in your hands. This comprehensive, hands-on approach to iPad development walks you through all the necessary tools and skills required for successful iPad app programming. You’ll first familiarize yourself with the iPhone® SDK, Xcode®, and Interface Builder tools, all of which provide a solid foundation for developing apps. You’ll then explore the features and syntax of the Objective-C® language, which is essential for creating most iPad apps. Plus, you’ll discover how to best implement the many features of the iPhone SDK into your apps so that you can deploy your applications to the Apple AppStore.

Beginning iPad Application Development:

  • Explains the various types of iPad applications supported by the iPhone SDK
  • Discusses the various types of screen orientations and ways to handle rotations
  • Covers the new Gesture Recognizers available in this release of the iPhone SDK
  • Covers the new Split View-based Application project type
  • Zeroes in on database storage using SQLite3
  • Examines Web Services, Bluetooth programming, and Bonjour programming
  • Covers Apple Push Notification Services programming

Wrox Beginning guides are crafted to make learning programming languages and technologies easier than you think, providing a structured, tutorial format that will guide you through all the techniques involved.

About the Author
Wei-Meng Lee is a technologist and founder of Developer Learning Solutions, a technology company specializing in hands-on training in the latest Microsoft and Apple technologies. He is also the author of Beginning iPhone SDK Programming with Objective-C and writes frequently for online publications.

Book Details

  • Paperback: 600 pages
  • Publisher: Wrox (May, 2010)
  • Language: English
  • ISBN-10: 0470641657
  • ISBN-13: 978-0470641651

下载(11.43 MB)

4、Objective-C: Visual QuickStart Guide

Book Description
Objective C 2.0 is the object-oriented language that is the basis for Cocoa and Cocoa Touch, the development environment for the iPhone/iPod Touch.You’ll learn all the basics: from handling data and creating functions to managing memory and handling exceptions. For programmers who want to develop iPhone apps, it’s a must, and this title in the Visual QuickStart-style is the easy, fast way to get started.

Table of Contents:
Introduction
Chapter 1: Getting Started: Essential Objective-C
Chapter 2: Directing Program Flow
Chapter 3: Handling Data
Chapter 4: Creating Functions
Chapter 5: Classes and Objects
Chapter 6: Object-Oriented Programming
Chapter 7: Working with Object-Oriented Inheritance
Chapter 8: Categories, Posing, and Protocols
Chapter 9: Using Arrays and Dictionaries
Chapter 10: Managing Memory in Objective-C
Chapter 11: Exception Handling
Index

About the Author
Stephen Holzner is an award-winning author who has written extensively on programming languages, including XML, JavaScript, Visual Basic and more. With over 100 titles published, he’s sold over a million copies of his books and been translated into 16 languages. A former faculty member of MIT and Cornell, he teaches corporate seminars around the country.

Book Details

  • Paperback: 240 pages
  • Publisher: Peachpit Press; 1 edition (February, 2010)
  • Language: English
  • ISBN-10: 0321699467
  • ISBN-13: 978-0321699466

下载(5.68 MB)

5、iPhone The Missing Manual: Covers iPhone 4 & All Other Models with iOS 4 Software

Book Description
With multitasking and more than a 100 other new features, iPhone 4.0 is a real treat, cooked up with Apple’s traditional secret sauce of simplicity, intelligence, and whimsy. iPhone: The Missing Manual gives you a guided tour of everything the new iPhone has to offer, with lots of tips, tricks, and surprises. Learn how to make calls and play songs by voice control, take great photos, keep track of your schedule, and much more with complete step-by-step instructions and crystal-clear explanations by iPhone master David Pogue.

Whether you have a brand-new iPhone, or want to update an earlier model with the iPhone 4.0 software, this beautiful full-color book is the best, most objective resource available.

  • Use it as a phone — learn the basics as well as time-saving tricks and tips for contact searching, texting, and more
  • Treat it as an iPod — master the ins and outs of iTunes, and listen to music, upload and view photos, and fill the iPhone with TV shows and movies
  • Take the iPhone online — make the most of your online experience to browse the Web, read and compose email, use social networks, or send photos and audio files
  • Go beyond the iPhone — learn how to use the App Store, and how to multitask between your apps, organize them in folders, and read ebooks in iBooks

Unlock the full potential of your iPhone — with the book that should have been in the box.

About the Author
David Pogue, Yale ’85, is the weekly personal-technology columnist for the New York Times and an Emmy award-winning tech correspondent for CBS News. His funny tech videos appear weekly on CNBC. And with 3 million books in print, he is also one of the world’s bestselling how- to authors. In 1999, he launched his own series of amusing, practical, and user-friendly computer books called Missing Manuals, which now includes 100 titles.

Book Details

  • Paperback: 448 pages
  • Publisher: Pogue Press; 4 edition (August, 2010)
  • Language: English
  • ISBN-10: 1449393659
  • ISBN-13: 978-1449393656

下载(11.49 MB)

[转载]Flex Cairngorm详解

mikel阅读(1071)

[转载]Flex Cairngorm详解 – 宅男Johnny – 博客园.

Cairngorm是一个开源的Flex项目,为FLex提供了一个类似MVC的体系结构框架,它是Flex RIA开发的最好框架之一。使用Cairngorm框架可以大大提高开发和维护的效率。

Cairngorm说白了就是一大堆的设计模式和功能模块,它分为6部分,分别是:

  1. Business(业务逻辑部分)。
  2. Command(命令部分)。
  3. Control(控制部分)。
  4. Model(数据模型部分)。
  5. View(界面部分)。
  6. Value Object(数据部分)。一般简称VO

先来了解一下这6部分的组成和功能:

Business

Business包括两部分内容:Delegate和ServiceLocator。
ServiceLocator是一段用于描述远程服务的mxml文件,实际上如果不需要调用远程服务的时候我们可以不必写这样一个mxml文件,但是那样的话Cairngorm就失去了它强大的优势。
Delegate相当于一个代理,通过 Command调用,它的工作是定位远程服务并且完成相应的服务调用,ServiceLocator就是这个远程服务的定义。Delegate是一个单例 模式(singleton pattern),我们一般用如下的方式通过Delegate调用远程服务:

1 private var remoteObject:RemoteObject = ServiceLocator.getInstance().getRemoteObject("countingService");

其中 “countingService”在ServiceLocator中通过如下方式定义:

1 <?xml version="1.0" encoding="utf-8"?>
2 <cairngorm:ServiceLocator xmlns:fx="http://ns.adobe.com/mxml/2009"
5 xmlns:cairngorm="com.adobe.cairngorm.business.*">
6 <fx:Declarations>
7 <s:RemoteObject id="counting" destination="countingService"/>
8 </fx:Declarations>
9 </cairngorm:ServiceLocator>

当然,我们也可以通过HttpService和 WebService调用远程服务,如此的话,在Delegate中的调用方法也会有变化。Cairngorm提供了 getRemoteObject(), getHttpService(), getWebService()三种基本方法分别调用RemoteObject, HttpService和WebService三种远程调用机制。

每一个自定义的Delegate要具有如下的构造函数:

1 public function CountDelegate(responder:IResponder)
2 {
3 this.responder = responder;
4 }

为什么这样写,我们在Command部分解释。

Command

Command部分包含所有可执行的命令,你可 以理解为所有的后台函数调用都在Command部分完成,至于Command如何完成这些任务我们稍后再说。Command部分定义了ICommand接 口,并且需要实现一个叫做execute()的方法。我们可已通过定义自己的Command来完成我们需要的任务,所有的Command命令都要实现 ICommand和IResponder接口,IResponder接口定义了result()和fault()方法,所以我们自定义的Command应 当是如下效果:

01 package command
02 {
03 import com.adobe.cairngorm.commands.ICommand;
04 import com.adobe.cairngorm.control.CairngormEvent;
05 import mx.rpc.IResponder;
06 import mx.rpc.events.ResultEvent;
07 public class CountCommand implements ICommand, IResponder
08 {
09 public function CountCommand()
10 {
11 }
12 public function execute(event:CairngormEvent):void
13 {
14 }
15 public function result(data:Object):void
16 {
17 }
18 public function fault(info:Object):void
19 {
20 }
21 }
22 }

其中execute()函数声明一个Delegate变量,然后通过这个Delegate调用相应的方法。Command任务的实现实际上是通过 Delegate完成的,Command并不负责定位远程的服务。另外,Command的另外两个方法——result()和fault()一般用来处理 Delegate的返回信息,其中result()是在处理成功时执行,一般是对Model进行一些处理(Model部分有一个单例模式的 ModelLocator),fault是在处理失败时候执行。还记得上面我们提到的Delegate必须有一个带有IResponder类型的构造函数吗?现在我们可以解释了。
试想,我们用Command调用Delegate来执行远程服务,当Delegate执行完毕之后(或者说调用完毕之后)应当如何返回呢?Delegate应当如何定位是
哪一个Command传来的执行信号呢?通过给Delegate传递一个IResponder变量(实际上这个变量就是Command自己)Delegate就可以在处理完毕之后直
接调用Command中的result方法。一般Delegate中有这么一句话:

1 responder.result(objec);

object一般是要返回的值或者服务相关信息。

Control

COntrol部分定义了三个基类:CairngormEvent, CairngormEventDispatcher, FrontController。
CairngormEvent定义一个 Event,一般在CairngormEvent中存储数据模型,例如我们要做一个用户登录页面,点击登录按钮之后我们就发送一个包含用户名和登录密码的 event,我们可以把用户名和登录密码封装在一个类中(这就是后面我们要说的VO)然后放入event里面。
CairngormEventDispatcher是一个单例模式,它的作用就是发送消息,一般用如下方法调用:

1 CairngormEventDispatcher.getInstance().dispatchEvent(CairngormEvent);

FrontController相当于一个控制中心,我们所发送的所有消息和执行的所有命令都在这里有记录。FrontController的构造函数一般只有一句话:

1 public function MyFrontControl()
2 {
3 this.addCommand(EVENT_NAME,Command);
4 }

FrontController一个重要的任务就是它监听所有的Event,并且为这些消息指定相应的Command。在此提醒一下,我们需要在界面中声明FrontController,举例如下:

1 <s:Application xmlns:control="control.*">
2 <fx:Declarations>
3 <control:MyFrontControl/>
4 </fx:Declarations>
5 </s:Application>

MyFrontControl是位于control包中的一个自定义FrontController。

Model

Model定义了一个ModelLocator接口,我们只需要实现它并且写成一个单例模式即可。Model部分一般存放需要绑定在页面的数据。

01 package model
02 {
03 import com.adobe.cairngorm.model.ModelLocator;
04 import vo.VO;
05
06 [Bindable]
07 public class MyModelLocator implements ModelLocator
08 {
09 public var vo:VO;
10 private static var modelLocator:MyModelLocator;
11
12 public static function getInstance():MyModelLocator{
13 if(modelLocator==null){
14 modelLocator=new MyModelLocator();
15 }
16 return modelLocator;
17 }
18 }
19 }

View

View部分就是页面了,这部分需要注意的就是声明ServiceLocator和FrontControl。ServiceLocator的声明和我们之前提到的FrontControl是一样的。View部分的作用就是提供界面,发送信号,响应绑定数据变化。

VO

Value Object部分说简单点就是一个个对象,虽然Cairngorm定义了VO的一些接口,但是实际上可以不用。


了解了这6大部分之后,我们再来说一说Cairngorm的流程:
  1. View部分提供所有可视组件,FrontControl监听所有的Event。
  2. 当用户操作引起Event发送时,View通过CairngormEventDispatcher发送Event,之后Event在FrontControl接受处理。
  3. FrontControl将Event发送到相应的Command,Command调用相应Delegate。
  4. Delegate完成远程调用,返回到Command。
  5. Command结果处理部分处理返回的信息,并且对Model部分进行修改。
  6. Model部分的绑定数据被修改,View部分做出相应变化。

想进一步学习请看Flex Cairngorm入门例子