readme über switch und autoresize
This commit is contained in:
home
parent
9c730159f2
commit
6c84a89889
135
README.md
135
README.md
@ -1,54 +1,83 @@
|
||||
# cssjs\_func\_lib
|
||||
## install
|
||||
|
||||
```
|
||||
git submodule add https://git.seemsleg.it/ef/cssjs-func-lib cssjs
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/cssjs/admin.css" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="/cssjs/jquery-ui.min.css" media="screen" />
|
||||
|
||||
<script src="/cssjs/jquery.min.js"></script>
|
||||
<script src="/cssjs/jquery-ui.min.js"></script>
|
||||
<script src="/cssjs/form.js"></script>
|
||||
```
|
||||
|
||||
## Dropzone
|
||||
```
|
||||
<form action="/upload" class="dropzone needsclick dz-clickable" id="demo-upload">
|
||||
<div class="dz-message needsclick">
|
||||
<button type="button" class="dz-button">Drop files here or click to upload.</button><br>
|
||||
<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Parallax
|
||||
```
|
||||
<link rel="stylesheet" href="/css/parallax.css">
|
||||
|
||||
...
|
||||
|
||||
<div class="parallax" style="background-image: url(img);"> </div>
|
||||
```
|
||||
|
||||
## Divs anordnen
|
||||
```
|
||||
<script src="/cssjs/masonry.pkgd.min.js"></script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-item">...</div>
|
||||
<div class="grid-item grid-item--width2">...</div>
|
||||
<div class="grid-item">...</div>
|
||||
...
|
||||
</div>
|
||||
|
||||
.grid-item { width: 200px; }
|
||||
.grid-item--width2 { width: 400px; }
|
||||
```
|
||||
|
||||
## Checkbox Switch
|
||||
```
|
||||
<link rel="stylesheet" href="/cssjs/switch.css">
|
||||
|
||||
<input type="checkbox" name="publish" id="checkPub" value="1" ' . ($data ['publish'] ? 'checked="true"' : '') . ' /><label for="checkPub"></label>
|
||||
# cssjs\_func\_lib
|
||||
## install
|
||||
|
||||
```
|
||||
git submodule add https://git.seemsleg.it/ef/cssjs-func-lib cssjs
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/cssjs/admin.css" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="/cssjs/jquery-ui.min.css" media="screen" />
|
||||
|
||||
<script src="/cssjs/jquery.min.js"></script>
|
||||
<script src="/cssjs/jquery-ui.min.js"></script>
|
||||
<script src="/cssjs/form.js"></script>
|
||||
```
|
||||
|
||||
## Dropzone
|
||||
```
|
||||
<form action="/upload" class="dropzone needsclick dz-clickable" id="demo-upload">
|
||||
<div class="dz-message needsclick">
|
||||
<button type="button" class="dz-button">Drop files here or click to upload.</button><br>
|
||||
<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Parallax
|
||||
```
|
||||
<link rel="stylesheet" href="/css/parallax.css">
|
||||
|
||||
...
|
||||
|
||||
<div class="parallax" style="background-image: url(img);"> </div>
|
||||
```
|
||||
|
||||
## Divs anordnen
|
||||
```
|
||||
<script src="/cssjs/masonry.pkgd.min.js"></script>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-item">...</div>
|
||||
<div class="grid-item grid-item--width2">...</div>
|
||||
<div class="grid-item">...</div>
|
||||
...
|
||||
</div>
|
||||
|
||||
.grid-item { width: 200px; }
|
||||
.grid-item--width2 { width: 400px; }
|
||||
```
|
||||
|
||||
## Checkbox Switch
|
||||
```
|
||||
<link rel="stylesheet" href="/cssjs/switch.css">
|
||||
|
||||
<input type="checkbox" name="publish" id="checkPub" value="1" ' . ($data ['publish'] ? 'checked="true"' : '') . ' /><label for="checkPub"></label>
|
||||
```
|
||||
|
||||
## DateTimePicker
|
||||
```
|
||||
<link rel="stylesheet" type="text/css" href="/cssjs/jquery-ui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/cssjs/jquery.datetimepicker.min.css">
|
||||
|
||||
<script src="/cssjs/jquery-ui.min.js"></script>
|
||||
<script src="/cssjs/jquery.datetimepicker.full.min.js"></script>
|
||||
|
||||
<script>
|
||||
jQuery(\'.datetime\').datetimepicker({
|
||||
format:\'d.m.Y H:i\',
|
||||
step:30,
|
||||
onShow:function( ct ){
|
||||
},
|
||||
timepicker:true
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
## textarea autoheight
|
||||
```
|
||||
<textarea style="max-height: 300px;" class="autoheight"></textarea>
|
||||
|
||||
<script src='../dist/autosize.js'></script>
|
||||
<script>
|
||||
autosize(document.querySelectorAll('textarea.autoheight'));
|
||||
</script>
|
||||
```
|
||||
90
jquery-autoresize.js
vendored
Normal file
90
jquery-autoresize.js
vendored
Normal file
@ -0,0 +1,90 @@
|
||||
(function($){
|
||||
|
||||
$.fn.autoResize = function(options) {
|
||||
|
||||
// Just some abstracted details,
|
||||
// to make plugin users happy:
|
||||
var settings = $.extend({
|
||||
onResize : function(){},
|
||||
animate : true,
|
||||
animateDuration : 150,
|
||||
animateCallback : function(){},
|
||||
extraSpace : 20,
|
||||
limit: 1000
|
||||
}, options);
|
||||
|
||||
// Only textarea's auto-resize:
|
||||
this.filter('textarea').each(function(){
|
||||
|
||||
// Get rid of scrollbars and disable WebKit resizing:
|
||||
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
|
||||
|
||||
// Cache original height, for use later:
|
||||
origHeight = textarea.height(),
|
||||
|
||||
// Need clone of textarea, hidden off screen:
|
||||
clone = (function(){
|
||||
|
||||
// Properties which may effect space taken up by chracters:
|
||||
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
|
||||
propOb = {};
|
||||
|
||||
// Create object of styles to apply:
|
||||
$.each(props, function(i, prop){
|
||||
propOb[prop] = textarea.css(prop);
|
||||
});
|
||||
|
||||
// Clone the actual textarea removing unique properties
|
||||
// and insert before original textarea:
|
||||
return textarea.clone().removeAttr('id').removeAttr('name').css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: -9999
|
||||
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
|
||||
|
||||
})(),
|
||||
lastScrollTop = null,
|
||||
updateSize = function() {
|
||||
|
||||
// Prepare the clone:
|
||||
clone.height(0).val($(this).val()).scrollTop(10000);
|
||||
|
||||
// Find the height of text:
|
||||
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
|
||||
toChange = $(this).add(clone);
|
||||
|
||||
// Don't do anything if scrollTip hasen't changed:
|
||||
if (lastScrollTop === scrollTop) { return; }
|
||||
lastScrollTop = scrollTop;
|
||||
|
||||
// Check for limit:
|
||||
if ( scrollTop >= settings.limit ) {
|
||||
$(this).css('overflow-y','');
|
||||
return;
|
||||
}
|
||||
// Fire off callback:
|
||||
settings.onResize.call(this);
|
||||
|
||||
// Either animate or directly apply height:
|
||||
settings.animate && textarea.css('display') === 'block' ?
|
||||
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
|
||||
: toChange.height(scrollTop);
|
||||
};
|
||||
|
||||
// Bind namespaced handlers to appropriate events:
|
||||
textarea
|
||||
.unbind('.dynSiz')
|
||||
.bind('keyup.dynSiz', updateSize)
|
||||
.bind('keydown.dynSiz', updateSize)
|
||||
.bind('change.dynSiz', updateSize);
|
||||
|
||||
});
|
||||
|
||||
// Chain:
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user