JQueryMobile offers the capability to group buttons either horizontally:
BtnA | BtnB
or vertically:
BtnA
----
BtnB
via the controlgroup configuration.
Is the following set up, involving both horizontal and vertical placement, possible:
BtnA | BtnB
-----------
BtnC | BtnD
If yes, how? Any alternatives to controlgroup in this case?
Try Using JQM content grid Like this:
<div class="ui-grid-a">
<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>
<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>
</div>
Heres a demo: http://jsfiddle.net/ashanova/kkf9w/
Heres the JQM docs: http://jquerymobile.com/test/docs/content/content-grids.html
Related
So I have a web page where I would like to find button SignUp only if button NameField is present in the div entire class.
<div class="entire class">
<div class = "upper class>
<button class="NameField"></button>
</div>
<div class="lower class">
<button class="SignUp"></button>
</div>
</div>
How would I achieve that? I have tried the following:
$x("//div[#class='entire class']//button[#class='NameField'] and not(descendant::button[#class='SignUp']")
$x("//*[#class='upper class'] | [#class='SignUp']")
$x("//*[#class='SignUp'] | //body)[last()]")
$x("//div[//button[#class='SignUp'] and [//button[#class='NameField']]")
None of them seems to be working.
Try below XPath:
//div[button[#class="NameField"]]/following-sibling::div/button[#class="SignUp"]
//div[#class="entire class" and div[button[#class="NameField"]]]/div/button[#class="SignUp"]
or simplified one:
//button[#class="NameField"]/following::button
I'm using Bootstrap to display a list of people from an SQL server in an accordion (expandable list).
My problem is that there is an increasing amount of whitespace between consecutive entries in the accordion, which I can't get rid of.
Its easiest to see it in action: http://ec2-54-200-151-237.us-west-2.compute.amazonaws.com/#
When the whitespace is clicked the tab above is opened, which is some clue to what is going wrong - however I am quite new to html and javascript.
Here is the javascript that creates the new panel:
function create_panel(first_name, last_name, idx){
var $template = $(".template");
var $newPanel = $template.clone();
$newPanel.find(".collapse").removeClass("in");
$newPanel.find(".accordion-toggle").attr("href", "#" + String(idx))
.text(last_name+" "+first_name);
$newPanel.find(".panel-collapse").attr("id", idx).addClass("collapse").removeClass("in");
return $newPanel;
}
And the html panel group element:
<div class="panel-group" id="accordion1">
<div class="panel panel-default template" style="display:none">
<div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse20" style="width:100%;">
<a class="panel-title">
Mr. Template <span class="label label-danger" style="float:right">Urgent</span>
</a>
</div>
<div id="collapse20" class="panel-collapse collapse">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn"><i class="glyphicon glyphicon-flag"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-earphone"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
</div>
</div>
</div>
If anyone can help me see where the problem is, I'd be extremely grateful.
Thanks in advance
I solved this just after posting.
The fact that the extra whitespace was compounding tipped me off:
The javascript was referring to the last created item .template every time it made a new entry - hence the compounding. I added id=template to the panel element and changed the javascript refererence to #template, and the accordion now looks normal.
I've looked for solutions online and it seems that there's something called the data-attribute that I can use to do what I want.
I have two different modal windows, each with its own content, and I want to link each of them to a specific button (or in my case, an image that the user will click on). I tried putting in the "data-attribute", but the second modal window (the one with the id, fujian), is not popping up when I click on the corresponding image.
Does anyone have any suggests or ideas as to why this isn't working and what I should do?
<!--The two image icons that user clicks on-->
<a href='#' onclick='overlay()'><img src="city1.png" alt="sichuan" class="city1"/></a>
<img src="city2.png" alt="sichuan" class="city2"/>
<div id="overlay">
<!--The two separate modal windows-->
<div class="modal">
<img src="sichuan.png" alt="sichuan popUp"/>
<a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
</div>
</div>
<div id="overlay">
<div class="modal" id="fujian">
<img src="fujian.png" alt="fujian popUp"/>
<a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
</div>
</div>
And here is my overlay() function if you need to see it:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
id's must be unique through out the document and you have repeating id <div id="overlay">
You can achieve with single modal what you are trying to achieve with 2 modals with data-attributes
Missing key div elements in modal HTML and that's why with your code only modal-backdrop is showing, nothing else
as far you asked about data-attribute, the anchor <a></a> element has two custom data attributes: data-toggle and data-target.
The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open.
So whenever <a></a> link like that is clicked, a modal with targeted id will appear.
let's suppose you have 2 images and wants to show in modal, opening modal with default bootstrap behaviour and also can pass the image to modal using data-attributes which in this case data-image and using bootstrap modal event listener, can show the image in modal when modal open (no need of 2 modals)
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="btn btn-primary">Image 1</a>
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" class="btn btn-warning">Image 2</a>
And Modal HTML will be
<div id="fujian" class="modal fade">
<div class="modal-dialog"> //Missing this Div
<div class="modal-content"> //Missing this Div
<div class="modal-body">
<img class="showimage" src="" /> //Image will be shown Here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and bootstrap event listener
$(document).ready(function () { //Dom Ready
$('#fujian').on('show.bs.modal', function (e) { //Event listener
var image = $(e.relatedTarget).data('image'); //Fetch image url from modal trigger <a> link
$(".showimage").attr("src", image); //load image in modal
});
});
Fiddle
The html code goes something like this:
<div ng-if="name=='John'">
<div class="item item-avatar"> <img ng-src="john.jpg"></div>
</div>
<div ng-if="name=='Margaret'"
<div class="item item-avatar"> <img ng-src="margaret.jpg"></div>
</div>
Instead of ng-if, I've tried using ng-show as well. Neither worked. Both John as well as Margaret showed on the page no matter which I used. I tried with ng-switch also.
The variable 'name' I initialized earlier on the same HTML file as:
<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>
Clicking on the above line leads to Page3 where I need to display either John or Margaret depending on the value of 'name'.
Is the syntax wrong or something, because that could be very well possible. I'm new to Ionic and AngularJS.
Try this:
<div ng-show="name=='John'" ng-init="name = 'John'">
<div class="item item-avatar"> John</div>
</div>
<div ng-show="name=='Margaret'"
<div class="item item-avatar"> Margaret</div>
</div>
Works for me. I just change ng-if to ng-show - which will shows div content when true and hide it otherwise. I also use ng-init inside a div.
Are you sure you started Angular? Did you set the ng-app directive?
It would help if you could provide a working example if you have other problems.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="name = 'John'">
<button type="button" ng-click="name='John'">John</button>
<button type="button" ng-click="name='Margaret'">Margaret</button>
<div ng-if="name=='John'">
This is John
</div>
<div ng-if="name=='Margaret'">
This is Margaret
</div>
</div>
I fixed you plunker - now it should be working.
Bug #1: ng-init is for initialization not to set values at runtime -> use ng-click instead
Bug #2: You use the same controller for all pages but for each page a new controller will be initialized, which resets the 'name' property
I implemented a setName function to set the name in the rootscope and to go to page3. In a correct implementation you should pass the name as a $stateparam to the new state/page. But for that please have a look at the ui-router documentation.
$scope.setName = function(name) {
console.log(name);
$rootScope.name = name;
$state.go('Page3');
};
I use the following code, but it seems can not clear the float.
How to clear or close the pull-float or how to correctly use left-float and right-float in Bootstrap v3?
`
text
网站导航
|
人才招聘
|
企业邮箱
|
旗下公司
`
<div class="container">
<div class="pull-left">text</div>
<div class="pull-right">...</div>
<div class="clearfix"></div>
</div>