I am building a responsive design and would like to use jquery mobile to provide just a menu. I was looking towards nested listviews (I know they are deprecated in 1.3.0). What I am after is a nested set of links in the footer. When an item with children is clicked, the sub menu will slide in, otherwise just navigate to the link that was clicked if it has no children.
This fiddle shows what I am after http://jsfiddle.net/QfyZd/6/
I thought that I would get the desired effect by marking up the footer with:
data-role="footer" data-position="fixed"
My question is though, how do I ensure the listview only affects the footer rather than the entire page? Or am using the wrong components to achieve what i'm after?
Related
I'm using this, Angular-UI Bootstrap Popover
And below is my code snnipt:
<a href=""
popover-placement="{{$index < 4 ? 'bottom' : 'left'}}"
popover-trigger="outsideClick"
uib-popover-template="'popover_table.html'">
Click me
</a>
When I click the link, it will show the popover_table.html content in page, it's a table which shows the data returned from backend. When there are too much data returned, The popover_table will show many records, and user need to scroll down inside the table. So They are asking if we can fixed the table header in the popover dialog top when scroll. Screenshot added below
So if there are more than 4 records, I need to add scroll-y and keep the table header fixed in the popover top so user can see it all the time when scrolling.
How to implement this feature? position fixed does not work in this case.
and also, if I add ng-click for <a>, then is there a way to execute the ng-click function after the popover shows? I tested and found that ng-click function execute first..
If you are using ng-click then it suppose to be worked if its still fails use $scope.$apply() inside click function
is it possible to navigate between two listview or even two view which has its own listview inside with slide motion in jQuery mobile, now as i implement the first sample when i click on a listview it does not have any motion, it just refresh and the other view come to browser. my purpose is to navigate between two view as like as native ios application which second view slide into first view from right to left.
is this possible with jQuery mobile?
thanks
solution without changing pages
if you don't want to change your page, a possible solution would be to wrap each listview in a swipable <div />.
There are some plugins out there like:
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
http://www.idangero.us/sliders/
solution with changing pages
If you're looking for standard page-transitions, take a look #
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
data-transition="slide" like #Omar said would fit your requirements.
try this
<li data-transition="slide"></li>
I am trying to add a horizontal toolbar at he top of my application (uses android webview and jquery mobile) that contains a bunch of buttons (too many to fit across the screen in a single line).
The problem that I am facing is that instead of hiding the extra buttons, they wrap around to the next line. What I would like is for them to hide and be accessible by scrolling them horizontally just like a native ListView would allow me to do.
I have tried to use a ListView to put the buttons in, and pass the button presses to the javascript code by doing loadUrl(), but this causes other issues and is not usable in my case (it automatically hides the soft keyboard).
I have tried the following code (along with this code wrapped in a jquery mobile toolbar):
<ul data-role="controlgroup" data-type="horizontal">
<li>B</li>
<li>I</li>
<li>U</li>
<li>S</li>
<li>ol</li>
<li>ul</li>
<li>in</li>
<li>out</li>
<li>sub</li>
<li>sup</li></ul>
But this just wraps around to the next line.
Try putting the ul in a div, and set the div's width property to a large value, enough to accomodate all the buttons. Then set the overflow property to auto, and you should be good to go.
I have created tab layout as in this example http://jqueryui.com/demos/tabs/#bottom with controls bellow the panel. I have 3 default tabs, which can't be delted and than user can add some more tabs and also delete them.
The problem is that the default tabs should be on the top like there http://jqueryui.com/demos/tabs/#default so because UI doesn't support two control panels, I have created new element looking like control panel on top <p class="ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top tabs-header-top"></p> with fixed heigth. But now I don't know how to move the default tabs to the right position. I tried adding them position: relative; top:-20em; ,but to make this working, the whole tab container must have fixed heigth and that's bad, because I need it to stretch within the window to be as big as possible.
So is there any other way how to move the default tabs to the top?
Thanks
edit: here is example of my idea, but achieved with fixd heigth http://jsfiddle.net/L6QjK/2/
To be clear: This method is technicaly working, so the questin is not about making tabs with two control panels, but about positioning the tabs
Not sure if it will work, but try creating two DIVs, one with default styling and one with the bottom styling:
<div class="tabs">...
<div class="tabs tabs-bottom">
and then use $(".tabs").tabs(...)
So finally I managed to create two control panels on my own by changing the jquery ui code.
If somebody is trying to make same thing as I here are some tips:
1) To create multiple control panels, find this.list=this.element.find("ol,ul)").eq(0)
now, the .eq(0) selector causes, that onlz the first ul or ol is made to control panel, so I simply modified the find selector to this :this.list=this.element.find("ol,ul:lt(2))") and the :lt(2) selector will make first two ULs to two control panels. Now we have two control panels and it is all about css positioning, you can get isnpired here http://jqueryui.com/demos/tabs/#bottom to move one control panle to the bottom.
2)I am using schema, that the first control panel contains static tabs, and to the second one are added dznamic tabs. So I also needed to change the target during adding tabs. For this you have to find h.appendTo(this.list) and change it to h.appendTo(this.list[1]) because ad.1) this.list now contains two elements and I want the tabs add to the second one.
So finaly to make two control panels tab layout isn't that hard
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.