Hello Friends, Today we are going to see jqueryui selectable example. JqueryUI selectable method enables a group of DOM elements to become selectable, so that we can select an element or by pressing ctrl we can select more than one elements. Actually, recently I have used this method in a project in which I was developing add media option just like WordPress. So I am sharing this example with some modification so that anyone else need it can benefit from it.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
<!DOCTYPE html> <html> <head> <title>jQueryUI Selectable Example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> #items { height: 300px; overflow-y: scroll; } #items .ui-selecting { background: #FECA40; } #items .ui-selected { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa; } #items .ui-selected > .check { display: block; } .items { list-style: none; position: static; padding: 2px; right: 0; margin: 0; margin-right: 0; left: 0; bottom: 0; overflow: auto; outline: 0; } .item { width: 19%; position: relative; list-style: none; float: left; cursor: pointer; text-align: center; margin: 4px 8px 4px 0px; padding: 7px; box-sizing: border-box; } .item-preview { position: relative; background: #eee; cursor: pointer; } .item-preview:before { content: ""; display: block; padding-top: 100%; } .item .thumbnail { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; transition: opacity .1s; border-radius: 0px; margin-bottom: 0px; } .item .thumbnail .centered { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .item .thumbnail .centered img { position: absolute; top: 0; left: 0; max-width: 100%; } .item .check { display: none; position: absolute; top: 0px; right: 0px; border: none; background-color: #0073aa; box-shadow: 0 0 0 1px #fff,0 0 0 2px #0073aa; padding: 3px 5px; color: #fff; } </style> </head> <body> <ul class="items selectable" id="items"> <li class="item"> <div class="item-preview"> <div class="thumbnail"> <div class="centered"> <img src="img/gull1.jpg"/> </div> </div> </div> <button type="button" class="check"><span class="fa fa-check"></span></button> </li> <li class="item"> <div class="item-preview"> <div class="thumbnail"> <div class="centered"> <img src="img/gull2.jpg"/> </div> </div> </div> <button type="button" class="check"><span class="fa fa-check"></span></button> </li> <li class="item"> <div class="item-preview"> <div class="thumbnail"> <div class="centered"> <img src="img/gull3.jpg"/> </div> </div> </div> <button type="button" class="check"><span class="fa fa-check"></span></button> </li> <li class="item"> <div class="item-preview"> <div class="thumbnail"> <div class="centered"> <img src="img/gull4.jpg"/> </div> </div> </div> <button type="button" class="check"><span class="fa fa-check"></span></button> </li> <li class="item"> <div class="item-preview"> <div class="thumbnail"> <div class="centered"> <img src="img/gull5.jpg"/> </div> </div> </div> <button type="button" class="check"><span class="fa fa-check"></span></button> </li> </ul> <h2>Selected</h2> <ul id="selected"></ul> <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" crossorigin="anonymous"></script> <script> $(".selectable").selectable({ selected: function (event, ui) { showSelectionInfo() }, unselected: function (event, ui) { showSelectionInfo() } }); function showSelectionInfo() { if($(".ui-selected").length > 0) { $("#selected").html(""); $(".ui-selected").each(function() { $("#selected").append("<li>" + $(this).find("img").attr("src") + "</li>"); }); } } </script> </body> </html> |
Output:
Demo
Click Here for Demo
Thank for visiting
Please don’t forget to share if you like it
Comments