Skip to content

Commit 1792c6a

Browse files
rxaviersrxaviers
committed
Editable: added options for 1) editor type, 2) button position and type; editors and buttons are extensible by augmenting $.ui.editable.editors, $.ui.editable.saveButtons, and $.ui.editable.cancelButtons respectivelly; simplified event bindings; included a new demo.
1 parent 4a663a3 commit 1792c6a

File tree

5 files changed

+382
-162
lines changed

5 files changed

+382
-162
lines changed

‎demos/editable/buttons.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" >
5+
<title>jQuery UI Editable - Default functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.6.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.button.js"></script>
11+
<script src="../../ui/jquery.ui.editable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
.demo p span { display: inline-block; }
15+
.demo p span.sample { font-size: 14px; }
16+
.demo p span.info { font-family:fixed, monospace; white-space:pre; margin-left:2em; padding:0.5em; border: 1px solid #000; background: #eee; color: #333; vertical-align: middle; }
17+
</style>
18+
<script>
19+
$(function() {
20+
$( "#default" ).editable();
21+
$( "#inside" ).editable({buttons: "inside"});
22+
$( "#textual" ).editable({
23+
save: {type: "submit", text: "Save"},
24+
cancel: {type: "link", text: "Cancel"}
25+
});
26+
$( "#save-only" ).editable({
27+
save: {type: "submit", text: "Save"},
28+
cancel: null
29+
});
30+
$( "#cancel-only" ).editable({
31+
save: null,
32+
cancel: {type: "link", text: "Cancel"}
33+
});
34+
$( "#none" ).editable({buttons: null});
35+
36+
$( "#start-all" )
37+
.button()
38+
.click(function() {
39+
$( ".sample" ).editable("start");
40+
});
41+
$( "#submit-all" )
42+
.button()
43+
.click(function() {
44+
$( ".sample" ).editable("submit");
45+
});
46+
$( "#cancel-all" )
47+
.button()
48+
.click(function() {
49+
$( ".sample" ).editable("cancel");
50+
});
51+
});
52+
</script>
53+
</head>
54+
<body>
55+
56+
<div class="demo">
57+
58+
<button id="start-all">Edit all</button>
59+
<button id="submit-all">Submit all changes</button>
60+
<button id="cancel-all">Skip all changes</button>
61+
62+
<h2>Outside vs. Inside</h2>
63+
64+
<p>
65+
<span class="sample" id="default">John Doe</span>
66+
<span class="info">{buttons: "outside"} (default)</span>
67+
</p>
68+
69+
<p>
70+
<span class="sample" id="inside">John Doe</span>
71+
<span class="info">{buttons: "inside"}</span>
72+
</p>
73+
74+
<h2>Textual buttons</h2>
75+
76+
<p>
77+
<span class="sample" id="textual">John Doe</span>
78+
<span class="info">{
79+
save: {type: "submit", text: "Save"},
80+
cancel: {type: "link", text: "Cancel"}
81+
}</span>
82+
</p>
83+
84+
<p>
85+
<span class="sample" id="save-only">John Doe</span>
86+
<span class="info">{
87+
save: {type: "submit", text: "Save"},
88+
cancel: null
89+
}</span>
90+
</p>
91+
92+
<p>
93+
<span class="sample" id="cancel-only">John Doe</span>
94+
<span class="info">{
95+
save: null,
96+
cancel: {type: "link", text: "Cancel"}
97+
}</span>
98+
</p>
99+
100+
<h2>No buttons</h2>
101+
102+
<p>
103+
<span class="sample" id="none">John Doe</span>
104+
<span class="info">{buttons: null}</span>
105+
</p>
106+
107+
</div><!-- End demo -->
108+
109+
110+
111+
<div class="demo-description">
112+
<p>
113+
Click at 'John Doe' text to edit it.
114+
</p>
115+
<p>
116+
Save your changes by submiting (pressing Enter or clicking the save button).
117+
</p>
118+
<p>
119+
Abort your changes by pressing Esc or clicking the cancel button.
120+
</p>
121+
</div><!-- End demo-description -->
122+
123+
</body>
124+
</html>

‎demos/editable/default.html

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,32 @@
77
<script src="../../jquery-1.6.2.js"></script>
88
<script src="../../ui/jquery.ui.core.js"></script>
99
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.button.js"></script>
1011
<script src="../../ui/jquery.ui.editable.js"></script>
1112
<link rel="stylesheet" href="../demos.css">
1213
<style>
1314
.demo p { font-size: 14px; }
1415
.demo p span { display: inline-block; }
16+
.demo .log { width:400px; padding:0.5em; border: 1px solid #000; background: #eee; color: #333; }
1517
</style>
1618
<script>
1719
$(function() {
18-
$( "#editable" ).editable();
20+
var $log = $( ".log" ).hide();
21+
function log( text ) {
22+
$log.show().append( text + "<br/>" );
23+
}
24+
25+
$( "#editable" )
26+
.bind( "editsubmit", function( ev, ui ) {
27+
log( "submit: " + ui.value );
28+
})
29+
.bind( "editchange", function( ev, ui ) {
30+
log( "change: " + ui.value );
31+
})
32+
.bind( "editcancel", function() {
33+
log( "cancel" );
34+
})
35+
.editable();
1936
});
2037
</script>
2138
</head>
@@ -27,6 +44,8 @@
2744
Name: <b><span id="editable">John Doe</span></b>
2845
</p>
2946

47+
<p class="log ui-corner-all"></p>
48+
3049
</div><!-- End demo -->
3150

3251

@@ -39,7 +58,7 @@
3958
Save your changes by submiting (pressing Enter or clicking the save button).
4059
</p>
4160
<p>
42-
Abort your changes by losing focus (blur) or clicking the cancel button.
61+
Abort your changes by pressing Esc or clicking the cancel button.
4362
</p>
4463
</div><!-- End demo-description -->
4564

‎demos/editable/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<h4>Examples</h4>
1212
<ul>
1313
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
14+
<li><a href="buttons.html">Buttons</a></li>
1415
</ul>
1516
</div>
1617

‎themes/base/jquery.ui.editable.css

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@
77
*
88
* http://docs.jquery.com/UI/Tooltip#theming
99
*/
10-
.ui-editable-content { position: relative; }
10+
.ui-editable .ui-widget-content.ui-state-default {background: none !important;}
11+
.ui-editable-form { display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; }
1112
.ui-editable-placeholder { color: #555; font-style: italic; }
12-
.ui-editable-input { margin-right: 16px; padding: .2em; border: none; background: none; height: 32px; }
13-
.ui-editable-button { position: absolute; width: 16px; height: 16px; display: block; right: 0; }
14-
.ui-editable .ui-editable-button { background: none; border: none; }
15-
.ui-editable-save { top: 0; }
16-
.ui-editable-cancel { bottom: 0; }
13+
.ui-editable-input { border: none; padding: 0; margin: .2em 0;
14+
vertical-align: middle; margin-left: .4em; margin-right: .4em; }
15+
.ui-editable-save, .ui-editable-cancel { font-size:0.74em !important; }

0 commit comments

Comments
 (0)