pub
This commit is contained in:
parent
8326b30eca
commit
94c60eacb9
398
README.md
398
README.md
@ -1,200 +1,200 @@
|
||||
# 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" class="switch" 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">
|
||||
|
||||
<div class="copy-to-clipboard">
|
||||
<input type="text" readonly="true" value="blablabla" id="copy-to-clipboard" onclick=" copyToClipboard('copy-to-clipboard');copiedToClipboard('copy-to-clipboard-tooltip');return false;" onmouseout="resetClipboard('copy-to-clipboard-tooltip')">
|
||||
<span class="tooltiptext" id="copy-to-clipboard-tooltip">Kopieren</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## WYSIWYG (old)
|
||||
```
|
||||
<link rel="stylesheet" type="text/css" href="/cssjs/wysiwyg.css">
|
||||
...
|
||||
<div class="wysiwyg"></div>
|
||||
...
|
||||
<script src='/cssjs/wysiwyg.js'></script>
|
||||
```
|
||||
|
||||
## ckEditor5
|
||||
```
|
||||
<script src="/cssjs/ckeditor.js"></script>
|
||||
|
||||
<script>ClassicEditor
|
||||
.create( document.querySelector( '.editor' ), {
|
||||
|
||||
toolbar: {
|
||||
items: [
|
||||
'heading',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'link',
|
||||
'removeFormat',
|
||||
'fontSize',
|
||||
'fontFamily',
|
||||
'|',
|
||||
'bulletedList',
|
||||
'numberedList',
|
||||
'todoList',
|
||||
'|',
|
||||
'indent',
|
||||
'outdent',
|
||||
'alignment',
|
||||
'horizontalLine',
|
||||
'|',
|
||||
'imageUpload',
|
||||
'imageInsert',
|
||||
'blockQuote',
|
||||
'insertTable',
|
||||
'mediaEmbed',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'codeBlock',
|
||||
'exportPdf',
|
||||
'htmlEmbed',
|
||||
'exportWord',
|
||||
'highlight'
|
||||
]
|
||||
},
|
||||
language: 'de',
|
||||
image: {
|
||||
toolbar: [
|
||||
'imageTextAlternative',
|
||||
'|',
|
||||
'imageStyle:full',
|
||||
'imageStyle:side',
|
||||
'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
|
||||
'|',
|
||||
'imageResize',
|
||||
]
|
||||
},
|
||||
table: {
|
||||
contentToolbar: [
|
||||
'tableColumn',
|
||||
'tableRow',
|
||||
'mergeTableCells'
|
||||
]
|
||||
},
|
||||
licenseKey: '',
|
||||
|
||||
} )
|
||||
.then( editor => {
|
||||
window.editor = editor;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} )
|
||||
.catch( error => {
|
||||
console.error( 'Oops, something went wrong!' );
|
||||
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
|
||||
console.warn( 'Build id: p276tlu14l98-tj7z79o4qxsd' );
|
||||
console.error( error );
|
||||
} );
|
||||
</script>
|
||||
```
|
||||
|
||||
## mailto
|
||||
```
|
||||
<span class="mailto">mail@<span style="display:none;">no-thx-</span>server.de</span
|
||||
<script src="/cssjs/mailto.js"></script>
|
||||
```
|
||||
|
||||
## ajax-Feedback
|
||||
```
|
||||
<script src="/cssjs/feedback.js">
|
||||
... onclick="return ajaxFeedback(this,'ajax.php','margin-top:300px;');" ...
|
||||
# cssjs\_func\_lib
|
||||
git submodule add https://git.seemsleg.it/pub/cssjs-func-lib cssjs
|
||||
|
||||
## install
|
||||
|
||||
```
|
||||
<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" class="switch" 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">
|
||||
|
||||
<div class="copy-to-clipboard">
|
||||
<input type="text" readonly="true" value="blablabla" id="copy-to-clipboard" onclick=" copyToClipboard('copy-to-clipboard');copiedToClipboard('copy-to-clipboard-tooltip');return false;" onmouseout="resetClipboard('copy-to-clipboard-tooltip')">
|
||||
<span class="tooltiptext" id="copy-to-clipboard-tooltip">Kopieren</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## WYSIWYG (old)
|
||||
```
|
||||
<link rel="stylesheet" type="text/css" href="/cssjs/wysiwyg.css">
|
||||
...
|
||||
<div class="wysiwyg"></div>
|
||||
...
|
||||
<script src='/cssjs/wysiwyg.js'></script>
|
||||
```
|
||||
|
||||
## ckEditor5
|
||||
```
|
||||
<script src="/cssjs/ckeditor.js"></script>
|
||||
|
||||
<script>ClassicEditor
|
||||
.create( document.querySelector( '.editor' ), {
|
||||
|
||||
toolbar: {
|
||||
items: [
|
||||
'heading',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'link',
|
||||
'removeFormat',
|
||||
'fontSize',
|
||||
'fontFamily',
|
||||
'|',
|
||||
'bulletedList',
|
||||
'numberedList',
|
||||
'todoList',
|
||||
'|',
|
||||
'indent',
|
||||
'outdent',
|
||||
'alignment',
|
||||
'horizontalLine',
|
||||
'|',
|
||||
'imageUpload',
|
||||
'imageInsert',
|
||||
'blockQuote',
|
||||
'insertTable',
|
||||
'mediaEmbed',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'codeBlock',
|
||||
'exportPdf',
|
||||
'htmlEmbed',
|
||||
'exportWord',
|
||||
'highlight'
|
||||
]
|
||||
},
|
||||
language: 'de',
|
||||
image: {
|
||||
toolbar: [
|
||||
'imageTextAlternative',
|
||||
'|',
|
||||
'imageStyle:full',
|
||||
'imageStyle:side',
|
||||
'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
|
||||
'|',
|
||||
'imageResize',
|
||||
]
|
||||
},
|
||||
table: {
|
||||
contentToolbar: [
|
||||
'tableColumn',
|
||||
'tableRow',
|
||||
'mergeTableCells'
|
||||
]
|
||||
},
|
||||
licenseKey: '',
|
||||
|
||||
} )
|
||||
.then( editor => {
|
||||
window.editor = editor;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} )
|
||||
.catch( error => {
|
||||
console.error( 'Oops, something went wrong!' );
|
||||
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
|
||||
console.warn( 'Build id: p276tlu14l98-tj7z79o4qxsd' );
|
||||
console.error( error );
|
||||
} );
|
||||
</script>
|
||||
```
|
||||
|
||||
## mailto
|
||||
```
|
||||
<span class="mailto">mail@<span style="display:none;">no-thx-</span>server.de</span
|
||||
<script src="/cssjs/mailto.js"></script>
|
||||
```
|
||||
|
||||
## ajax-Feedback
|
||||
```
|
||||
<script src="/cssjs/feedback.js">
|
||||
... onclick="return ajaxFeedback(this,'ajax.php','margin-top:300px;');" ...
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user