I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
Related
How to select a tab by id in recent versions of jQuery UI? I used to do this:
$(mytabs).tabs("select", "#tab_contents");
And it worked fine, even with some of the tabs hidden. Now I upgraded jQuery UI and the code above does not work anymore. I tried following some other suggestions on this site, and ended up with this:
$(mytabs).tabs("option", "active", $(mytabs).find("li").index("#tab_header"));
Not only it's way more verbose, but it doesn't select the correct tab, since some of them are hidden. How can it be done?
P.S. To hide some tabs, I used $("#tab_header").hide(). Is this still correct in recent versions, or is there a better way?
Found out a solution:
$(mytabs).tabs("option", "active", $("#tab_header").index());
This selects the correct tab, regardless of which ones are visible (it's even possible to select tabs currently invisible - the contents are shown, but the header is not).
<div id="tabs">
<ul>
<li id="ha">A</li>
<li id="hb">B</li>
<li id="hc">C</li>
<li id="hd">D</li>
<li id="he">E</li>
</ul>
<div id="a">AAA</div>
<div id="b">BBB</div>
<div id="c">CCC</div>
<div id="d">DDD</div>
<div id="e">EEE</div>
</div>
.index starts from 0,
$(mytabs).tabs("option", "active", $("#ha").index());
but if you use #a instead of #ha use like this
$(mytabs).tabs("option", "active", $("#a").index()-1);
I'm using the jquery Mobile AutoDivider for a web project of mine and it works great in IE8, but for some reason in Chrome it's not generating the headers for me.
My question is: How exactly does the AutoDivider determine what to make a 'divider'? Is is just the first item within your <li></li>?
Here's my basic HTML structure (it's ultimately placed in a ASP.Net Repeater:
<ul data-role="listview" data-autodividers="true">
<li>
<img src="mySource.jpg" alt="" />
<h3>John Doe</h3>
<p><strong>Company Name Here</strong></p>
<p>User Address</p>
<p class="ui-li-aside">
<strong style="display: none;"><!-- This is what seems to make the headers in IE, placing this right here: -->
Last Name of Employee</strong>
</p>
</li>
</ul>
see the docu http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html
Autodividers
A listview can be configured to automatically generate dividers for its items. This is
done by adding a data-autodividers="true" attribute to any listview.
By default, the text used to create dividers is the uppercased first letter of the
item's text. Alternatively you can specify divider text by setting the > autodividersSelector option on the listview programmatically.
I have three level data in my page and on the first level I need to display multiline data.
When I have only one level the multiline works perfect. so the following code works well.
<ul data-role="listview"
data-theme="a" data-inset="true" data-dividertheme="c" data-counttheme="e">
<li>
<h3>Paris (CDG) to Munich (MUC)</h3>
<h4>150 EUR</h4>
<p>12:50 to 14:15 (1h25) Direct</p>
</li>
<li>
<h3>Paris (CDG) to Munich (MUC)</h3>
<h4>175 EUR</h4>
<p>15:00 to 16:15 (1h15) Direct</p>
</li>
<li>
<h3>Paris (CDG) to Munich (MUC)</h3>
<h4>225 EUR</h4>
<p>16:00 to 20:00 (4h) wait 2h Frankfurt, Germany</p>
</li>
</ul>
And show perfect result.
But when I add few UL to show nested stuff the things started breaking.
I put following lines.
<ul data-role="listview" data-theme="a" data-inset="true" data-dividertheme="c" data-counttheme="e">
<li>
<h3>Paris (CDG) to Munich (MUC)</h3>
<h4>150 EUR</h4>
<p>12:50 to 14:15 (1h25) Direct</p>
<ul>
<li>View</li>
<li>Submit</li>
<li>Reset</li>
</ul>
</li>
</UL>
And it starts breaking. And give result like following.
Any help would be appreciated.
Try below link and check whether you are using proper syntax or not, it may be possible you are not using code pattern which is present in jquery mobile or Jquery mobile understandable code.
Link: http://jquerymobile.com/test/docs/lists/docs-lists.html#/test/docs/lists/lists-nested.html
It looks like nesting <ul> tags in a jQM list view as a direct child does not work. It looks like something in the jQuery Mobile framework removes those from list views.
You can, however, wrap your child <ul> tags with a <div>, that works and can still be styled to your liking.
Example: http://jsfiddle.net/shanabus/MVt2B/
I am created a demo of autocomplete using http://jqueryui.com/demos/autocomplete/
plugin.
Now the suggested list which appears on pressing key is
<ul>
<li>
Suggestion
</li>
</ul>
I have to edit the list like :
<ul>
<li>
<a>Suggestion</a>
<br />
<a>data1</a><a>data2</a>
</li>
</ul>
how can I do this? I seen script for autocomplete but not found any hint.
You can configure the autocomplete with the formatItem, and the parse properties of the configuration object.
This question has been answered here:
JQuery AutoComplete results format?
Looks like you want to add some HTML to the result. If that is correct, the jquery ui docs point to a resource (at the bottom of the docs page):
The label is always treated as text, if you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.
Or, you can add custom data using the open event of the autocomplete. See example here:
http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/
I don't know what this is called hence having a hard time finding any reference on the net for this. On hotmail when you enter an email it boxes the email into a rectange block one by one on the same line with options to edit and delete the email. What is this and are there any sample code/frameworks to implement something similar?
Thanks.
It's normally a UL, and inside it you have LI which are either elements styled to have a box around them (emails, in your case), or a borderless INPUT box which blends into the surrounding UL of the same background. JavaScript code handles deletion and insertion of box LIs according to keyboard input. I am not aware of framework support for it, but it may exist.
EDIT: It exists. http://plugins.jquery.com/plugin-tags/tags for jQuery options.
I was looking for the same thing, and upon looking at the source code for it. It seems that they are using a UL like Amadan said, but its set up like this:
<div id="container">
<ul id="email_list">
<li class="email_token valid" id="a#a.com" email="a#a.com">
<p>a#a.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_token valid" id="b#b.com" email="b#b.com">
<p>b#b.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_input_container">
<textarea class="email_input_field"></textarea>
</li>
</ul>
</div>
EDIT: I ended up implementing it and it runs wonderfully!
Try to use Firefox+Firebug to inspect the elements in hotmail. It'll help you to find out yourself.