JqueryUI Selectable Example

Post Views: 4,441

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

<!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>

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>

<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>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</div>

</li>

</ul>

<h2>Selected</h2>

$(".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

JqueryUI Selectable Example

index.html

Output:

Demo

Comments

Leave a Reply Cancel reply