i am using the existing jquery UI tabs..
<div id="tabs">
<ul>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
</ul>
<div id="tabs-1">
<p>t1 content</p>
</div>
<div id="tabs-2">
<p>t2 content</p>
</div>
<div id="tabs-3">
<p>t3 content</p>
</div>
</div>
when rendered in the browser, jquery adds some set of classes to the <li> elements. [some part of it given below]
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
</ul>
when I append some <li> elements in <ul> using the following jquery code:
$('#tabs ul').append($('<li>title 4</li>');
The list gets appended but the classes are not added to it, hence do not exhibit the tab functionality.
Please give some insight into it.
You also need to add the div with the tab id:
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Then try a refresh on tabs:
$("div#tabs").tabs("refresh");
WORKING Fiddle
Related
I'm using ui-boostrap dropdown directive, and want to add my own ng-if to prevent showing it on some cases.
When adding this ng-if, even when it always returns "true" - the dropdown stop working (doesn't pop up). It seems the drop-down button stops receiving ng-click events (therefore not changing the isOpen state..).
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<!-- When putting this ng-if, the drop down stops working -->
<div ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="dropdown.html">
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
<li role="menuitem">Action in Template</li>
<li role="menuitem">Another action in Template</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link in Template</li>
</ul>
</script>
</div>
</body>
</html>
JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
console.log('isOpen = ' + $scope.status.isopen);
};
$scope.isAllowed = function() {
return true;
}
});
Here is a plunker reproduce the problem:
http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview
Any ideas?
Take out the div with the ng-if on it and put the ng-if on the enclosing div, i.e.
<div class="btn-group" uib-dropdown is-open="status.isopen" ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
I have a JQuery Mobile popup (an unordered list) embedded in a description list:
<dl data-role="listview" data-inset="true" data-theme="d" id="sortable">
<dt class="ui-bar ui-bar-b ui-corner-all">Group One</dt>
<dd class="ui-bar ui-bar-a ui-corner-all ui-btn-icon-left ui-icon-bars">
<div class="divMain">
<div class="divQuestion">
<textarea name="strQuestion-q1" id="strQuestion-q1" placeholder="Enter Question Number 1" style="margin:0px;"></textarea>
</div>
<div class="divCategory">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
<div id="popupMenu-q1" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">Choose the scoring category</li>
<li><a name="strCategory-o1-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 1</a></li>
<li><a name="strCategory-o2-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 2</a></li>
<li><a name="strCategory-o3-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 3</a></li>
</ul>
</div>
</div>
</div>
</dd>
</dl>
I want the function selectCategory() to get the text of the parent dt (in this case "Group One"). I've tried both of the following with no success:
$('#strCategory-o1-q1').parent().prev('dt').text();
$('#strCategory-o1-q1').closest('dd').prev('dt').text();
Any suggestions?
The problem is that when jQM initializes the popup, it moves it from the current DOM position into a popup container at the top level. So the DD is no longer its ancestor.
One thing you could do is add a click handler to the button that launches the popup and get the text there. Then you could put the text in a global variable or a data-attribute within the popup.
Given this markup:
<a id="btnPopup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
<div id="popupMenu-q1" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">Choose the scoring category</li>
<li><a name="strCategory-o1-q1" href="#">Category 1</a></li>
<li><a name="strCategory-o2-q1" href="#">Category 2</a></li>
<li><a name="strCategory-o3-q1" href="#">Category 3</a></li>
</ul>
</div>
Your script would be along the lines of
var curDDText;
$("#btnPopup").on("click", function(){
curDDText = $(this).closest('dd').prev('dt').text();
});
$("#popupMenu-q1 ul li a").on("click", function(e){
selectCategory(this);
});
function selectCategory(elem){
alert($(elem).prop("name") + " - " + curDDText);
$("#popupMenu-q1").popup( "close" );
}
working DEMO
If you prefer the data-attribute route:
$("#btnPopup").on("click", function(){
var curDDText = $(this).closest('dd').prev('dt').text();
$("#popupMenu-q1 ul").jqmData("dttext", curDDText);
});
function selectCategory(elem){
var curDDText = $(elem).closest("ul").jqmData("dttext");
alert($(elem).prop("name") + " - " + curDDText);
$("#popupMenu-q1").popup( "close" );
}
data-attribute DEMO
I am creating an editor application which requires dynamically appending HTML into the document. I am using JQuery UI tabs to divide the document into sections. I want to be able to dynamically add tabs and then use append() to add content into the tabs.
The page has 3 tabs when it loads and I want to be able to dynamically add more when required.
Currently my code works when appending content into the 3 non-dynamic tabs, and when creating a new tab. For some reason I cannot append any content into a new, dynamically created tab.
Why won't my code work for adding content to a dynamically created tab?
$(function () {
$('#addTab').click(function () {
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '></div>');
$('#tabs').tabs("refresh");
$('#tabs').tabs("option", "active", -1); //makes the new tab active
});
});
//Insert content into the currently selected tab
function insertContent(content) {
var activeTab = $("#tabs").tabs('option', 'active');
activeTab += 1;
console.log(activeTab);
$("#tab-" + activeTab).append(content);
}
HTML after creating a 4th tab:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="false">Section 1</li>
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false">Section 2</li>
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false">Section 3</li>
<li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab4" aria-labelledby="ui-id-7" aria-selected="true">Section 4</li></ul>
<div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><br><p contenteditable="true" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_83" style="position: relative;">Paragraph text</p></div>
<div id="tab-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display:none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor2" title="Rich Text Editor, editor2" aria-describedby="cke_153" style="position: relative;">Paragraph text</p></div>
<div id="tab-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor3" title="Rich Text Editor, editor3" aria-describedby="cke_223" style="position: relative;">Paragraph text</p></div>
</div>
After looking at the HTML generated following are the problems I found with your code:
1) The following line generated li with wrong Id i.e. tab4 instead of tab-4
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
change <a href="#tab' to <a href="#tab-'
2) The following line was missing " in id because of which the div wasn't appended in the tabs
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Once you fix there, you'll see your code is working properly
See working fiddle
I am looking to create this common (on iPhone) list type using jQuery Mobile:
The key feature is the alphabet running down the right side that will scroll to the closest matching item.
Does something like this already exist or do I need to roll my own? I was unable to find it in the demos, although List dividers gets me part way there.
Well it's a work in progress, but I think it can be done. example:
http://jsfiddle.net/qXT9Z/32/
CSS
#list-navigation {
color:#696969;
position:absolute;
right:0px;
top:0px;
z-index:200;
}
JS
$('.scrollToSelected').bind('click', function() {
var view = $(this).attr('id');
var list = view.split('-');
var elem = $("#"+list[1]);
// not sure if this is offset or position
var position = elem.position();
var offset = elem.offset();
//alert('left: '+position.left + ", top: " + position.top);
//alert('left: '+offset.left + ", top: " + offset.top);
$.mobile.silentScroll(position.top);
//$.mobile.silentScroll(offset.top);
});
$('.showDetails').bind('click', function() {
$.mobile.changePage( "#details", { transition: "slideup"} );
});
HTML
<div data-role="page" id="list">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider" id="a">A</li>
<li class="showDetails">
Adam Kinkaid
</li>
<li class="showDetails">Alex Wickerham</li>
<li class="showDetails">Avery Johnson</li>
<li data-role="list-divider" id="b">B</li>
<li class="showDetails">Bob Cabot</li>
<li data-role="list-divider" id="c">C</li>
<li class="showDetails">Caleb Booth</li>
<li class="showDetails">Christopher Adams</li>
<li class="showDetails">Culver James</li>
<li data-role="list-divider" id="d">D</li>
<li class="showDetails">David Walsh</li>
<li class="showDetails">Drake Alfred</li>
<li data-role="list-divider" id="e">E</li>
<li class="showDetails">Elizabeth Bacon</li>
<li class="showDetails">Emery Parker</li>
<li class="showDetails">Enid Voldon</li>
<li data-role="list-divider" id="f">F</li>
<li class="showDetails">Francis Wall</li>
<li data-role="list-divider" id="g">G</li>
<li class="showDetails">Graham Smith</li>
<li class="showDetails">Greta Peete</li>
<li data-role="list-divider" id="h">H</li>
<li class="showDetails">Harvey Walls</li>
<li data-role="list-divider" id="m">M</li>
<li class="showDetails">Mike Farnsworth</li>
<li class="showDetails">Murray Vanderbuilt</li>
<li data-role="list-divider" id="n">N</li>
<li class="showDetails">Nathan Williams</li>
<li data-role="list-divider" id="p">P</li>
<li class="showDetails">Paul Baker</li>
<li class="showDetails">Pete Mason</li>
<li data-role="list-divider" id="r">R</li>
<li class="showDetails">Rod Tarker</li>
<li data-role="list-divider" id="s">S</li>
<li class="showDetails">Sawyer Wakefield</li>
</ul>
<ul data-role="none" id="list-navigation">
<li>
<p id="list-1" class="scrollToSelected"><strong>1</strong></p>
<p id="list-2" class="scrollToSelected"><strong>2</strong></p>
<p id="list-3" class="scrollToSelected"><strong>3</strong></p>
<p id="list-a" class="scrollToSelected"><strong>A</strong></p>
<p id="list-b" class="scrollToSelected"><strong>B</strong></p>
<p id="list-c" class="scrollToSelected"><strong>C</strong></p>
<p id="list-d" class="scrollToSelected"><strong>D</strong></p>
<p id="list-e" class="scrollToSelected"><strong>E</strong></p>
<p id="list-f" class="scrollToSelected"><strong>F</strong></p>
<p id="list-g" class="scrollToSelected"><strong>G</strong></p>
<p id="list-h" class="scrollToSelected"><strong>H</strong></p>
<p id="list-i" class="scrollToSelected"><strong>I</strong></p>
<p id="list-j" class="scrollToSelected"><strong>J</strong></p>
<p id="list-k" class="scrollToSelected"><strong>K</strong></p>
<p id="list-l" class="scrollToSelected"><strong>L</strong></p>
<p id="list-m" class="scrollToSelected"><strong>M</strong></p>
<p id="list-n" class="scrollToSelected"><strong>N</strong></p>
<p id="list-o" class="scrollToSelected"><strong>O</strong></p>
<p id="list-p" class="scrollToSelected"><strong>P</strong></p>
<p id="list-q" class="scrollToSelected"><strong>Q</strong></p>
<p id="list-r" class="scrollToSelected"><strong>R</strong></p>
<p id="list-s" class="scrollToSelected"><strong>S</strong></p>
<p id="list-t" class="scrollToSelected"><strong>T</strong></p>
<p id="list-u" class="scrollToSelected"><strong>U</strong></p>
<p id="list-v" class="scrollToSelected"><strong>V</strong></p>
<p id="list-w" class="scrollToSelected"><strong>W</strong></p>
<p id="list-x" class="scrollToSelected"><strong>X</strong></p>
<p id="list-y" class="scrollToSelected"><strong>Y</strong></p>
<p id="list-z" class="scrollToSelected"><strong>Z</strong></p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="details">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Details</li>
<li>List</li>
</ul>
<br />
<p>
Here are the details you were looking for
</p>
</div>
</div>
I have:
<div class="ui-widget">
<div class="ui-widget-header">
<span class="ui-icon ui-icon-circle-triangle-n">My Menu</span>
</div>
<ul class="ui-widget-content">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
My jQuery is:
$('.ui-widget-header').click(function() {
$('.ui-widget-header+ul').toggle('slow');
});
Q: How do I toggle classes between ui-icon-circle-triangle-n and ui-icon-circle-triangle-s as the user clicks on .ui-widget-header?
Simplest way to do it would be to use .toggleClass()
$('.ui-widget-header').click(function() {
$('.ui-widget-header+ul').toggle('slow');
$('.ui-icon', this).toggleClass('ui-icon-circle-triangle-n ui-icon-circle-triangle-s');
});