点击变input编辑内容,点击变下拉框-freejs.net代码演示

首页>>表单>>点击变input编辑内容,点击变下拉框(2013-12-09)

点击变input编辑内容,点击变下拉框

演示

下载

赞赏支持

XML/HTML Code

<div id="page">
<table>
<caption>The database. See your changes here.</caption>
<tr>
<th>Object</th>
<th>First name</th>
<th>Last name</th>
<th>Favourites</th>
<th>Direction</th>
</tr>
<tr>
<td>person</td>
<td><span data-bind="text: person.firstname"></span>
<td><span data-bind="text: person.lastname"></span>
<td> <div style="width: 200px" data-bind="text: person.favourites"></div>
<td><span data-bind="text: person.direction"></span>
</tr>
<tr>
<td>person2</td>
<td><span data-bind="text: person2.firstname"></span>
<td><span data-bind="text: person2.lastname"></span>
<td> <div style="width: 200px" data-bind="text: person2.favourites"></div>
<td><span data-bind="text: person2.direction"></span>
</tr>
</table>
<p>
<div id="example-input" class="demo">
<div class="description">
<h2>Simple text input field</h2>
First example is a straightforward text input. Click on the underlined
text to modify it.
<ul>
<li>The url to post to is supplied.</li>
<li>Clicking outside the edit field submits the data</li>
<li>Hiting return normally submits the data too</li>
</ul>
<pre class="example">
Firstname <span
class="editable"
data-url="/internal/person/firstname">John</span>
<script>
$('.editable').jinplace();
</script>
</pre>
</div>
<div class="try-it">
<p>Click on the name to edit
</div>
</div>
<div id="example-textarea" class="demo">
<div class="description">
<h2>Using a textarea</h2>
By default you get a normal text input. To get a textarea, then you need to set the
type to <em>textarea</em>.
<ul>
<li>Set <em>data-type</em> to <kbd>textarea</kbd></li>
<li>Everything else is the same as for regular inputs</li>
</ul>
<pre class="example">
<div class="editable"
data-type="textarea" data-url="/internal/person/favourites">
Wild geese that fly with the moon on their wings
</div>
</pre>
</div>
<div class="try-it">
<p>Click textarea, modify and click outside it.</p>
</div>
</div>
<div id="example-select" class="demo">
<div class="description">
<h2>Using a select dropdown</h2>
You can also have a list of choices with a select list.
In this case you must supply the list of possible choices in the <b>data-data</b>
attribute.
<ul>
<li>Set type to 'select'</li>
<li>The data <b>must</b> be given.</li>
<li>The data is a JSON string.</li>
</ul>
<p>The JSON would normally be generated when the page is built.
<pre class="example">
Direction:
<span class="editable" data-type="select" data-url="/internal/person/direction"
data-data='[["E", "East"], ["W", "West"]]'>East</span>
</pre>
</div>
<div class="try-it">
<p>Click to enable the select box.</p>
</div>
</div>
<div id="example-ok" class="demo">
<div class="description">
<h2>With ok button</h2>
You can add an OK button which must be clicked to accept the change.
<ul>
<li>Adds an OK button that is clicked to submit the data.
<li>The text on the button is set to your value.
<li>Clicking outside the field, cancels
</ul>
<pre class="example">
Last name <span class="editable"
data-url="/internal/person/lastname"
data-input-class="short"
data-ok-button="Go">Smith</span>
</pre>
</div>
<div class="try-it">
<p>Editing field and click the "Go" button.</p>
</div>
</div>
<div id="example-ok-cancel" class="demo">
<div class="description">
<h2>With OK and cancel button</h2>
You can also add a cancel button, again with the text that you specify.
<ul>
<li>Adds an OK button that is clicked to submit the data.
<li>Adds a cancel button that is clicked to abandon the edit.
<li>The text on the buttons are set to your values.
<li>Clicking outside the field does nothing.
</ul>
<p>This is particularly useful for large text areas where it is easy
to lose a lot of work it you accidentally lose focus.</p>
<pre class="example">
Some of their favourite things
<div class="editable"
data-url="/internal/person/favourites"
data-type="textarea"
data-ok-button="OK"
data-cancel-button="Cancel">
Wild geese that fly with the moon on their wings
</div>
</pre>
</div>
<div class="try-it">
<p>Click OK to accept changes, Cancel to throw them away.
</div>
</div>
<div id="example-activator" class="demo">
<div class="description">
<h2>Separate activation button</h2>
You can have a separate button to click to start editing,
rather that just clicking on the text.
Any element can be used.
<ul>
<li>Pass the css selector of the edit element in activator.
<li>Clicking the text no longer starts editing (unless
that element is included in the selector!)
<li>The data-input-class sets the class that will be applied to the input field</li>
</ul>
<pre class="example">
First name:
<span class="editable"
data-url="/internal/person/firstname"
data-activator="#edit-activator"
data-input-class="short"
>John</span>
<span id="edit-activator" class="button">Edit</span>
</pre>
</div>
<div class="try-it">
<p>Click on the "edit" button to start. Clicking on the field does
not activate the edit controls.</p>
</div>
</div>
<div id="example-form" class="demo">
<div class="description">
<h2>Full form with settings.</h2>
<p>As well as configuring by using data attributes on the html elements, you can also
configure during the .jinplace() call in the usual jQuery manner.
You can of course use a mixture of both as you see fit.
<ul>
<li>The url is set, so it is the same for all fields</li>
<li>The field to set is determined by the data-attribute</li>
<li>The 'placeholder' setting is what is shown when the field is blank</li>
<li>The data-placeholder setting can be given on the html element to override the
general one.</li>
</ul>
<p>There are several more settings and most of them can be used on either the html element
or in the call to .jinplace().
<pre class="example">
<p>Firstname: <span class="editable2" data-attribute="firstname">Mary</span>
<p>Lastname: <span class="editable2" data-attribute="lastname">Jones</span>
<p>Direction: <span class="editable2" data-type="select"
data-data='[["N","North"],["S","South"],["E","East"],["W","West"]]'
data-attribute="direction">West</span>
<p>Favourites:
<div class="editable2" data-type="textarea" data-attribute="favourites"
data-placeholder="[Click to add]">
</div>
<script>
$('.editable2').jinplace({
url: '/internal/person2',
placeholder: '[Edit]'
});
</script>
</pre>
</div>
<div class="try-it">
<p>All the fields can be edited and viewed in the person2 row at the top of
this page.</p>
</div>
</div>
<div id="example-load" class="demo">
<div class="description">
<h2>Load data from server.</h2>
<p>Sometimes you want to edit a different version of the text than the one that is
displayed.
The canonical example of this is in wiki text where you need to edit the plain
text version, but display the html version of the page.
<p>There are two ways of doing this</p>
<ul>
<li>By using the data-data attribute</li>
<li>By using the data-loadurl attribute</li>
<li>Using the loadurl config setting</li>
</ul>
<pre class="example">
<p>Firstname: <span class="editable3" data-attribute="firstname">Mary</span>
<p>Lastname: <span class="editable3" data-attribute="lastname">Jones</span>
<p>Direction: <span class="editable3" data-type="select"
data-attribute="direction">West</span>
<p>Favourites:
<div class="editable3" data-type="textarea" data-attribute="favourites"
data-placeholder="[Click to add]">
</div>
<script>
$('.editable3').jinplace({
url: '/internal/person2',
loadurl: '/internal/person2'
});
</script>
</pre>
</div>
<div class="try-it">
<p>When you click to edit, the edit text will be fetched from the server.
So the current (probably stale in this demo) text is disregarded.
You can view the results of your edits in the person2 row at the top
of this page.</p>
</div>
</div>
<script>
// Just in case there is no console...
if (!window.console) {
var console = {
log: function () {
var a = arguments;
}
}
}
$(function() {
var db = {
person: {
firstname: ko.observable('John'),
lastname: ko.observable('Smith'),
favourites: ko.observable('Wild geese that fly with the moon on their wings'),
direction: ko.observable('E')
},
person2: {
firstname: ko.observable('Mary'),
lastname: ko.observable('Jones'),
favourites: ko.observable(''),
direction: ko.observable('W')
},
allowedDirections: [
['N', 'North'], ['NW', 'North West'], ['NE', 'North East'],
['E', 'East'], ['W', 'West'],
['S', 'South'], ['SW', 'South West'], ['SE', 'South East']
]
};
ko.applyBindings(db);
// Redefine the $.ajax call to keep the data local to the page.
var dataFunc = function (opts, value) {
var params = {
id: opts.elementId,
object: opts.object,
attribute: opts.attribute,
value: value
};
var url = opts.url;
console.log("The URL", url);
console.log("The data", params);
var m = url.match(new RegExp('/internal(?:/(\w*)(?:/(\w*))?)?'));
var object = m[1] || params.object;
var field = m[2] || params.attribute;
if (value !== undefined) {
// set the database value
db[object][field](value);
if (field == 'direction') {
$.each(db.allowedDirections, function(i, opt) {
if (opt[0] == value)
value = opt[1];
});
}
} else {
value = db[object][field]();
if (field == 'direction') {
var dir = $.extend(true, [], db.allowedDirections);
$.each(dir, function(i, opt) {
if (opt[0] == value) {
opt[2] = 1;
}
});
value = JSON.stringify(dir);
}
}
return value;
};
$.fn.jinplace.defaults.submitFunction = dataFunc;
$.fn.jinplace.defaults.loadFunction = dataFunc;
});
</script>
<script>
// Arrange to syntax highlight everything and make real working code from the text of the
// example.
$(function() {
$('.example').each(function () {
var $this = $(this);
var exampleText = $this.text();
var syntax = $('<pre class="brush: js; html-script:true"></pre>');
// We need the actual text inside the example box so that it can be syntax highlighted,
// so we convert all '<' to entities.
syntax.text(exampleText);
$this.html(syntax);
// Parse the example into html and place it in the try it out column. Voila guaranteed to
// be the same as the visible example with no repetition.
// Note: parseHTML is only available in jQ 1.8+. Use it if available
// otherwise fall back to using jQuery(). This demo currently runs
// with jQ 1.7
var html;
if ($.parseHTML)
html = $.parseHTML(exampleText, null, true);
else
html = $(exampleText);
var try_it = $this.parent().parent().find('.try-it');
var heading = $('<h2>Try it out</h2>');
try_it.prepend(heading);
var dbox = $('<div class="editable-display-box"/>');
dbox.html(html);
try_it.append(dbox);
});
$('.editable').jinplace();
$('.editable2').jinplace({
url: '/internal/person2',
placeholder: '[Edit]'
});
$('.editable3').jinplace({
url: '/internal/person2',
loadurl: '/internal/person2'
});
});
</script>
<script>
$(function() {
SyntaxHighlighter.defaults.toolbar = false;
SyntaxHighlighter.defaults['tab-size'] = 2;
SyntaxHighlighter.all();
});
</script>
<script>
// If we got here without errors then hide the warning box.
if (jQuery && ko && jQuery.fn.jinplace) {
$('#invalid').hide();
}
</script>

原文地址:http://www.freejs.net/article_biaodan_160.html

点击变input编辑内容,点击变下拉框

最近更新

我爱薅羊毛

点击最多

广告赞助

相关文章

广告赞助