senaduka/old-web
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

implement segmented select control without JS

Browse Source
This commit is contained in:
Bilal Catic
2019-11-01 08:53:50 +01:00
parent e3e0ddd508
commit a0449f7ffd
2 changed files with 31 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/views/realEstateType.ejs
View File

@@ -3,18 +3,23 @@
<div class="center-align">
<div class="row">
<select class="segment-select" id="adType" name="adType">
<option value="<%= AD_TYPE.AD_TYPE_SALE.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_SALE.id) { %>
selected="selected"
<% } %>
><%= AD_TYPE.AD_TYPE_SALE.title %></option>
<option value="<%= AD_TYPE.AD_TYPE_RENT.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_RENT.id) { %>
selected="selected"
<% } %>
><%= AD_TYPE.AD_TYPE_RENT.title %></option>
</select>
<span class="segmented">
<label>
<input type="radio" name="adType" value="<%= AD_TYPE.AD_TYPE_SALE.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_SALE.id) { %>
checked
<% } %>>
<span class="label"><%= AD_TYPE.AD_TYPE_SALE.title %></span>
</label>
<label>
<input type="radio" name="adType" value="<%= AD_TYPE.AD_TYPE_RENT.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_RENT.id) { %>
checked
<% } %>>
<span class="label"><%= AD_TYPE.AD_TYPE_RENT.title %></span>
</label>
</span>
</div>
<br>
@@ -37,45 +42,6 @@
</form>
<script>
(function($) {
$.fn.extend({
Segment: function() {
$(this).each(function() {
const self = $(this);
const onchange = self.attr('onchange');
const wrapper = $("<div>", { class: "ui-segment" });
$(this)
.find("option")
.each(function() {
const option = $("<span>", {
class: "option",
onclick: onchange,
text: $(this).text(),
value: $(this).val(),
});
if ($(this).is(":selected")) {
option.addClass("active");
}
wrapper.append(option);
});
wrapper.find("span.option").click(function (){
wrapper.find("span.option").removeClass("active");
$(this).addClass("active");
self.val($(this).attr('value'));
});
$(this).after(wrapper);
$(this).hide();
});
}
});
})(jQuery);
$(document).ready(() => {
$(".segment-select").Segment();
});
function saveAndSubmit(id) {
$("#realEstateType").val(id);
$("#realEstateTypeSelection > a").attr("onclick", "");