markgx / jquery-in-place-editor Goto Github PK
View Code? Open in Web Editor NEWFork of Another In-Place Editor
Home Page: http://code.google.com/p/jquery-in-place-editor/
License: Other
Fork of Another In-Place Editor
Home Page: http://code.google.com/p/jquery-in-place-editor/
License: Other
INTRODUCTION ------------ editInPlace is a jQuery plugin that turns any element or group of elements into an Ajax in-place editor using only one line of code. Itβs written using the jQuery library, which is freely available at http://jquery.com. SUPPORT AND BUG REPORTS ----------------------- Bug reports, as well as feature requests, may be submitted [on the google code page](http://code.google.com/p/jquery-in-place-editor/issues/list) QUICK START ----------- Include jquery and the editin place scripts in your html page (preferably at the bottom so the page loads faster). <script type="text/javascript" src="path/to/js/jquery.js"></script> <script type="text/javascript" src="path/to/js/jquery.editinplace.js"></script> <script type="text/javascript"> $(".inplace-editor").editInPlace({ url: "path/to/server/script.php" }); </script> Create a div with the class 'inplace-editor' <div class="inplace-editor"></div> Create a server side handler script (php, python, etc...), this example will use php The following parameters will be sent via a POST requeset to the server script * update_value * element_id * original_html e.g. in script.php: $_POST['update_value'] $_POST['element_id'] $_POST['original_html'] Alternatively you can set the option callback, so you can controll the whole saving process yourself (update other parts of the webpage and possibly not even save to the server at all). The editor accepts a wealth of other options to customize how it behaves. They are documented inline [in the sourcecode](lib/jquery.editInPlace.js) and are exposed as $.fn.editInPlace.defaults where you can change them globally for your app. For more examples of how to use the editor, have [a look at the demo html](demo/index.html) and [javascript](demo/js/demo.js). DOCUMENTATION ------------- The Editor works in two stages. After initialization it is closed, wich means that it listens to a click on the element it was bound to. When clicked it will open, which means it replaces the content of the bound field with the configured GUI (input, textarea or select), preinitialized to show the value that was shown in that DOM element before. If the user then cancels or doesn't change anything, everything is returned to what it was before. If the user makes a change and commits, that new value is either submitted to the configured URL or to the configured callback and then the editor GUI is again replaced by just the edited value and the editor again listenes to a click. To support automated acceptance tests better the editor will set the class .editInPlace-active as soon as it opens, and will only remove it when it has finished any interaction with the server or the callback interface has told it so. More documenataion can be found on [the google code page of this product](http://code.google.com/p/jquery-in-place-editor/) Thats it! Have fun using it!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.