2011年04月15日

项目中遇到这样的需求:需要清除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 '\';

这儿使用’\'作转义符,当然这儿也可以换成’/'等其它字符。

//===============================================

Tags: ,. 705 人浏览
2011年04月14日

前一段突击css时学到的,一直没时间整理,这儿整理备忘下。

css实现div的垂直水平居中,到这儿看一下示例效果:Demo
不罗嗦,直接上CSS源码:

.inner{
	position:absolute;
	width:200px;
	height:200px;
	left:50%;
	top:50%;
	margin-left:-100px;/*** margin-left=宽度的一半 ***/
	margin-top:-100px;/*** margin-top=高度的半 ***/
}

其实原理很简单

1、position:absolute使得div脱离文档流。注意只有定义了absolute(或者relative,fixed,不过这儿这两个都不合适,可自行测试)才能使用left和top等属性。
2、left和top定义为50%使其居中,注意只定义了这个并不能实现真正意义的居中,这样图片的offsetLeft=(屏幕宽度)/2+图片宽度,offsetRight=(屏幕宽度)/2-图片宽度。所以需要设置margin-left和margin-top进行微调
3、margin-left和margin-top分别负向偏移div的宽度和高度的一半,使图片真正意义上居中。

这个不止适用于div,可应用于任何block元素。
//===============================================

Tags: . 509 人浏览
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(); }); $("#loading").ajaxStop(function(){ $(this).hide(); }); })

这儿请求的页面是jQ_ajax.php(测试),这个页面解析Ajax请求提交的数据返回一个JSON格式的数据。
为了测试跨域,我把这个php文件放在本站的服务器下,上面的Demo放在SAE上。当然如果你需要自己本地测试这个实现,可以直接请求我放在SAE上的PHP页面就行测试~~

访问这个地址查看返回的JSON数据格式:
http://zhiyelee.sinaapp.com/tutorial/jQuery/other/jQ_ajax.php?name=zhiyelee&content=http://twitter.com/zhiyelee

PHP页面源码:


	$name=$_REQUEST['name'];
	$content=$_REQUEST['content'].'  @Ajax';//这儿可以做任意的其它处理
	$array[] = array('name'=>$name,'content'=>$content);

	$json_str = json_encode($array);
	echo $_REQUEST['jsoncallback'].'('.$json_str.')';

//===============================================

Tags: ,,. 745 人浏览
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();});
     });
});

(全文…)

Tags: ,,. 1,485 人浏览
2011年03月10日

我们在使用float进行布局设计时经常会遇到这样的困扰

当包围容器下的元素全部是浮动元素时,包围容器不能在视觉上包围子元素。

这是因为浮动元素脱离了文档流,所以包围容器也不占据空间。对于此我们常用的方法是使用overflow进行处理,当然也可以用clear。
来看一下overflow的几个用法:

一、overflow的用法
1、清理float

我们可以使用overflow:heddden 或者overflow:auto 来清理浮动元素。

.wrapper{
    overflow:auto;
}
2、防止文字环绕图片 demo

overflow还能起到防止文字环绕图片的效果。假设我们想实现这样的效果:左边是头像,右边是bio。这儿就可以使用overflow来实现这样的效果

.bio{
    overflow:auto;
}
二、overflow的缺陷及补救
1、overflow的缺陷 Demo

overflow虽然用起来很顺手,但是它也有其缺陷。当浮动元素的宽度超过包围元素的宽度时(如出现长网址或者大图片),就会出现异常。

1、overflow:auto:当浮动元素的宽度超过包围元素的宽度时,就会出现滚动条。
2、overflow:hidden:当浮动元素的宽度超过包围元素的宽度时,hidden导致内容丢失。

2、缺陷的补救 Demo

1、使用word-wrap强制断词换行

.container {
	word-wrap: break-word;
}

2、设置max-width防止图片超出范围.

.container img {
	max-width: 100%;
	height: auto;
}

update 2011-03-12

感谢飘流同学的提醒,IE6及其以下中不支持max-width,对overflow支持也有问题,不过可以用_width或JS解决。

//===============================================

Tags: . 1,299 人浏览