Simple Sina weibo™
———————–
本扩展修改了新浪微博的内容界面。主要的更改有：
1、将内容区域的宽度设置成满屏，新浪微博原始版本的界面利用率低，而且不能设置满屏。
2、将右侧边栏的内容移入到右侧的一个可折叠窗口。点击可展开/关闭。
3、去掉了中间区域的一些乌七八糟的信息。
4、去掉尾部广告和其他信息。
5、Google化页面顶部工具条。小清新做不来，只请新了工具条。
ps:
一晚上的时间写的，有些仓促，细节很多不完善的地方，有待修改。
–2011-08-01 01:52
点击进入市场安装：Simple Sina weibo™
//===============================================
update: 2011-08-01 22:02
———–
1、添加用户配置弹窗，两种模式供选择：全屏模式和正常模式。
2、对全屏模式做了微调，使界面更美观。
update: 2011-08-01 10:22
———–
1、修复模板主题背景bug，现已支持模板主题
update: 2011-08-01 01:52
———–
已知问题：
1、暂不支持模板里的背景图片，因为背景图片大小是固定的。
———————
敬请提修改意见，非常感谢。
//===============================================
Archive for ‘Design’ Category
2011年08月1日
2011年04月15日
前一段日本地震，网易深度搞了一个专题：日本地震前后对比图像。效果很炫，出现后各种被模仿，跟风研究了下代码。
自己做了个Demo，点击查看效果：Demo
原理
1、添加两个div：before和after，并通过absolute定位将二者叠放在一起
2、分别设置这两个div的背景图片为要对比的图片。
3、通过mouseover事件控制上层的那个div的宽度。
4、remove原来的图片
jQuery部分的源码
$(function(){
$(‘.beforeafter’).each(function(){
var $afterimg=$(this).find(‘img[rel=after]‘);
var $beforeimg=$(this).find(‘img[rel=before]‘);
$(this).append(”
“).find(‘.after’).width($afterimg.width()).height($afterimg.height())
.css({“background”:”url(“+$afterimg.attr(’src’)+”)”});
$(this).append(”
“).find(‘.before’).width($beforeimg.width()).height($beforeimg.height())
.css({“background”:”url(“+$beforeimg.attr(’src’)+”)”});
var offset=$(this).find(‘.before’).offset().left;
$(this).mousemove(function(event){
if((event.clientX-offset)50)
{
$(this).find(‘.before’).width(event.clientX-offset)
.css(“border-right”,”5px solid #333″);
};
});
$afterimg.remove();
$beforeimg.remove();
})
});
css部分源码
.show{
margin:20px 0 20px 0 ;
}
.beforeafter {
position: relative;
}
.before{
position:absolute;
left:0px;
top:0px;
}
PS：注意由于absolute布局不占据流空间，故after和before的position不能同时定义为absolute,否则后面的布局就出问题了。
//===============================================
项目中遇到这样的需求：需要清除oracle数据库中当前登录用户下的所有具有某一前缀的表。
于是写了个存储过程。
案例描述：
删除当前用户下所有具有“SC_”前缀的表
案例分析:
获取到所有具有该前缀的表名，然后依次drop这些表
解决方案
存储过程的代码如下：
create or replace procedure droptab_beginwith_SC_ is
–author:zhiyelee
–Blog:http://tsnrose.com
–useage: delete from current database tables starting with ‘SC_’ of current user
begin
dbms_output.put_line(‘Begin’);
dbms_output.put_line(‘//===============================================’);
for tab in(select table_name from tabs where table_name like ‘SC\_%’ escape ‘\’) loop
begin
execute immediate ‘drop table ‘||tab.table_name;
dbms_output.put_line(’successfully drop table ‘||tab.table_name);
end;
end loop;
dbms_output.put_line(‘//===============================================’);
dbms_output.put_line(‘Done’);
commit;
end droptab_beginwith_SC_;
背景知识
1、Oracle中获取当前用户所有表的语句
select table_name from tabs ;
2、oracle中转义符的用法：
escape关键字经常用于使某些特殊字符，如通配符：’%’,’_’转义为它们原来的字符的意义，被定义的转义字符通常使用’\’,但是也可以使用其他的符号。
select table_name from tabs where table_name like ‘SC\_%’ escape ‘\’;
这儿使用’\’作转义符，当然这儿也可以换成’/’等其它字符。
//===============================================
2011年04月13日
最近一个项目中用到了Ajax的跨域请求，于是Google了下解决方案。
发现的最简单的一个解决方案是用JQuery的getJSON方法。该解决方案的前提是服务端返回JSON格式的数据。
demo的地址：Demo
看下JQuery部分的代码：
$(function(){
$(‘#commit’).click(function() {
var name=$(‘#username’).val();
var content=$(“#content”).val();
var url=”http://tsnrose.com/download/jQ_ajax.php?name=”+name+”&content=”+content+”&jsoncallback=?”;
$.getJSON(url,function(data){
$(“#resText3″).empty();
$.each(data, function( i,item ){
var html=”;
html=”
“+item['name']+”
”
+item['content']+”
“;
$(“.commentList”).append(html);
});
});
$(‘#username’).val(”);
$(“#content”).val(”);
});
//Gloable
$(“#loading”).ajaxStart(function(){
$(this).show();
});
[...]
2011年03月19日
最近在学jQuery,于是买了本《锋利的jQuery》想系统的学一下，省得网上学的只鳞片爪的没有一个系统的结构。不过买了后才发现这本书果然如网上评价的一般：错误很多。买书，还是买国外的经典版比较好，省得看的时候被硌着眼。
前不久把 CSS Mastery啃完了，心痒难耐想逐步美化下自己的页面，顺便练练手。从图片做起，给图片加了个边框，做了圆角然后弄了个阴影，完事后觉得效果还是不甚明显，于是琢磨着给图片加个悬浮标题。结合正在学的jQuery搞了一个：Demo
1、功能
将图片img的相关属性提取出来显示为悬浮标题。提取的规则：
1、若图片有title属性，提取title属性并显示。
2、若无title属性，提取alt属性并显示。
3、若无title属性，也无alt属性，提取图片名并显示，如aa.jpg bb.png cc.gif dd.bmp ee.jpeg等。
ps:我这儿未考虑图片的src不是以后缀名结尾的形式。
2、实现
用的jQuery实现的，当然其中涉及到css,然后就是在获取图片名称时用到了正则表达式。
来看一下核心代码。注释看Demo里的源码
$(window).load(function() {
$("img").each(function() {
$("img:not([title])").each(function() {
var img_src=$(this).attr("src");
var img_name=img_src.match(/[^/]+.(jpg|png|jpeg|gif|bmp)/ig);
if($(this).attr("alt") !=”) $(this).attr("title", $(this).attr("alt"))
else $(this).attr("title", img_name);
});
var $img=$(this);
$(this).wrap("<span class=’hover_image’ style=’width:"+$img.width()+"px’></span>");
$(this).parent(".hover_image").hover(function(){
$(this).append("<div class=’hover_title ‘ style=’width:"+$img.width()*0.5+"px;left:"
+($img.offset().left-$img.parent().offset().left)+"px’>"
+$img.attr("title")+"</div>");
$img.next().show();},
function(){$img.next().fadeOut("slow").remove();});
});
});