jquery.sketchIt plugin: Version 1.0

jquery.sketchIt

Author:

  1. Basic use
  2. Initial settings
  3. Toolbar

Toolbar

Example

html

<div id="ex3"></div>

javascript

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="src/jquery-ui.min.js"></script>
<script src="src/jquery.mobile.custom.min.js"></script>
<script src="src/jquery.sketchIt.min.js"></script>
<script>
    $(function () {
        $('#ex3').sketchIt(
            tools:true,
        );
    });
</script>

css

#ex3 {
    height: 200px;
}
#tools {
    position: fixed;
    z-index: 1000;
    top: 60px;
    right: 60px;
}
#tools {
    background-color: #ddd;
    color: #565656;
    width: 62px;
    font-family: Arial, Sans-serif;
    font-size: 0.85em;
}
#tools i {
    padding: 3px;
    display: block;
}
#tools * {
    margin:0px;
    padding:0px;
}
#tools ul {
    clear: both;
}
#tools li {
    list-style-type:none;
    min-width: 50px;
    min-height: 50px;
    padding: 5px;
    position: relative;
    background-color: #ddd;
    text-align:center;
}
#tools span {
    display: block;
    border: 1px solid #bbb;
    width: 50px;
    height: 50px;
    background-color: #ddd;
}
span.text {
    font-size: 3.3em;
}
#tools li ul {
    display:none;
    position: relative;
    left: -60px;
    top: 0px;
    z-index: 1000;
}
#tools li:hover {
    background-color: #bbb;
}
#tools li:hover span {
    border-color: #999;
}
#tools li:hover>ul {
    display:block !important;
    position: absolute;
}
#tools .current {
    background-color: #bbb;
}
.catview {
    border: 0px !important;
}
Top of page