-
Notifications
You must be signed in to change notification settings - Fork 1
/
documentation.html
174 lines (160 loc) · 6.66 KB
/
documentation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<title>jQuery Editable - Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="stylesheets/estilos.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/index.html">jQuery Editable</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="/index.html">Home</a></li>
<li class="active"><a href="/documentation.html">Documentation</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Documentation</h1>
<p>This plugins helps you make some blocks of your page editable, here you will see how the plugin works and how to use it.</p>
</div>
<div class="row">
<div class="span12">
<h3>1. Making a block editable</h3>
<p>To make a block editable you just need to add the <b>.editable</b> class in the element you want, see below:</p>
<article class="code">
<pre class="prettyprint lang=html">
<div class="editable">
<h2>Editable block</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</pre>
</article>
<p>With this the plugin append a button in the top of <b>div</b> element.</p>
</div>
<div class="span12">
<h3>2. Plugin Parameters</h3>
<p>The plugin have some customizable things to you, here is the list:</p>
<ul>
<li>
<p><b>modalId</b>: Your bootstrap modal id. (<b>Default: <em>myModal</em></b>)</p>
</li>
<li>
<p><b>formUri</b>: This url will be used to get the form html. (<b>Default: <em>/form/form.html</em></b>)</p>
</li>
<li>
<p><b>buttonPrototype</b>: The button html that will be puted in the editable blocks. (<b>Default: <em><role="button" class="btn">Edit</a></em></b>)</p>
</li>
<li>
<p><b>sendData</b>: The html data atribute to send as data to form generation. (<b>Default: <em>options</em></b>)</p>
</li>
<li>
<p><b>afterFormLoad</b>: A closure function to be executed after form load. (<b>Default: <em>null</em></b>)</p>
</li>
<li>
<p><b>afterHtmlLoad</b>: A closure function to be executed after html load. (<b>Default: <em>null</em></b>)</p>
</li>
</ul>
<article class="code">
<pre class="prettyprint">
$('body').editable({
'modalId': 'myModal',
'formUri': '/form/form.html',
'buttonPrototype': '<role="button" class="btn">Edit</a>',
'sendData': 'options',
afterFormLoad: function(){
//Do something
},
afterHtmlLoad: function(){
//Do something
}
});
</pre>
</article>
</div>
<div class="span12">
<h3>3. Generation of block html</h3>
<p>The plugin put the html in the specified block with <b>.editable</b> class, but how?</p>
<p>He expects that in the response of his ajax form requisition you give him some html, so in your server-side script, you must do something like this:</p>
<article class="code">
<pre class="prettyprint">
//Remember: This is only for demonstration, in a real application you have to worry about security issues
$html = "<h2>".$_POST['title']."</h2>";
$html .= "<p>".$_POST['content']."</p>";
echo $html;
</pre>
</article>
</div>
<div class="span12">
<h3>4. Form generation data</h3>
<p>You can pass with html5 data attribute an json object along with ajax requisition to form generation like this:</p>
<article class="code">
<pre class="prettyprint lang=html">
<div class="editable" data-options='{"pk":"1","demo":"test"}'>
<h2>Editable block</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</pre>
</article>
</div>
<div class="span12">
<h3>5. CSS requirements</h3>
<p>The below css must be loaded in the page.</p>
<article class="code">
<pre class="prettyprint">
/* jQuery Editable Css */
.editable {
position: relative;
}
.btn-j-editable {
font-style: normal;
font-weight: normal;
letter-spacing: 0;
position: absolute;
right: 5px;
top: 5px;
}
</pre>
</article>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="span6">
<p>Dependencies: <a href="https://twitter.github.io/bootstrap/">Bootstrap</a>, <a href="http://jquery.com/">jQuery</a>.</p>
<p>Available under the <a href="http://opensource.org/licenses/mit-license.php">MIT license</a>.</p>
<p>Reference: <a href="http://jqueryboilerplate.com/">jQuery Boilerplate</a>.</p>
</div>
<div class="span6">
<div class="pull-right">
<a href="https://twitter.com/willcampideli"><img src="https://si0.twimg.com/profile_images/1105056834/rajatkashyap-batman-tux_bigger.png"></a>
<a href="https://twitter.com/willcampideli">@willcampideli</a>
</div>
</div>
</div>
</footer>
</div> <!-- /container -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="javascripts/bootstrap.min.js"></script>
<script src="javascripts/plugins.js"></script>
<script type="text/javascript">
$(document).ready(function() {
prettyPrint();
});
</script>
</body>
</html>