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

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

 
点击变input编辑内容,点击变下拉框_第1张图片
演示

 

 

XML/HTML Code
  1. <div id="page">  
  2. <table>  
  3. <caption>The database. See your changes here.caption>  
  4. <tr>  
  5.   <th>Objectth>  
  6.   <th>First nameth>  
  7.   <th>Last nameth>  
  8.   <th>Favouritesth>  
  9.   <th>Directionth>  
  10. tr>  
  11. <tr>  
  12.   <td>persontd>  
  13.   <td><span data-bind="text: person.firstname">span>  
  14.   <td><span data-bind="text: person.lastname">span>  
  15.   <td> <div style="width: 200px" data-bind="text: person.favourites">div>  
  16.   <td><span data-bind="text: person.direction">span>  
  17. tr>  
  18. <tr>  
  19.   <td>person2td>  
  20.   <td><span data-bind="text: person2.firstname">span>  
  21.   <td><span data-bind="text: person2.lastname">span>  
  22.   <td> <div style="width: 200px" data-bind="text: person2.favourites">div>  
  23.   <td><span data-bind="text: person2.direction">span>  
  24. tr>  
  25. table>  
  26. <p>  
  27.   
  28. <div id="example-input" class="demo">  
  29. <div class="description">  
  30. <h2>Simple text input fieldh2>  
  31. First example is a straightforward text input. Click on the underlined  
  32. text to modify it.  
  33. <ul>  
  34.   <li>The url to post to is supplied.li>  
  35.   <li>Clicking outside the edit field submits the datali>  
  36.   <li>Hiting return normally submits the data tooli>  
  37. ul>  
  38.   
  39. <pre class="example">  
  40.   Firstname <span  
  41.     class="editable"  
  42.     data-url="/internal/person/firstname">Johnspan>  
  43.   
  44.     
  45.     
  46.   <script>  
  47.     $('.editable').jinplace();  
  48.   script>  
  49. pre>  
  50. div>  
  51.   
  52. <div class="try-it">  
  53.   <p>Click on the name to edit  
  54. div>  
  55. div>  
  56.   
  57. <div id="example-textarea" class="demo">  
  58. <div class="description">  
  59. <h2>Using a textareah2>  
  60. By default you get a normal text input. To get a textarea, then you need to set the  
  61. type to <em>textareaem>.  
  62. <ul>  
  63.   <li>Set <em>data-typeem> to <kbd>textareakbd>li>  
  64.   <li>Everything else is the same as for regular inputsli>  
  65. ul>  
  66. <pre class="example">  
  67.   
  68.   <div class="editable"  
  69.     data-type="textarea" data-url="/internal/person/favourites">  
  70.     Wild geese that fly with the moon on their wings  
  71.   div>  
  72.   
  73. pre>  
  74. div>  
  75.   
  76. <div class="try-it">  
  77.   <p>Click textarea, modify and click outside it.p>  
  78. div>  
  79. div>  
  80.   
  81. <div id="example-select" class="demo">  
  82. <div class="description">  
  83. <h2>Using a select dropdownh2>  
  84. You can also have a list of choices with a select list.  
  85. In this case you must supply the list of possible choices in the <b>data-datab>  
  86. attribute.  
  87. <ul>  
  88.   <li>Set type to 'select'li>  
  89.   <li>The data <b>mustb> be given.li>  
  90.   <li>The data is a JSON string.li>  
  91. ul>  
  92. <p>The JSON would normally be generated when the page is built.  
  93. <pre class="example">  
  94.   Direction:  
  95.   <span class="editable" data-type="select" data-url="/internal/person/direction"  
  96.         data-data='[["E", "East"], ["W", "West"]]'>Eastspan>  
  97.   
  98. pre>  
  99. div>  
  100.   
  101. <div class="try-it">  
  102.   <p>Click to enable the select box.p>  
  103. div>  
  104. div>  
  105.   
  106. <div id="example-ok" class="demo">  
  107. <div class="description">  
  108. <h2>With ok buttonh2>  
  109. You can add an OK button which must be clicked to accept the change.  
  110. <ul>  
  111.   <li>Adds an OK button that is clicked to submit the data.  
  112.   <li>The text on the button is set to your value.  
  113.   <li>Clicking outside the field, cancels  
  114. ul>  
  115.   
  116. <pre class="example">  
  117.   Last name <span class="editable"  
  118.                  data-url="/internal/person/lastname"  
  119.                  data-input-class="short"  
  120.                  data-ok-button="Go">Smithspan>  
  121.   
  122. pre>  
  123. div>  
  124.   
  125. <div class="try-it">  
  126.   <p>Editing field and click the "Go" button.p>  
  127. div>  
  128. div>  
  129.   
  130. <div id="example-ok-cancel" class="demo">  
  131. <div class="description">  
  132. <h2>With OK and cancel buttonh2>  
  133. You can also add a cancel button, again with the text that you specify.  
  134. <ul>  
  135.   <li>Adds an OK button that is clicked to submit the data.  
  136.   <li>Adds a cancel button that is clicked to abandon the edit.  
  137.   <li>The text on the buttons are set to your values.  
  138.   <li>Clicking outside the field does nothing.  
  139. ul>  
  140. <p>This is particularly useful for large text areas where it is easy  
  141.   to lose a lot of work it you accidentally lose focus.p>  
  142.   
  143. <pre class="example">  
  144.   Some of their favourite things  
  145.   <div class="editable"  
  146.        data-url="/internal/person/favourites"  
  147.        data-type="textarea"  
  148.        data-ok-button="OK"  
  149.        data-cancel-button="Cancel">  
  150.     Wild geese that fly with the moon on their wings  
  151.   div>  
  152.   
  153. pre>  
  154. div>  
  155.   
  156. <div class="try-it">  
  157.   <p>Click OK to accept changes, Cancel to throw them away.  
  158. div>  
  159. div>  
  160.   
  161. <div id="example-activator" class="demo">  
  162. <div class="description">  
  163. <h2>Separate activation buttonh2>  
  164. You can have a separate button to click to start editing,  
  165. rather that just clicking on the text.  
  166. Any element can be used.  
  167. <ul>  
  168.   <li>Pass the css selector of the edit element in activator.  
  169.   <li>Clicking the text no longer starts editing (unless  
  170.     that element is included in the selector!)  
  171.   <li>The data-input-class sets the class that will be applied to the input fieldli>  
  172. ul>  
  173. <pre class="example">  
  174.   First name:  
  175.   <span class="editable"  
  176.         data-url="/internal/person/firstname"  
  177.         data-activator="#edit-activator"  
  178.         data-input-class="short"  
  179.       >Johnspan>  
  180.   
  181.   <span id="edit-activator" class="button">Editspan>  
  182. pre>  
  183. div>  
  184.   
  185. <div class="try-it">  
  186.   <p>Click on the "edit" button to start. Clicking on the field does  
  187.     not activate the edit controls.p>  
  188. div>  
  189. div>  
  190.   
  191. <div id="example-form" class="demo">  
  192. <div class="description">  
  193. <h2>Full form with settings.h2>  
  194. <p>As well as configuring by using data attributes on the html elements, you can also  
  195.   configure during the .jinplace() call in the usual jQuery manner.  
  196.   You can of course use a mixture of both as you see fit.  
  197. <ul>  
  198.   <li>The url is set, so it is the same for all fieldsli>  
  199.   <li>The field to set is determined by the data-attributeli>  
  200.   <li>The 'placeholder' setting is what is shown when the field is blankli>  
  201.   <li>The data-placeholder setting can be given on the html element to override the  
  202.     general one.li>  
  203. ul>  
  204. <p>There are several more settings and most of them can be used on either the html element  
  205.   or in the call to .jinplace().  
  206. <pre class="example">  
  207.   <p>Firstname: <span class="editable2" data-attribute="firstname">Maryspan>  
  208.   
  209.   <p>Lastname:  <span class="editable2" data-attribute="lastname">Jonesspan>  
  210.   
  211.   <p>Direction:  <span class="editable2" data-type="select"  
  212.                        data-data='[["N","North"],["S","South"],["E","East"],["W","West"]]'  
  213.                        data-attribute="direction">Westspan>  
  214.   
  215.   <p>Favourites:  
  216.   <div class="editable2" data-type="textarea" data-attribute="favourites"  
  217.       data-placeholder="[Click to add]">  
  218.   div>  
  219.   
  220.   <script>  
  221.     $('.editable2').jinplace({  
  222.       url: '/internal/person2',  
  223.       placeholder: '[Edit]'  
  224.     });  
  225.   script>  
  226. pre>  
  227. div>  
  228.   
  229. <div class="try-it">  
  230.   <p>All the fields can be edited and viewed in the person2 row at the top of  
  231.     this page.p>  
  232. div>  
  233.   
  234. div>  
  235.   
  236. <div id="example-load" class="demo">  
  237. <div class="description">  
  238. <h2>Load data from server.h2>  
  239. <p>Sometimes you want to edit a different version of the text than the one that is  
  240.   displayed.  
  241.   The canonical example of this is in wiki text where you need to edit the plain  
  242.   text version, but display the html version of the page.  
  243. <p>There are two ways of doing thisp>  
  244. <ul>  
  245.   <li>By using the data-data attributeli>  
  246.   <li>By using the data-loadurl attributeli>  
  247.   <li>Using the loadurl config settingli>  
  248. ul>  
  249.   
  250. <pre class="example">  
  251.   <p>Firstname: <span class="editable3" data-attribute="firstname">Maryspan>  
  252.   
  253.   <p>Lastname:  <span class="editable3" data-attribute="lastname">Jonesspan>  
  254.   
  255.   <p>Direction:  <span class="editable3" data-type="select"  
  256.                        data-attribute="direction">Westspan>  
  257.   
  258.   <p>Favourites:  
  259.   <div class="editable3" data-type="textarea" data-attribute="favourites"  
  260.       data-placeholder="[Click to add]">  
  261.   div>  
  262.   
  263.   <script>  
  264.     $('.editable3').jinplace({  
  265.       url: '/internal/person2',  
  266.       loadurl: '/internal/person2'  
  267.     });  
  268.   script>  
  269. pre>  
  270. div>  
  271.   
  272. <div class="try-it">  
  273.   <p>When you click to edit, the edit text will be fetched from the server.  
  274.     So the current (probably stale in this demo) text is disregarded.  
  275.     You can view the results of your edits in the person2 row at the top  
  276.     of this page.p>  
  277. div>  
  278.   
  279. div>  
  280.   
  281.   
  282. <script>  
  283. // Just in case there is no console...  
  284. if (!window.console) {  
  285.   var console = {  
  286.     log: function () {  
  287.       var a = arguments;  
  288.     }  
  289.   }  
  290. }  
  291.   
  292. $(function() {  
  293.   var db = {  
  294.     person: {  
  295.       firstname: ko.observable('John'),  
  296.       lastname: ko.observable('Smith'),  
  297.       favourites: ko.observable('Wild geese that fly with the moon on their wings'),  
  298.       direction: ko.observable('E')  
  299.     },  
  300.   
  301.     person2: {  
  302.       firstname: ko.observable('Mary'),  
  303.       lastname: ko.observable('Jones'),  
  304.       favourites: ko.observable(''),  
  305.       direction: ko.observable('W')  
  306.     },  
  307.   
  308.     allowedDirections: [  
  309.       ['N', 'North'], ['NW', 'North West'], ['NE', 'North East'],  
  310.       ['E', 'East'], ['W', 'West'],  
  311.       ['S', 'South'], ['SW', 'South West'], ['SE', 'South East']  
  312.     ]  
  313.   };  
  314.   ko.applyBindings(db);  
  315.   
  316.   // Redefine the $.ajax call to keep the data local to the page.  
  317.   var dataFunc = function (opts, value) {  
  318.     var params = {  
  319.       id: opts.elementId,  
  320.       object: opts.object,  
  321.       attribute: opts.attribute,  
  322.       value: value  
  323.     };  
  324.   
  325.     var url = opts.url;  
  326.   
  327.     console.log("The URL", url);  
  328.     console.log("The data", params);  
  329.   
  330.     var m = url.match(new RegExp('/internal(?:/(\\w*)(?:/(\\w*))?)?'));  
  331.     var object = m[1] || params.object;  
  332.     var field = m[2] || params.attribute;  
  333.   
  334.     if (value !== undefined) {  
  335.       // set the database value  
  336.       db[object][field](value);  
  337.   
  338.       if (field == 'direction') {  
  339.         $.each(db.allowedDirections, function(i, opt) {  
  340.           if (opt[0] == value)  
  341.             value = opt[1];  
  342.         });  
  343.       }  
  344.   
  345.     } else {  
  346.       value = db[object][field]();  
  347.   
  348.       if (field == 'direction') {  
  349.         var dir = $.extend(true, [], db.allowedDirections);  
  350.         $.each(dir, function(i, opt) {  
  351.           if (opt[0] == value) {  
  352.             opt[2] = 1;  
  353.           }  
  354.         });  
  355.         value = JSON.stringify(dir);  
  356.       }  
  357.     }  
  358.   
  359.     return value;  
  360.   };  
  361.   
  362.   $.fn.jinplace.defaults.submitFunction = dataFunc;  
  363.   $.fn.jinplace.defaults.loadFunction = dataFunc;  
  364. });  
  365. script>  
  366.   
  367. <script>  
  368. // Arrange to syntax highlight everything and make real working code from the text of the  
  369. // example.  
  370. $(function() {  
  371.   $('.example').each(function () {  
  372.     var $this = $(this);  
  373.   
  374.     var exampleText = $this.text();  
  375.     var syntax = $('<pre class="brush: js; html-script:true">pre>');  
  376.   
  377.     // We need the actual text inside the example box so that it can be syntax highlighted,  
  378.     // so we convert all '<' to entities.  
  379.     syntax.text(exampleText);  
  380.     $this.html(syntax);  
  381.   
  382.     // Parse the example into html and place it in the try it out column. Voila guaranteed to  
  383.     // be the same as the visible example with no repetition.  
  384.     // Note: parseHTML is only available in jQ 1.8+. Use it if available  
  385.     // otherwise fall back to using jQuery(). This demo currently runs  
  386.     // with jQ 1.7  
  387.     var html;  
  388.     if ($.parseHTML)  
  389.       html = $.parseHTML(exampleText, null, true);  
  390.     else  
  391.       html = $(exampleText);  
  392.     var try_it = $this.parent().parent().find('.try-it');  
  393.   
  394.     var heading = $('<h2>Try it outh2>');  
  395.     try_it.prepend(heading);  
  396.   
  397.     var dbox = $('<div class="editable-display-box"/>');  
  398.     dbox.html(html);  
  399.     try_it.append(dbox);  
  400.   });  
  401.   
  402.   $('.editable').jinplace();  
  403.   $('.editable2').jinplace({  
  404.     url: '/internal/person2',  
  405.     placeholder: '[Edit]'  
  406.   });  
  407.   $('.editable3').jinplace({  
  408.     url: '/internal/person2',  
  409.     loadurl: '/internal/person2'  
  410.   });  
  411. });  
  412. script>  
  413. <script>  
  414.   $(function() {  
  415.     SyntaxHighlighter.defaults.toolbar = false;  
  416.     SyntaxHighlighter.defaults['tab-size'] = 2;  
  417.     SyntaxHighlighter.all();  
  418.   });  
  419. script>  
  420. <script>  
  421.   // If we got here without errors then hide the warning box.  
  422.   if (jQuery && ko && jQuery.fn.jinplace) {  
  423.     $('#invalid').hide();  
  424.   }  
  425. script>  

 


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

你可能感兴趣的:(点击变input编辑内容,点击变下拉框)