Hatena::ブログ(Diary)

jQuery メモ帳

2008-01-16 jQuery Edit in place

自動挿入広告を消す。

下のエントリのサンプルを、Xreaに置いた時、xreaサーバでは、bodyタグの直後に広告が自動挿入されます。

なんなので、自動挿入広告をやめて手動で挿入することにしました。

jQueryを使うことで、自動挿入広告を消すことが出来ます。

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
<!--
(function($){

    jQuery(function(){
        jQuery("div").eq(0).remove();
    });
})(jQuery);
//-->

</script>

とりあえず、お試しなら、このコードをxreaの自動広告付きのドキュメントにこぴぺすれば、よいです。

xreaの広告挿入の決まりに従って手動挿入してください。

また、この方法にすることにしたら、jqueryダウンロードしましょ。

memo:

jQuery("div指定した要素やクラス").eq(0番目の要素).remove()はずす;

テキストをクリックするとテキストエリアになるjQuery

ADD0117

はてなでは、「その場編集」とよんでいるらしい。


  Edit In Place with AJAX Using jQuery Javascript Library by 15 Days Of jQueryをみながら

作ってみました。

実際に出来上がったもの、Edit in place Samples



index.php で保存して、同じディレクトリに、document.html(属性606位で、) php5で、
php4ならfile_put_contentsを書き換えれば、いいです。

<?php

		
	if(isset($_POST['id']) and !empty($_POST['id']) 
	and isset($_POST['content']) and !empty($_POST['content'])){
	
		$content = strip_tags($_POST['content']);
		$content = htmlspecialchars($content);
		$content = nl2br($content);
		file_put_contents("document.html",$content);
		$save_document="";
	}else{
		$save_document=file_get_contents("document.html");
	}
	$id = "sample";
	
	
	
$result=<<<DOC

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="divEdit_files/editinplace.css" rel="Stylesheet" type="text/css">
	<script src="/js/jquery.js" type="text/javascript"></script>

<script>
(function($){

	jQuery(function(){
		setClickable();
	});
	
	function setClickable(){
		
		jQuery('#editInPlace').click(function() {
										 
			var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>';
			var button   = '<p><input type="button" value="保存" class="saveButton" /> &nbsp; <input type="button" value="キャンセル" class="cancelButton" /></p></div>';
			var revert   = $(this).html();
			
			jQuery(this).after(textarea+button).remove();
			jQuery('.saveButton').click(function(){saveChanges(this, false);});
			jQuery('.cancelButton').click(function(){saveChanges(this, revert);});
		})
		.mouseover(function() {
			jQuery(this).addClass("editable");
		})
		.mouseout(function() {
			jQuery(this).removeClass("editable");
		});
	};
	
	function saveChanges(obj, cancel) {
	if(!cancel) {
		var t = jQuery(obj).parent().siblings(0).val();
		$.post("index.php",{
		  content: t,id: "$id"
		},function(txt){
		jQuery("#editInPlace").html(t);
                //jQuery("#editInPlace").load("document.html");
		});
	} else {
		var t = cancel;
	}
	
		if(t=='') t='(click to add text)';
			jQuery(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove();
			setClickable();
		}
})(jQuery);

</script>	
<style type="text/css">
	body{
		font-family: arial, helvetica, sans-serif;
		font-size: small;
	}
	
	.editable, textarea{
		background-color: #ccf;
		padding:1em;
		border:1px dashed #0099FF;
	}
	
	textarea{
		width: 95%;
		font-size: 100%;
	}
	
	img.progress{
		vertical-align: middle;
		padding: 0 10px;
	}
	.cancelButton{
		padding:3px 5px;
		background:#eed;
		border:1px solid #ccc;
	}
	.saveButton{
		padding:3px 5px;
		background:#eed;
		border:1px solid #ccc;
	}
</style>	
<title>Edit-in-Place with jQuery</title>	
</head>
<body>
<h1>Edit-in-Place with jQuery</h1>
<div class="" id="editInPlace">$save_document</div>
</body>
</html>
DOC;
echo $result;
exit;
?>