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

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

 

演示

 

 

XML/HTML Code

<div id="page">
<table>
<caption>The database. See your changes here.caption>
<tr>
  <th>Objectth>
  <th>First nameth>
  <th>Last nameth>
  <th>Favouritesth>
  <th>Directionth>
tr>
<tr>
  <td>persontd>
  <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>person2td>
  <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 fieldh2>
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 datali>
  <li>Hiting return normally submits the data tooli>
ul>

<pre class="example">
  Firstname <span
    class="editable"
    data-url="/internal/person/firstname">Johnspan>



  <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 textareah2>
By default you get a normal text input. To get a textarea, then you need to set the
type to <em>textareaem>.
<ul>
  <li>Set <em>data-typeem> to <kbd>textareakbd>li>
  <li>Everything else is the same as for regular inputsli>
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 dropdownh2>
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-datab>
attribute.
<ul>
  <li>Set type to 'select'li>
  <li>The data <b>mustb> 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"]]'>Eastspan>

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 buttonh2>
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">Smithspan>

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 buttonh2>
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 buttonh2>
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 fieldli>
ul>
<pre class="example">
  First name:
  <span class="editable"
        data-url="/internal/person/firstname"
        data-activator="#edit-activator"
        data-input-class="short"
      >Johnspan>

  <span id="edit-activator" class="button">Editspan>
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 fieldsli>
  <li>The field to set is determined by the data-attributeli>
  <li>The 'placeholder' setting is what is shown when the field is blankli>
  <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">Maryspan>

  <p>Lastname:  <span class="editable2" data-attribute="lastname">Jonesspan>

  <p>Direction:  <span class="editable2" data-type="select"
                       data-data='[["N","North"],["S","South"],["E","East"],["W","West"]]'
                       data-attribute="direction">Westspan>

  <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 thisp>
<ul>
  <li>By using the data-data attributeli>
  <li>By using the data-loadurl attributeli>
  <li>Using the loadurl config settingli>
ul>

<pre class="example">
  <p>Firstname: <span class="editable3" data-attribute="firstname">Maryspan>

  <p>Lastname:  <span class="editable3" data-attribute="lastname">Jonesspan>

  <p>Direction:  <span class="editable3" data-type="select"
                       data-attribute="direction">Westspan>

  <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 outh2>');
    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