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

pub

Browse Source
This commit is contained in:
troy-grunt
2021-05-10 09:59:25 +02:00
parent 8326b30eca
commit 94c60eacb9
1 changed files with 199 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

398
README.md
View File

@@ -1,200 +1,200 @@
# cssjs\_func\_lib # cssjs\_func\_lib
## install git submodule add https://git.seemsleg.it/pub/cssjs-func-lib cssjs
``` ## 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/admin.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/cssjs/jquery-ui.min.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.min.js"></script>
<script src="/cssjs/jquery-ui.min.js"></script> <script src="/cssjs/jquery-ui.min.js"></script>
<script src="/cssjs/form.js"></script> <script src="/cssjs/form.js"></script>
``` ```
## Dropzone ## Dropzone
``` ```
<form action="/upload" class="dropzone needsclick dz-clickable" id="demo-upload"> <form action="/upload" class="dropzone needsclick dz-clickable" id="demo-upload">
<div class="dz-message needsclick"> <div class="dz-message needsclick">
<button type="button" class="dz-button">Drop files here or click to upload.</button><br> <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> <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
</div> </div>
</form> </form>
``` ```
## Parallax ## Parallax
``` ```
<link rel="stylesheet" href="/css/parallax.css"> <link rel="stylesheet" href="/css/parallax.css">
... ...
<div class="parallax" style="background-image: url(img);">&nbsp;</div> <div class="parallax" style="background-image: url(img);">&nbsp;</div>
``` ```
## Divs anordnen ## Divs anordnen
``` ```
<script src="/cssjs/masonry.pkgd.min.js"></script> <script src="/cssjs/masonry.pkgd.min.js"></script>
<div class="grid"> <div class="grid">
<div class="grid-item">...</div> <div class="grid-item">...</div>
<div class="grid-item grid-item--width2">...</div> <div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div> <div class="grid-item">...</div>
... ...
</div> </div>
.grid-item { width: 200px; } .grid-item { width: 200px; }
.grid-item--width2 { width: 400px; } .grid-item--width2 { width: 400px; }
``` ```
## Checkbox Switch ## Checkbox Switch
``` ```
<link rel="stylesheet" href="/cssjs/switch.css"> <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> <input type="checkbox" class="switch" name="publish" id="checkPub" value="1" ' . ($data ['publish'] ? 'checked="true"' : '') . ' /><label for="checkPub"></label>
``` ```
## DateTimePicker ## DateTimePicker
``` ```
<link rel="stylesheet" type="text/css" href="/cssjs/jquery-ui.min.css"> <link rel="stylesheet" type="text/css" href="/cssjs/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/cssjs/jquery.datetimepicker.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-ui.min.js"></script>
<script src="/cssjs/jquery.datetimepicker.full.min.js"></script> <script src="/cssjs/jquery.datetimepicker.full.min.js"></script>
<script> <script>
jQuery(\'.datetime\').datetimepicker({ jQuery(\'.datetime\').datetimepicker({
format:\'d.m.Y H:i\', format:\'d.m.Y H:i\',
step:30, step:30,
onShow:function( ct ){ onShow:function( ct ){
}, },
timepicker:true timepicker:true
}); });
</script> </script>
``` ```
## textarea autoheight ## textarea autoheight
``` ```
<textarea style="max-height: 300px;" class="autoheight"></textarea> <textarea style="max-height: 300px;" class="autoheight"></textarea>
<script src='/cssjs/autosize.js'></script> <script src='/cssjs/autosize.js'></script>
<script> <script>
autosize(document.querySelectorAll('textarea.autoheight')); autosize(document.querySelectorAll('textarea.autoheight'));
</script> </script>
``` ```
## Copy to Clipboard ## Copy to Clipboard
``` ```
<script src='/cssjs/copy-to-clipboard.js'></script> <script src='/cssjs/copy-to-clipboard.js'></script>
<link rel="stylesheet" type="text/css" href="/cssjs/copy-to-clipboard.css"> <link rel="stylesheet" type="text/css" href="/cssjs/copy-to-clipboard.css">
<div class="copy-to-clipboard"> <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')"> <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> <span class="tooltiptext" id="copy-to-clipboard-tooltip">Kopieren</span>
</div> </div>
``` ```
## WYSIWYG (old) ## WYSIWYG (old)
``` ```
<link rel="stylesheet" type="text/css" href="/cssjs/wysiwyg.css"> <link rel="stylesheet" type="text/css" href="/cssjs/wysiwyg.css">
... ...
<div class="wysiwyg"></div> <div class="wysiwyg"></div>
... ...
<script src='/cssjs/wysiwyg.js'></script> <script src='/cssjs/wysiwyg.js'></script>
``` ```
## ckEditor5 ## ckEditor5
``` ```
<script src="/cssjs/ckeditor.js"></script> <script src="/cssjs/ckeditor.js"></script>
<script>ClassicEditor <script>ClassicEditor
.create( document.querySelector( '.editor' ), { .create( document.querySelector( '.editor' ), {
toolbar: { toolbar: {
items: [ items: [
'heading', 'heading',
'|', '|',
'bold', 'bold',
'italic', 'italic',
'underline', 'underline',
'link', 'link',
'removeFormat', 'removeFormat',
'fontSize', 'fontSize',
'fontFamily', 'fontFamily',
'|', '|',
'bulletedList', 'bulletedList',
'numberedList', 'numberedList',
'todoList', 'todoList',
'|', '|',
'indent', 'indent',
'outdent', 'outdent',
'alignment', 'alignment',
'horizontalLine', 'horizontalLine',
'|', '|',
'imageUpload', 'imageUpload',
'imageInsert', 'imageInsert',
'blockQuote', 'blockQuote',
'insertTable', 'insertTable',
'mediaEmbed', 'mediaEmbed',
'undo', 'undo',
'redo', 'redo',
'|', '|',
'codeBlock', 'codeBlock',
'exportPdf', 'exportPdf',
'htmlEmbed', 'htmlEmbed',
'exportWord', 'exportWord',
'highlight' 'highlight'
] ]
}, },
language: 'de', language: 'de',
image: { image: {
toolbar: [ toolbar: [
'imageTextAlternative', 'imageTextAlternative',
'|', '|',
'imageStyle:full', 'imageStyle:full',
'imageStyle:side', 'imageStyle:side',
'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
'|', '|',
'imageResize', 'imageResize',
] ]
}, },
table: { table: {
contentToolbar: [ contentToolbar: [
'tableColumn', 'tableColumn',
'tableRow', 'tableRow',
'mergeTableCells' 'mergeTableCells'
] ]
}, },
licenseKey: '', licenseKey: '',
} ) } )
.then( editor => { .then( editor => {
window.editor = editor; window.editor = editor;
} ) } )
.catch( error => { .catch( error => {
console.error( 'Oops, something went wrong!' ); 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.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.warn( 'Build id: p276tlu14l98-tj7z79o4qxsd' );
console.error( error ); console.error( error );
} ); } );
</script> </script>
``` ```
## mailto ## mailto
``` ```
<span class="mailto">mail@<span style="display:none;">no-thx-</span>server.de</span <span class="mailto">mail@<span style="display:none;">no-thx-</span>server.de</span
<script src="/cssjs/mailto.js"></script> <script src="/cssjs/mailto.js"></script>
``` ```
## ajax-Feedback ## ajax-Feedback
``` ```
<script src="/cssjs/feedback.js"> <script src="/cssjs/feedback.js">
... onclick="return ajaxFeedback(this,'ajax.php','margin-top:300px;');" ... ... onclick="return ajaxFeedback(this,'ajax.php','margin-top:300px;');" ...
``` ```