Skip to content

Commit

Permalink
draggable, draggable Border, draggable Gap documentation added & othe…
Browse files Browse the repository at this point in the history 
…r updates.
  • Loading branch information
@craftpip
craftpip committed Aug 10, 2017
1 parent 64fd33f commit 6705e8a
Showing 1 changed file with 85 additions and 39 deletions.
124 changes: 85 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,14 @@
</li>
<li>
<a href="#draggable"> Draggable</a>
<ul class="nav nav-list">
<li>
<a href="#draggable-border"> Draggable border</a>
</li>
<li>
<a href="#draggable-gap"> Draggable gap</a>
</li>
</ul>
</li>
<li>
<a href="animations.html"> Animations <span style="margin-left: 5px;"><i
Expand Down Expand Up @@ -1966,7 +1974,6 @@ <h4 id="close-icon">Close icon</h4>
<p>
Using other libraries for icons
</p>
<button class="example15-1-3-5 btn btn-primary">Using glyphicon</button>
<button class="example15-1-3-6 btn btn-primary">Using font awesome</button>
<div class="space10"></div>
<pre class="prettyprint linenums"><code>$.confirm({
Expand Down Expand Up @@ -2009,12 +2016,6 @@ <h4>
closeIcon: true,
});
});
$('.example15-1-3-5').click(function () {
$.alert({
closeIcon: true,
closeIconClass: 'glyphicon glyphicon-remove',
});
});
$('.example15-1-3-6').click(function () {
$.alert({
closeIcon: true,
Expand Down Expand Up @@ -2066,8 +2067,6 @@ <h4 id="custom-width">Custom width</h4>

<button class="btn btn-primary grid-1">medium</button>
<button class="btn btn-primary grid-2">small (default)</button>
<button class="btn btn-primary grid-3">col-md-4</button>
<button class="btn btn-primary grid-4">col-md-4 col-md-offset-8</button>
<button class="btn btn-primary grid-5">xlarge</button>
<button class="btn btn-primary grid-6">xlarge (fluid)</button>
<div class="space10"></div>
Expand All @@ -2082,16 +2081,6 @@ <h4 id="custom-width">Custom width</h4>
columnClass: 'small',
});
});
$('.grid-3').on('click', function () {
$.confirm({
columnClass: 'col-md-4',
});
});
$('.grid-4').on('click', function () {
$.confirm({
columnClass: 'col-md-4 col-md-offset-8'
});
});
$('.grid-5').on('click', function () {
$.confirm({
columnClass: 'xlarge'
Expand All @@ -2108,10 +2097,10 @@ <h4 id="custom-width">Custom width</h4>
columnClass: 'small'
});
$.confirm({
columnClass: 'col-md-4'
columnClass: 'col-md-4 col-md-offset-4',
});
$.confirm({
columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8'
columnClass: 'col-md-12'
});
$.confirm({
columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8',
Expand All @@ -2129,7 +2118,7 @@ <h4 id="custom-width-without-bootstrap">Custom width without Bootstrap</h4>

<div class="alert alert-warning">
<code>useBootstrap</code> must be set to <code>false</code> to use this feature <br>
you can globally disable bootstrap by setting jconfirm.defaults
you can globally disable bootstrap by setting <code>jconfirm.defaults.useBootstrap = false</code>
</div>

<button class="btn btn-primary grid-wo-bootstrap-1">30%</button>
Expand Down Expand Up @@ -2186,11 +2175,9 @@ <h4 id="namespaced-bootstrap">Namespaced bootstrap</h4>
<h2>Draggable</h2>
<div class="section">
<p>
Make the dialog draggable. simple.
Make the dialog draggable. simple. <br>
Draggable is set to TRUE by default.
</p>
<div class="alert alert-info">
alignMiddle will be disabled if draggable is enabled. Due to jconfirm's nature of centering itself when the content changes causes UX issues when alignMiddle and draggable are enabled.
</div>
<button class="btn btn-primary example-draggable">Draggable</button>
<div class="space10"></div>
<pre class="prettyprint linenums"><code>$.confirm({
Expand All @@ -2208,6 +2195,64 @@ <h2>Draggable</h2>
})
</script>
</div>
<h4 id="draggable-border">Window border</h4>
<div class="section">
<p>
By default jconfirm's modal is prevented from being dragged out of the window.
</p>
<button class="btn btn-primary example-draggable-border">Window border</button>
<div class="space10"></div>
<pre class="prettyprint linenums"><code>$.confirm({
title: 'Hello there',
content: 'Drag this modal out of the window',
draggable: true,
dragWindowBorder: false,
});</code></pre>
<script>
$('.example-draggable-border').click(function () {
$.alert({
title: 'Hello there',
content: 'Drag this modal out of the window',
draggable: true,
dragWindowBorder: false,
});
})
</script>
</div>
<h4 id="draggable-gap">Window gap</h4>
<div class="section">
<p>
If <code>dragWindowBorder</code> is set to <code>true</code> a defined space is maintained between the modal and the window.
<br> this distance can be changed with this feature.
</p>
<button class="btn btn-primary example-draggable-gap-0">Window gap 0px</button>
<button class="btn btn-primary example-draggable-gap-100">Window gap 100px</button>
<div class="space10"></div>
<pre class="prettyprint linenums"><code>$.confirm({
title: 'Hello there',
content: 'try to drag this modal out of the window',
draggable: true,
dragWindowGap: 0, // number of px of distance
});</code></pre>
<script>
$('.example-draggable-gap-0').click(function () {
$.alert({
title: 'Hello there',
content: 'try to drag this modal out of the window',
draggable: true,
dragWindowGap: 0,
});
});
$('.example-draggable-gap-100').click(function () {
$.alert({
title: 'Hello there',
content: 'try to drag this modal out of the window',
draggable: true,
dragWindowGap: 100,
});
});
</script>
</div>
</section>

<section id="animations">
Expand Down Expand Up @@ -2278,7 +2323,7 @@ <h4 id="urlprefix">Using the "URL:" prefix</h4>
To use, prepend your URL with "URL:" ends up like "URL:http://example.com/file.extension". <br/>
</p>
<p class="text-info">
<i class="fa fa-lightbulb-o"></i> NOTE: the returned data is set as content automatically before
<i class="fa fa-lightbulb-o"></i> NOTE: the returned data <u>is set as content automatically</u> before
contentLoaded callback is called.
</p>
<button class="btn btn-primary example18-1">Load from text.txt</button>
Expand Down Expand Up @@ -2331,7 +2376,7 @@ <h4 id="ajaxpromise">Using Ajax promise</h4>
In this example a json object is requested, and a part of it is set as content.
</p>
<p class="text-info">
<i class="fa fa-lightbulb-o"></i> NOTE: the returned data is NOT set as content automatically, you
<i class="fa fa-lightbulb-o"></i> NOTE: the returned data <u>is NOT set as content automatically</u>, you
must set the content yourself.
</p>
<button class="btn btn-primary example18-2">Load from bower.json</button>
Expand Down Expand Up @@ -2419,26 +2464,26 @@ <h4 id="content-loaded">Ajax complete callback <code>contentLoaded</code></h4>
dataType: 'json',
method: 'get'
}).done(function (response) {
self.setContentAppend('&lt;br&gt;Done!');
self.setContentAppend('&lt;div&gt;Done!&lt;/div&gt;');
}).fail(function(){
self.setContentAppend('&lt;br&gt;Fail!');
self.setContentAppend('&lt;div&gt;Fail!&lt;/div&gt;');
}).always(function(){
self.setContentAppend('&lt;br&gt;Always!');
self.setContentAppend('&lt;div&gt;Always!&lt;/div&gt;');
});
},
contentLoaded: function(data, status, xhr){
self.setContentAppend('&lt;br&gt;Content loaded!');
self.setContentAppend('&lt;div&gt;Content loaded!&lt;/div&gt;');
},
onContentReady: function(){
this.setContentAppend('&lt;br&gt;Content ready!');
this.setContentAppend('&lt;div&gt;Content ready!&lt;/div&gt;');
}
});</code></pre>
</div>
<div class="col-md-4">
<p>
Using the Ajax promise method
</p>
<button class="btn btn-primary example18-1-1-1 btn-block">Using contentLoaded callback</button>
<button class="btn btn-primary example18-1-1-1 btn-block">Demo content callbacks</button>
<div style="height: 10px;"></div>
<p>
You can set your content in any of the callbacks.
Expand Down Expand Up @@ -2473,18 +2518,18 @@ <h4 id="content-loaded">Ajax complete callback <code>contentLoaded</code></h4>
dataType: 'json',
method: 'get'
}).done(function (response) {
self.setContentAppend('<br>Done!');
self.setContentAppend('<div>Done!</div>');
}).fail(function () {
self.setContentAppend('<br>Fail!');
self.setContentAppend('<div>Fail!</div>');
}).always(function () {
self.setContentAppend('<br>Always!');
self.setContentAppend('<div>Always!</div>');
});
},
contentLoaded: function (data, status, xhr) {
this.setContentAppend('<br>Content loaded!');
this.setContentAppend('<div>Content loaded!</div>');
},
onContentReady: function () {
this.setContentAppend('<br>Content ready!');
this.setContentAppend('<div>Content ready!</div>');
}
});
});
Expand Down Expand Up @@ -3063,6 +3108,7 @@ <h2>Options</h2>
<code>true</code>
</td>
<td>
<code>@deprecated</code>
The model will be position in center of the screen.
When the content in the model changes, the model is reposition itself.
</td>
Expand Down

0 comments on commit 6705e8a

Please sign in to comment.