If I have a collapsible list in JQM, how to I get the item that is expanded?
I've tried; $("#addressMDUList").find(":selected").text() but that doesn't work.
So I have;
<div id="addressMDUList" data-role="collapsible-set" data-theme="d" data-content-theme="d">
and the sets are added programmatically. Now, just before I rebuild the list, I want to get the set the user last had open, rebuild the list, and then open that set again.
Collapsed collapsible has class ui-collapsible-collapsed, this class is removed once a collapsible is expanded. Inside a collapsible-set there should be only one expanded collapsible or none.
All you need to filter the expanded one using .not(".ui-collapsible-collapsed").
var expanded = $("col-set-id").find(".ui-collapsible").not(".ui-collapsible-collapsed");
Demo
Related
I have a svelte component that display a list of items, the item list is exported and can be updated outside the component. Usually the list is long and there is a vertical scrollbar on the container <div>.
<script>
export let items = [];
export let function stickTo(item) {
// What to write here?
}
</script>
<div id="container">
{#each items as item}
<div id="{item.anchor}">...</div>
{/each}
</div>
I would like to scroll the container to a given item, and then stick to it even if the item list is updated. The idea is that all items can appear or disappear anywhere in the list, but the selected item should always stay at the same place on the screen.
You could use a svelte action to perform that.
You'd have to keep some kind of "temp array" that would store the old values of "items".
Everytime items would get updated, you would find the new value that's been added by comparing the two arrays.
Of course, if you do have some kind of communication between your components, using context or store, the temp array is not relevant.
Since all your div have ids, I guess you could retrieve the height of the element that has just been added by doing a getElementById(newElementId).getBoundingClientRect().height
Then you'd just have to apply a scrollTo to your node (that has been passed by the svelte action). The Y value would be equal to the current scrollTop + your new element's height, the X would be 0.
Still you'd need to be careful not to update the scroll if the element has been placed after your selected item element in the items array.
Maybe I did not understand what you want to do, but I'd go for something like this. Here is an REPL :
https://svelte.dev/repl/bb45f0487f7f4a43af58fb3b861c19ec?version=3.38.2
is it possible to put mat-expansion-header at the bottom of mat-expansion-content when expanded ?
I only have an arrow in the header, so I would like to have the arrow at the bottom of the panel when it is expanded.
Thank you
I wanted to achieve the same. I moved the content that is displayed when the panel is collapsed above the panel. Then only displayed it when the panel is collapsed. Like so:
<p *ngIf="panelOpenState">I'm the panels content</p>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
title
</mat-panel-title>
</mat-expansion-panel-header>
</mat-expansion-panel>
And in ts you need to have the panelOpenState variable:
public panelOpenState = false;
But in the end I replaced the whole mat-expansion-panel part with a button because I liked the look of it more..
I am using data table component in Quasar. I am able to view table and it’s awesome. here's
Now I need to click on a row cell and make it editable input text field, and after pressing ‘Enter’ button I need to save data there itself.
How to proceed further? please help me.
First thing is I didn't find any inbuilt functionalities of the data table to edit row. So I thought of moving with my custom functionalities. The good thing about Data table in Quasar is that it provides the use of templates for manipulation of any row.
So I used a template like this:
<template slot="col-Name" scope="cell">
<span #click = "nameAction()">{{cell.data}}</span>
<input type="text"
v-model="cell.data" v-show="edit1" v-on:keyup.enter="edit1 = false;"> <br>
</template>
So here I'm cosidering one of the row in the column(Name), and on click of the row calling a function called nameAction.
And here is the function inside a method:
nameAction: function (row) {
this.edit1 = true
}
Here I am making an input field visible on clicking the row.
For reference, you can use this fiddle.
In my list some elements have sub-items and some not. These, that don't have have sub-items should work as buttons/links.
Unfortunately including an item like in my collapsibleset
<div data-role="collapsible" data-iconpos="none">
<h3 >Title</h3>
</div>
and setting in JS a's href to needed link looks great, but JQM triggers open/closing event by clicking on it. That changes it's look and my link inside the element doesn't work.
Does someone have ideas?
Is that what you want ?
JsFiddle
$("h3").on("click", function(e){
$(this).parent().collapsible({collapsed: true});
});
It prevents the collapsible to open
If you need the collapsible to stay in the state it is when the page
is loaded, you can check the state of the collapsible with
$(".ui-collapsible").hasClass('ui-collapsible-collapsed')
and let it open if it is already open, or close if it is already
close.
JsFiddle
You could use that if you have a button inside your collapsible
header, and do not want the collapsible to react when you click on
the button but still on the header (outside the button) Final
working exemple : JsFiddle
Edit : As you requested in the comments, here is a JsFiddle with a collapsible header opening a website on click instead of collapsing/expanding the collapsible.
Explanation :
1) You could store the url in an attribute of the "h2" like this :
<h2 data-url="google.com"; >google.com</h2>
2) Then you add a class when you don't want the heading to collapse/expand the collapsible : class="doNotTriggerCollapsible"
So you have :
<h2 class="doNotTriggerCollapsible" data-url="google.com"; >google.com</h2>
3) Then you retrieve the url with $(this).data("url") and you open the link with
window.open($(this).data("url"))
I'm starting with jQuery mobile and have some problems with my buttons.
The web application is a shopping list. It displays a list of items to shop and in the footer buttons on actions I can perform on the items.
The actions are:
increment number of items to buy
decrements number of items to buy
move item up in list
move item down in list
add new item
delete item
modify item text description
The actions are implemented in javascript and works fine. The problems I have is with controlling the buttons and the associated actions.
By experience, I have see that for the increment and decrement it is more convenient to have a button with an active state, for the other operations it is preferable to have a selected item and apply the action on the selected item when the button is pressed. When adding an item, the item would be inserted before the selected item, and if pressed when no item is selected, the new item is appended to the list.
I would also like to have 2 modes. In one mode, only the increment and decrement buttons are shown and the user can update the number of items in its list. In the other mode the user is modifying its list. It is in the second mode that the selected item is required.
I managed to associate a default action my item lists by using the .on() method as a delegate.
$('#itemList').on( "click", ".item", function(evt)
{ ctrl.doAction($(evt.currentTarget)); });
Here is the html code I use to test the first mode.
<!-- footer -->
<div data-role="footer" data-position="fixed" class="ui-bar" id="btnBar" >
Plus
Minus
</div>
<!-- /footer -->
What should I put as href value ? I don't want the page to be reloaded. In some examples I see "#".
This is how I associate the action to the button:
$('#btnPlus').on( "tap", function(evt)
{ ctrl.doAction = ctrl.increment; });
Another problem I have is that there is no feedback on the button click action. When I click a button I would expect to have it highlighted for a short time. This doesn't happen.
The browsers have also different behaviors. In firefox, the clicked button gets a blue halo apparently showing that it has the focus. But the button isn't displayed as active.
If I put "#!" as href (don't know what it means) on Android, the clicked button is shown active.
Should I use click or tap as event type ? How could I write click or tap ?
How could I implement a two state button displayed as active and inactive ?
How is an action button used : always displayed inactive and feedback when pressed ?
I solved the problem my self.
to switch between sets of buttons in the footer, I create multiple footers in my HTML document with style="display:none" in the hidden footers. The one without this will be shown. I assigned a specific id to each footer so that I can write $("#footer1").hide(); $("#footer2").show();
I have buttons to switch between footers. The footer switching event handler must be called with the "mouseup" event. This is required for it to work on the iPad and Android phones.
To change appearance, don't use .button() as suggested here. Use:
$("#myButton")
.removeClass( "ui-btn-up-a ui-btn-down-a ui-btn-hover-a" )
.addClass("ui-btn-up-b")
.attr( "data-theme", "b" );
Note: There was a bug in my code which caused desperate hair pulling