http://www.duellinksmeta.com/pve2.html
This is a test page of my site. I learned how to create a link to jump to a specific part of a page, but what I want to accomplish is a link that opens a tab and/or jumps to content within a tab.
My main reason for this is I want people to be able to share a link that when used as a URL, it will go directly to the relevant tab opened with the content they want to see.
Without using javascript and CSS there is no provision in HTML to accomplish what you are looking for. However, if you do use javascript and CSS, this is quite easy. Tab sets can be implemented with <ul> and <li> elements, and jumps to tabs and specific bookmarks on tabs can be implemented with javascript based manipulation of CSS rules.
Related
I'm working on pretty simple web side that cointains login screen (almost same as in demo presentation, white page with login and password) and main screen with sidebar and navigation bar. How should it be done? My plan is to build main screen using navigation bar, sidebar (just few buttons in layout basicly) and few layouts with content of the webside. On each button click change layout used to create content to another one, for example for Schudele button I'm gonna load layout that contains some tables, for About button plain text. Is it good idea?
So finnaly is should look like this:
init() function decides if user is logged or not and display Login page or Main page, Main Page is builded from modules like navbar, sidebar and content, content depends on sidebar buttons click. I'm right?
Handling it on your own is legit way to start or learn Vaadin. If you have a first grasp of this works out, the most common way to handle such a scenario is the use of the Navigator See the book of Vaadin.
With the Navigator you define Views and give them a name, register them with the Navigator. Then you can navigate your application with the Navigator, it takes care to give you nice ...#!view... URLs so the Users can have bookmarks and navigate your app also e.g. with the back button in the browser.
The Navigator hooks into an event system, where listeners (ViewChangeListener) can react to "before enter" and "leave". The "before enter" can be used to realize auth needs, since they are allowed to object entering a view.
I followed this example on wc3schools
I tried to implement the exact code to my Project. I want the navigation bar to change pages but somehow I can not get it work. However I'm able to make the navigation bar to work if I Place a url within, like <li>Google</li>.
My question is if navbars can be used between Jquery mobile pages and if it is possible, what am I doing wrong? Would be nice with a working example!
There is some excellent documentation including examples available at the jQuery Mobile demos pages. The specific link to the NavBar docs can be found here. I'd suggest having a read at these documents.
In summary however, a navigation bar is is a <div> with a data-role of "navbar" that contains an <ul> list where each button in the navbar is a <li> which does indeed contain an anchor <a> tag which defines where a click of the specific button will take you.
I'm using phonegap and jquery mobile to build an app.
Until now the "all pages in one html file" was being used, but the project is going to be really big and will be bad to have all in one file.
All the pages are in the file index.html
Only one called mentions in mentions.html.
When going from the page "dashboard" from index.html to "mentions" on mentions.html is ok, the transiction go well.
But when the back button is clickd, it goes to the dashboard page with No transiction .
here's my button:
Dashboard
Use jQuery Mobile's back button link.
Dashboard
"Back" button links If you use the attribute data-rel="back" on an
anchor, any clicks on that anchor will mimic the back button, going
back one history entry and ignoring the anchor's default href. This is
particularly useful when generating "back" buttons with JavaScript,
such as a button to close a dialog. When using this feature in your
source markup, although browsers that support this feature will not
use the specified href attribute, be sure to still provide a
meaningful value that actually points to the URL of the referring page
to allow the feature to work for users in C-Grade browsers. If users
can reach this page from more than one referring pages, specify a
sensible href so that the navigation remains logical for all users.
Also, please keep in mind that if you just want a reverse transition
without actually going back in history, you should use the
data-direction="reverse" attribute instead. Note:
data-direction="reverse" is meant to simply run the backwards version
of the transition that will run on that page change, while
data-rel="back" makes the link functionally equivalent to the
browser's back button and all the standard back button logic applies.
Adding data-direction="reverse" to a link with data-rel="back" will
not reverse the reversed page transition and produce the "normal"
version of the transition.
Throughout the jQuery Mobile docs, they use a left-side menu for navigation that changes to a more mobile friendly version when the browser width is smaller. You can see an example on this page.
They use this layout throughout the docs, and I can see in the source that they use two divs with the IDs "content-primary" and "content-secondary." My question relates to the fact that I can't find anything about this structure actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to make this, or did I miss it in the documentation somehow?
I'm frankly quite surprised to see how challenging it's been to find a left nav example that works consistently and as expected in JQM.
I wound up copying code directly from the JQM docs, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as the various #media queries which make the menu responsive).
The JQM docs do not use the "multi-page" format. Instead, each nav menu item links to a wholly separate URL (presumably prefetched into the DOM by adding data-prefetch="true" to the link), so each new page/URL must redefine the same nav menu over again.
This immediately makes my developer brain think "let's abstract the menu and include it on each page automatically". But how to 'include' the menu on each page without PHP (or other server-side language)? This is the problem I have yet to solve.
You may be able to call the $(document).bind('pageinit', function to manually inject your menu into the loading page by using javascript/jquery, but I have yet to figure out how to do this properly.
I'll keep you posted if/when I have a workable solution.
Actually this is not specific to jquery mobile, this is CSS3. You can check documentation here: http://www.css3.info/preview/media-queries/. Essentially what they do is specify style rules for different screen width using media query as shown in this example:
#media all and (min-width: 650px) { // you can define your width here
// style rules here
}
Are you talking about something like the left menu at http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html# ? Haven't played with it but it looks like these days it just takes
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
I have a list of menu items and content in a single page. In PC browser or ipad, I want to see both parts in the same page. But in the smaller devices such as iphone and android phone, I want to separate the two so that you selects one of menu items in a page and see its content when he clicks it.
Jquery mobile demo page already does it. But I can't figure out how I can achieve it. Can someone explain or point to any good reference? Thanks
You may take a look at the following blog post which illustrates how you could organize your views so that based on the client type you could provide different contents.