- <html>
- <head>
- <title>Click me to edit me</title>
- <script type="text/javascript" src1="http://static.awawaya.com/jquery-1.8.2.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $('div').click(function() {
- if ($(this).hasClass('btn_clicked')) {
- $(this).removeClass('btn_clicked');
- } else if (!$(this).hasClass('clicked')) {
- $(this).addClass('clicked');
- var strContent = $(this).html();
- strContent = '<form><textarea>' + strContent + '</textarea><br />';
- strContent += '<input type="button" value="Save" /> ';
- strContent += '<input type="button" value="Cancel" /> ';
- strContent += '<input type="reset" value="Reset" /></form>';
- $(this).html(strContent);
- $(':button').click(function() {
- var _this = $(this);
- var strOnBtn = _this.val();
- var textarea = $('textarea');
- var str = textarea.val();
- var blnUnbind = true;
- if ('Cancel' == strOnBtn) {
- $(':reset').trigger('click');
- str = textarea.val();
- } else if ('Save' == strOnBtn && str.length == 0) {
- blnUnbind = false;
- alert('Please input some words!!!');
- }
- if (blnUnbind) {
- _this.unbind('click');
- var p = $('div');
- p.html(str);
- p.removeClass('clicked');
- p.addClass('btn_clicked');
- }
- });
- }
- });
- });
- </script>
- <style type="text/CSS">
- div {background-color:green; padding:5px;}
- textarea {width:100%;}
- form {margin:0px;}
- </style>
- </head>
- <body>
- <div>Click me to edit me</div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/100920135783.html
来源: http://www.codesnippet.cn/detail/100920135783.html