colonymech / docs / www / colonyscout / internal / jeditable / default.html @ f59acf11
History | View | Annotate | Download (5.21 KB)
| 1 |
<?php
|
|---|---|
| 2 |
|
| 3 |
/* No hardoced URL's in examples. Just copy the folder to server. */
|
| 4 |
$folder = str_replace(basename($_SERVER['PHP_SELF']), '', $_SERVER['PHP_SELF']);
|
| 5 |
$url = sprintf('http://%s%sphp/', $_SERVER['SERVER_NAME'], $folder);
|
| 6 |
|
| 7 |
?>
|
| 8 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
| 9 |
<html xmlns="http://www.w3.org/1999/xhtml" debug="true"> |
| 10 |
|
| 11 |
<head>
|
| 12 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| 13 |
<title>Jeditable Edit In Place Demo</title> |
| 14 |
<meta name="generator" content="Mephisto" /> |
| 15 |
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" /> |
| 16 |
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" /> |
| 17 |
<script src="/mint/?js" type="text/javascript"></script> |
| 18 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> |
| 19 |
<script src="jquery.jeditable.js" type="text/javascript" charset="utf-8"></script> |
| 20 |
<script type="text/javascript" charset="utf-8"> |
| 21 |
|
| 22 |
$(function() {
|
| 23 |
|
| 24 |
$(".editable_select").editable("<?php print $url ?>save.php", {
|
| 25 |
indicator : '<img src="img/indicator.gif">',
|
| 26 |
data : "{'Lorem ipsum':'Lorem ipsum','Ipsum dolor':'Ipsum dolor','Dolor sit':'Dolor sit'}",
|
| 27 |
type : "select",
|
| 28 |
submit : "OK",
|
| 29 |
style : "inherit",
|
| 30 |
submitdata : function() {
|
| 31 |
return {id : 2};
|
| 32 |
}
|
| 33 |
});
|
| 34 |
$(".editable_select_json").editable("<?php print $url ?>save.php", {
|
| 35 |
indicator : '<img src="img/indicator.gif">',
|
| 36 |
loadurl : "<?php print $url ?>json.php",
|
| 37 |
type : "select",
|
| 38 |
submit : "OK",
|
| 39 |
style : "inherit"
|
| 40 |
});
|
| 41 |
$(".editable_textarea").editable("<?php print $url ?>save.php", {
|
| 42 |
indicator : "<img src='img/indicator.gif'>",
|
| 43 |
type : 'textarea',
|
| 44 |
submitdata: { _method: "put" },
|
| 45 |
select : true,
|
| 46 |
submit : 'OK',
|
| 47 |
cancel : 'cancel',
|
| 48 |
cssclass : "editable"
|
| 49 |
});
|
| 50 |
$(".editable_textile").editable("<?php print $url ?>save.php?renderer=textile", {
|
| 51 |
indicator : "<img src='img/indicator.gif'>",
|
| 52 |
loadurl : "<?php print $url ?>load.php",
|
| 53 |
type : "textarea",
|
| 54 |
submit : "OK",
|
| 55 |
cancel : "Cancel",
|
| 56 |
tooltip : "Click to edit..."
|
| 57 |
});
|
| 58 |
|
| 59 |
$(".click").editable("<?php print $url ?>echo.php", {
|
| 60 |
indicator : "<img src='img/indicator.gif'>",
|
| 61 |
tooltip : "Click to edit...",
|
| 62 |
style : "inherit"
|
| 63 |
});
|
| 64 |
$(".dblclick").editable("<?php print $url ?>echo.php", {
|
| 65 |
indicator : "<img src='img/indicator.gif'>",
|
| 66 |
tooltip : "Doubleclick to edit...",
|
| 67 |
event : "dblclick",
|
| 68 |
style : "inherit"
|
| 69 |
});
|
| 70 |
$(".mouseover").editable("<?php print $url ?>echo.php", {
|
| 71 |
indicator : "<img src='img/indicator.gif'>",
|
| 72 |
tooltip : "Move mouseover to edit...",
|
| 73 |
event : "mouseover",
|
| 74 |
style : "inherit"
|
| 75 |
});
|
| 76 |
|
| 77 |
/* Should not cause error. */
|
| 78 |
$("#nosuch").editable("<?php print $url ?>echo.php", {
|
| 79 |
indicator : "<img src='img/indicator.gif'>",
|
| 80 |
type : 'textarea',
|
| 81 |
submit : 'OK'
|
| 82 |
});
|
| 83 |
|
| 84 |
});
|
| 85 |
</script>
|
| 86 |
|
| 87 |
<style type="text/css"> |
| 88 |
#sidebar {
|
| 89 |
width: 0px;
|
| 90 |
}
|
| 91 |
|
| 92 |
#content {
|
| 93 |
width: 770px;
|
| 94 |
}
|
| 95 |
|
| 96 |
.editable input[type=submit] {
|
| 97 |
color: #F00;
|
| 98 |
font-weight: bold;
|
| 99 |
}
|
| 100 |
.editable input[type=button] {
|
| 101 |
color: #0F0;
|
| 102 |
font-weight: bold;
|
| 103 |
}
|
| 104 |
|
| 105 |
</style>
|
| 106 |
|
| 107 |
</head>
|
| 108 |
|
| 109 |
<body>
|
| 110 |
<div id="wrap"> |
| 111 |
<div id="header"> |
| 112 |
<p>
|
| 113 |
<h1>Jeditable</h1><br /> |
| 114 |
<small>Edit in place plugin for jQuery.</small> |
| 115 |
<ul id="nav"> |
| 116 |
<li id="first"><a href="/" class="active">weblog</a></li> |
| 117 |
<li><a href="/projects" class="last">projects</a></li> |
| 118 |
<!--
|
| 119 |
<li><a href="/cv" class="last">cv</a></li>
|
| 120 |
-->
|
| 121 |
</ul>
|
| 122 |
</p>
|
| 123 |
</div>
|
| 124 |
<div id="content"> |
| 125 |
|
| 126 |
<div class="entry"> |
| 127 |
|
| 128 |
<p>You might also want to check <a href="custom.html">custom inputs demo</a>. |
| 129 |
|
| 130 |
<h2>Normal textarea</h2> |
| 131 |
|
| 132 |
<p class="editable_textarea" id="paragraph_1"><?php print file_get_contents($url . 'load.php?id=paragraph_1') ?></p> |
| 133 |
|
| 134 |
<h2>Inlined select</h2> |
| 135 |
<p><b class="editable_select" id="select_1" style="display: inline"> <?php print file_get_contents($url . 'load.php?id=select_1') ?></b> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <b class="editable_select_json" id="select_2" style="display: inline"> <?php print file_get_contents($url . 'load.php?id=select_2') ?></b> euismod tincidunt ut laoreet dolore magna aliquam erat volutp</p> |
| 136 |
|
| 137 |
<h2>Textile renderer</h2> |
| 138 |
<div class="editable_textile" id="paragraph_2"><?php print file_get_contents($url . 'load.php?id=paragraph_2&renderer=textile') ?></div> |
| 139 |
|
| 140 |
<h2>Different events</h2> |
| 141 |
<p>
|
| 142 |
<b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should |
| 143 |
<b class="dblclick" style="display: inline">doubleclick</b> instead? Really lazy people can just |
| 144 |
<b class="mouseover" style="display: inline">mouseover me</b>... |
| 145 |
</p>
|
| 146 |
|
| 147 |
</div>
|
| 148 |
<div id="sidebar"> |
| 149 |
|
| 150 |
</div>
|
| 151 |
|
| 152 |
<div id="footer"> |
| 153 |
</div>
|
| 154 |
|
| 155 |
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> |
| 156 |
<script type="text/javascript"> |
| 157 |
_uacct = "UA-190966-1";
|
| 158 |
urchinTracker();
|
| 159 |
</script>
|
| 160 |
|
| 161 |
</body>
|
| 162 |
</html>
|