In jQuery Mobile, I want to have a vertical list of items which the user can select by tapping on them.
I want:
a filter bar (so the user can first search for a subgroup of the items, and select among these)
no inset view (full width, no rounded corners)
a checkbox on right hand side which indicates whether the item is currently selected
full item surface activates the checkbox
This means to combine the behavior of a jQM thumbnail listview with filter (points 1. and 2. above) and a checkbox fieldset (points 3. and 4.).
My attemps so far fail with:
- a checkfox fieldset has no filter and is always inset
- listview does not show a jQM-styled checkbox, even when an <input> and a <label> item is used (as far as I can tell)
Any help is appreciated.
Using jQuery Mobile 1.2.0
Look at this example and add whatever you want to it. This is not your full requirement but it can be build upon.
This is original example.
<li data-icon="false">
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0"/>
</div>
Message 1
</li>
Now it is easy to create correlation between li element and its child checkbox.
To be able to activate/deactivate chechbox while interacting with li element us this code:
Long:
$('li').bind('click', function(e) {
if($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).find('input[type="checkbox"]').prop('checked', false)
} else {
$(this).find('input[type="checkbox"]').prop('checked', true)
}
});
Short:
$('li').bind('click', function(e) {
$(this).find('input[type="checkbox"]').prop('checked', ($(this).find('input[type="checkbox"]').is(':checked')) ? false : true);
});
This should work on jQuery version 1.6 and above.
Final notes
If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.
Related
I am using two different plugins for two button. I want to move one button next to another button. It seems like two button are in two separate divs. So how can i move one button to the div of another button.
It will be better if you provide us your HTML structure for you both button divs.
Here I assume that, following are the HTML structure for both the buttons:
<div class="button1_div"><button>Retail Enquiry</button></div> // html code for button 1
And
<div class="button2_div"><button>For Product Enquiry</button></div> // html code for button 2
As you can see, I have given class to both the divs.
If,my html structure matches with yours, you can add the following jQuery code for that particular page:
jQuery(document).ready(function(){
// condition to check both the divs are exists or not
if(jQuery('.button1_div').length > 0 && jQuery('.button2_div').length > 0){
firstButton = jQuery('.button1_div').html();
jQuery('.button2_div').append(firstButton); // this line will add button at the end of div. So your result will be "For Product Enquiry" and then "Retail Enquiry".
jQuery('.button2_div').prepend(firstButton); // This lie will add button in beginning of div. So your result will be "Retail Enquiry" and then "For Product Enquiry" buttons.
jQuery('.button1_div').html(''); // this line will remove <button> from first div, but it will keep empty div
jQuery('.button1_div').remove(); // this line will remove the first div.
}
});
You can also use .insertAfter() or .insertBefore() functions as per where you want to add the button.
Again, if you provide your HTML structure, we can provide you accurate answer.
Please let me know if you need any further help in this.
Thanks!
I use KendoUI Grid to show data. When I use columns.filterable in configurations guide, the display data is too long.
As you can see in the above picture.
And I investigated and used .k-multicheck-wrap to extend the width.
BUT the problem I met that css class above will affect to all filter menu.
SO I want to affect the Uploaded Time column only.
You can use jquery and filterMenuInit event. This event is fired only once - when you click filter icon. And there you can do this magic.
filterMenuInit: function(e){
if(e.field == "UploadedBy")
{
e.container.css({"width": "800px"});
}
},
Dojo example
I have problem with bootstrap drop up/down button.
Button Menu doesn't fit well on page.
I am looking for way to dynamically detect position on page of that button.
Base on location button should automatically drop up instead of drop down.
Here is problem:
on "SHOW" and "Action" button. Menu doesn't fit on page (It extends container).
https://jsfiddle.net/yz0ex8c5/
https://jsfiddle.net/3ro502q5/4/
The same happens when the button is on top. It opens Dropping up Instead of drop Down.
This is very important. Couse I use this buttons with drop down and drop up in table that can be sorted. I use Bootstrap-table library to sort rows in table.
You could check the scrollTop position for the page, then switch between .dropup or .dropdown according to what is most suitable.
$(window).scroll(function() {
var scrollTop = $("body").scrollTop();
if (scrollTop<50) {
$("#showBtnGroup").removeClass('dropdown').addClass('dropup');
} else {
$("#showBtnGroup").removeClass('dropup').addClass('dropdown');
}
});
forked fiddle -> https://jsfiddle.net/wenz3v5r/
Have given the btn-group an id for easy access. The evaluation value of 50 is completely arbitrary, have just added a lot of <br>'s to the bottom and the top of the page - that must depend on how your site looks like IRL. You should do the same (or rather the opposit) with the Action dropdown at the bottom.
I am using asp.net in VS 2013.
I want to display a pop up window when a user hovers over a div. I have 3 divs on the page and they are each a square of approx. 50x50. When the user brings their mouse over each one I want a different pop up box to appear.
I have been playing about with the hovermenuextender to achieve this but Im not getting anywhere as it needs a control as its target. IS there anyway to achieve this with an Ajax control?
thanks
You can try this:
step 1: Keep the three pop ups with different ids in your html with style = "display:none;position:absolute;top:50%;left:50%;". and a classname popup.
e.g.
<div class="popup" id="1" style = "display:none;position:absolute;top:50%;left:50%;"></div>
step 2: Give classname (respective ids of hidden divs) to your divs on which user will hover and a parent attribute to your divs.
e.g.
<div class="showdiv" parent="1"></div>
step 3: now write following code:
$(document).ready(function() {
$('.showdiv').mouseover(function() {
$(".popup").hide();
$("'#"+$(this).attr('parent')+"'").show();
});
});
try prop if attr doen't work.
Are there any CSS toolkits that let you reproduce radio button functionality but using photos / images laid out in a grid? For example, a grid of auto models on a rental car site, where the user needs to select a preferred vehicle for their rental application by clicking on the car's picture.
This is similar to HTML selection menu widgets, except:
The layout is a grid, not a line of items (i.e. needs to wrap).
The currently-selected item is persistent and always visible, optionally with a checkmark (or other icon-based indicator to show selection)
It would be great if the grid laid itself out intelligently (recalculates rows and columns) when the browser resizes.
It would also be nice to have the option to choose between single-selection (radio button) and multiple-selection (checkbox button) modes.
I thought this would be straightforward but I've had a really hard time finding anything like this. The JQuery UI button functionality is close but (I think) doesn't provide image-centric buttons or a reflowing grid.
This should work for you. You wrap each of your cars in a DIV, put a checkbox inside, and then wrap the image in a label for the checkbox. Clicking on the image checks the box.
The jQuery then changes the class of the wrapping DIV to selected so that you can style it to make it obvious that the car is selected.
jQuery
jQuery(document).ready(function ($) {
'use strict';
$('input:checkbox').click(function () {
$(this).closest('.photo').toggleClass('selected');
});
});
HTML
<div class="photo">
<input type="checkbox" name="image[0][status]" value="1" />
<label for="image[0][status]">
<img src="#" />
</label>
</div>