95 lines
2.7 KiB
Markdown
95 lines
2.7 KiB
Markdown
# 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='/cssjs/autosize.js'></script>
|
|
<script>
|
|
autosize(document.querySelectorAll('textarea.autoheight'));
|
|
</script>
|
|
```
|
|
|
|
## Copy to Clipboard
|
|
```
|
|
<script src='/cssjs/copy-to-clipboard.js'></script>
|
|
<link rel="stylesheet" type="text/css" href="/cssjs/copy-to-clipboard.css">
|
|
|
|
<input type="text" value="Hello World" id="copy-to-clipboard">
|
|
<div class="copy-to-clipboard">
|
|
<input type="text" readonly="true" value="blablabla" id="copy-to-clipboard" onclick=" copyToClipboard();copiedToClipboard();return false;" onmouseout="resetClipboard()">
|
|
<span class="tooltiptext" id="copy-to-clipboard-tooltip">Kopieren</span>
|
|
</div>
|
|
``` |