pub/cssjs-func-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

readme über switch und autoresize

Browse Source
This commit is contained in:
home
2020-06-08 17:02:44 +02:00
parent 9c730159f2
commit 6c84a89889
2 changed files with 172 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
README.md
View File

@@ -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);">&nbsp;</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);">&nbsp;</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>
```