Hi I'm a bit of ROR noob. Wondering if anyone can help me implement a drop down menu that shows categories and their subcategories?
What sort of code will get me started?
I've already entered the data for the categories, I'm just not sure where to put the code to make them appear as a friendly drop down menu with their subcategories as a branch of each category.
Any help would be great.
EDIT this is what code I have for the drop down:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Categories
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Sports</li>
<li>Pop Culture</li>
<li>Tazos</li>
<li>Woolworths Collectibles</li>
</ul>
</div>
and I would like to add an on-hover or on-click action that shows the sub-categories of the categories in the list.
It sounds like you want to add some interactivity to the view layer of your application. The type of code that will get you started with this feature is Javascript. The app/assets/javascripts directory of your project is where you put this code. By default, while you are building your application in a development environment, Ruby on Rails will reload any changes you make to files inside this directory each time you refresh the view in your browser.
The Rails Guides have excellent documentation on the manner in which Rails handles your static assets such as javascript, and your CSS files.
http://guides.rubyonrails.org/asset_pipeline.html
There are an amazing amount of free resources available with a little googling, which show you the basics of javascript, and how to make dropdown menus.
There is also a powerful javascript library called JQuery that can make what you are looking to do even more straightforward.
This walkthrough seems very similar to what you are trying to achieve. You can customize it to fit your needs.
Related
I am planning to create a web application based on java, jsp and struts. I have sketched the requirement and how functionality should work and who the target users would be. Even though I am very excited about the application, I am not sure how should I create a good UI design for it.
Shall I go for css as a common way of designing UI's which would be a tedious task to map css to all the elements/tags. Is there any other way of doing it? I am new to this and this would be my first project which I have been planning from very long.
Which technologies should I use in achieving this in regards to design?
Note: Also I want to keep my application light weight rather than using flash content and other sorts
I would recommend using something like Bootstrap: http://getbootstrap.com/
That library will allow you to build some nice user interfaces without having to deal with too much CSS or HTML yourself.
Attempting to roll your own CSS and HTML is just asking for pain. Use a framework like this one and things like cross browser support will be much simpler(pretty much free).
Bootstrap can easily be paired with JSP because you just make the web page output be in bootstrap format. Basically use the CSS classes it defines. For examples:
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
They have similar classes for layout and all kinds of other widgets.
I will go with the approach of Jon. When you are choosing a CSS frame work consider the paltforms ( desktop, tab and mobile ) and choose the right one.
http://webdesignlike.com/2015/best-free-responsive-html5-frameworks/
http://www.cssnewbie.com/best-free-css3-frameworks-2015/#.VVooCfxVhBc
http://devzum.com/2014/11/20/best-html-css-frameworks/
Go through these links, it will give you a better idea.
Im starting a project from scratch in Worklight. Im using Jquery Mobile and I need to know how Im suppose to do the transition between pages. When I drag and drop a new list view, the following code is generated using Hyperlinks:
<ul data-role="listview" id="listview" data-inset="true">
<li data-role="list-divider" id="divider">Divider</li>
<li id="listitem">Item</li>
<li id="listitem0">Item</li>
<li id="listitem1">Item</li>
</ul>
But if I take into consideration the "building multiple page application" guide, I should not use hyperlinks...How should I do this?
As you rightly so mention, Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.
In order to implement multipage navigation, then, you can use either jQuery Mobile's changePage or jQuery's load functions (or the equivalents in other frameworks...), depending how you'd like your application to behave.
jQuery.mobile.changePage()
http://api.jquerymobile.com/jQuery.mobile.changePage/
.load()
http://api.jquery.com/load/
Here are a couple of Worklight 6.1 projects demonstrating page navigation:
JQM_multipage_load_changePage.zip - uses either .load or .changePage
JQM_multipage_changePage_pageshow.zip - uses .changePage and .pageShow
In both approaches you have 1 HTML file (Worklight's index.html) and multiple other HTML files; you take the contents of these HTML files and replace with it a specific subset of the index.html. This way Worklight's index.html remains intact (the references to the framework's JS, etc), but the app contents is changed.
Taking the above to your particular case, you can add an onclick to your href and use jQuery Mobile "to transition" and display the contents of "another" page.
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
I'm using backbone.js with jquery-ui tabs and my browser's back button is working fine. However, I would like to dynamically add and remove tabs and reverse those actions via back button. For example if the following happens:
#tab-1
#tab-2
open tab-3
#tab-3
When I click in the back button, the following should happen:
close tab-3 and go to #tab-2
#tab-1
What is the best solution for this?
Thanks
I had the exact same issue as you a few months back. I originally used jQuery-UI tabs on a project, https://www.implantlink.com/ but as the app grew, the friction between tabs and backbone proved too annoying and limiting. After all the hardship of trying to get jQuery-UI tabs and Backbone to play nice, I can tell you it's just not worth it.
You may be better off abandoning jQuery-UI tabs and sticking entirely with backbone.js if your project is complicated enough. Copy all the necessary CSS & HTML you need to create your own tabs, then setup each tab as a route and callback function to switch out your HTML.
Example Tabs
<ul class="tabs">
<li>Tab 1
<li>Tab 2
<li>Tab 3
</ul>
Example JS
$('#content').html('tab 2 HTML and content stuff');
Info:
I am using JQuery Mobile (in Phonegap) for building pages and navigating via them by $.mobile.changePage() or hash.
This is JQuery Mobile page anatomy:
<div id="foo" data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Problem:
I am looking for XUI.js page anatomy, because there is really poor documentation about this library.
As Phill said, XUI isn't designed for managing DIVs as "pages", but it can be done. Andrew Lunny has built a lightweight page control in his starter application. You can inspect the source on Github and see how he converts the DIVs to pages. It requires a combination of CSS and setting classes on the DIVs in question.
Again; jQueryMobile is designed very specifically to do this all for you. XUI is not.