Monthly Archives: 二月 2012

Hello World 业界杂谈

书签里的js

2012 年 02 月 24 日 – 下午 12:03

如要你要去现在很流行的花瓣网去注册，会发现其中有一步，是让你将它的一个“采集到花瓣”的链接添加到你浏览器的书签里。当你使用这个浏览器再浏览其他网页时，点这个书签，就会弹出花瓣网采集该网页图片的界面~~
这是一个很nice的功能，已经有点类似客户端了，把这个书签里的“链接”拿出来，整理一下：

function(d,a,c,b){
	//首先检查document里面是否有'__huaban'，如果没有，就去加载一段自己的js
	if(a[c] && typeof a[c].showValidImages=='function'){
		a[c].showValidImages()
	}else{
		b=a.createElement('script');
		b.id='huaban_script';
		b.setAttribute('charset','utf-8');
		b.src='http://huaban.com/js/pinmarklet.js?'+Math.floor(new Date());
		a.body.appendChild(b);
	}
}(window,document,'__huaban'));

对，这段代码就是取加载一段花瓣网自己的js~~~~~~ :twisted: :twisted: 在别人的页面上注入一段自己的代码，然后它就可以为所欲为了：除了抓图片，抓视频，还可以取cookie，修改页面css等等
除了书签外，还可以直接在地址栏执行js的逻辑，比如：javascript:alert(document.title);
其实，把js放在书签里，只是浏览器地址栏执行js的一种表现而已

Tags | Permalink | Comment (0)
Hello World

[转]手机前端之jquery Mobile学习——swipe

2012 年 02 月 23 日 – 下午 4:07

这是经常会在Android手机上出现的一个动作，那就是手指划过屏幕的时候执行动作。
手机上使用到的事件，可以使用live()和bind()来绑定。
swipe 在一秒钟的间隔内水平方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px以内，否则不会触发).
swipeleft 在左边方向移动时触发该事件.
swiperight 在右边方向移动时触发该事件.
下面的代码以swipeleft为例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
        $("#home").live("swipeleft",function(){
            alert("我是滑动过来的!");          
        });
 
     });
    </script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="e" data-position="inline"><h1>swipeleft</h1></div>
<div data-role="content" style="text-align:center" >内容</div>
</body>
</html>

在Android模拟器上鼠标迅速向左滑动，则触发事件。

——转自：http://archive.cnblogs.com/a/2232011/
ps：不仅Android，ios也可以这么玩

Tags | Permalink | Comment (0)
Hello World 他山石

[转]php Output Buffer(输出缓冲)函数的妙用

2012 年 02 月 21 日 – 上午 10:44

在PHP编程中, 我们经常会遇到一些直接产生输出的函数, 如passthru(),readfile(), var_dump() 等. 但有时我们想把这些函数的输出导入到文件中,或者先经过处理再输出, 或者把这些函数的输出作为字符串来处理.

这时我们就要用到 Output Buffer(输出缓冲) 函数了.

处理输出缓冲的函数主要有这么几个:

ob_start();  //开始输出缓冲, 这时PHP停止输出, 在这以后的输出都被转到一个内部的缓冲里. 
 
ob_get_contents();  //这个函数返回内部缓冲的内容. 这就等于把这些输出都变成了字符串. 
 
ob_get_ length();  //返回内部缓冲的长度. 
 
ob_end_flush();  //结束输出缓冲, 并输出缓冲里的内容. 在这以后的输出都是正常输出. 
 
ob_end_clean();  //结束输出缓冲, 并扔掉缓冲里的内容.

举个例子, var_dump()函数输出一个变量的结构和内容, 这在调试的时候很有用.

但如果变量的内容里有 $#@60; , $#@62; 等HTML的特殊字符, 输出到网页里就看不见了. 怎么办呢?

用输出缓冲函数能很容易的解决这个问题.

ob_start();
 
var_dump($var); 
 
$out = ob_get_contents(); 
 
ob_end_clean();

这时var_dump()的输出已经存在 $out 里了. 你可以现在就输出:

echo "$#@60;pre$#@62;" . htmlspecialchars($out) . "$#@60;/pre$#@62;" ;

或者等到将来, 再或者把这个字符串送到模板(Template)里再输出.
———
转自：http://www.2008php.com/news_tx.php?ID=5146&News_topy=3

Tags | Permalink | Comment (0)
Hello World

stop!

2012 年 02 月 19 日 – 下午 1:33

jquery的animate方法可以创建各种炫酷的动画效果，但是，有些时候，我们却需要停止正在运行的动画，此时，就需要用到stop方法，使用方法非常简单，以下是jquery官方文档中的内容：

/* Start animation */
$("#go").click(function(){
  $(".block").animate({left: '+=100px'}, 2000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
  $(".block").stop();
});

即要停止谁的动画就让谁“stop”，而不用取区分具体正在运行的是什么动画

Tags | Permalink | Comment (0)
Hello World 他山石

[转] div模拟textarea

2012 年 02 月 08 日 – 上午 8:59

使用很简单，一个普通的block元素上加个contenteditable=”true”就ok了，如下：

<div contenteditable="true"></div>

true外面的引号甚至去掉都没关系。

contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。

ok，最麻烦的模拟textarea的可编辑效果已经解决了，现在想要使用div实现高度自适应那就像是给花花草草松松土一样容易的。使用min- height属性基本上就一步到位了，考虑到IE6浏览器对min/max家族不屑一顾，结合其内部元素溢出会撑开父标签高宽的特性，IE6浏览器直接定 高就可以了。

CSS代码：

.test_box {
    width: 400px; 
    min-height: 120px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    outline: 0; 
    border: 1px solid #a0b3d6; 
    font-size: 12px; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
}

HTML代码：

<div class="test_box" contenteditable="true"><br /></div>

——-
转自：http://blog.163.com/xiangfei209@126/blog/static/9869567420113154453944/

Tags | Permalink | Comment (0)

下一页 »

下一页 »