I know this post has been around a while, but I recently had the exact same requirements and was able to do it as follows...
These can be implemented using a combination of the on click event handler of the FeatureLayer that has the popup associated with it, and some overridding css. Note that I'm also using jQuery and jQuery Mobile. There may be a cleaner way to do this, but this worked for me:
For #2, "override the behavior of the showContent button ( > ), so that it calls my own function", you would add an onclick event handler to your FeatureLayer as follows:
var fl = new FeatureLayer(...);
fl.on("click", function () {
$(".titleButton.arrow").on("click", function(evt) { // this is the selector for the circled arrow div
//evt.preventDefault(); <-- Note that this has no effect, hence the comment
$(".esriMobileInfoView.esriMobilePopupInfoView").css("display", "none"); // hide the default contents of the attribute info div that takes up 100% of the viewport
alert("hi there"); // put your custom code here
});
});
Note that hiding the contents of the default div that contains the feature's attribute info must be done on the onclick event for the feature layer -- adding this to your css will NOT work, even if you use "!important":
.esriMobileInfoView .esriMobilePopupInfoView {
display: none;
}
This has the effect of hiding the default behavior while implementing your new behavior.
For #1, "suppress the display of the feature count", I found that this takes a combination of adding another jQuery selector to the onclick event handler for the feature layer:
$(".titleButton.prev").parent().css("display", "none");
This has the effect of selecting the parent element of the left "previous" arrow in the feature count area, whether it is hidden (in the case of a single element) or not. The parent of the "previous" arrow contains all 3 elements of the feature count area -- the "previous" arrow, the feature count, and the "next" arrow -- so by hiding it (the parent) you effectively hide the entire contents of the feature count div area.
Note that none of these work when put into css (as well as other css parent selectors):
.titleButton .prev > div {
display: none;
}
which is why I put it in the onclick event handler of the FeatureLayer.
For completeness, this is the entire event handler for the FeatureLayer:
fl.on("click", function () {
fl.setInfoTemplate(new PopupTemplate({ ... })); // I'm also setting my InfoTemplate here
$(".titleButton.prev").parent().css("display", "none"); // hide feature count area
$(".titleButton.arrow").on("click", function(evt) {
$(".esriMobileInfoView.esriMobilePopupInfoView").css("display", "none"); // hide default attribute popup
alert("hi there"); // add custom onclick handler code
});
});
Some additional css is also required (this could also have been handled in the event viewer, but I prefer it in the css wherever possible):
.esriPopupMobile .titlePane .title {
margin-top: 9px !important; /* I found that the !important is required here */
}
Note that this will move the title of the Popup down 6 more pixels from the already-set 3 pixel margin. This is necessary since the feature count area is removed and so the title must be re-aligned vertically.
