is it possible to place a button in TabContainer header on the left side ?
I want to place it next to First Tab.
Thanks for help :)
You are going to have to create your own tab controller widget. The steps would be as follows:
Create MyTabController that extends dijit.layout.TabController
Create a template for MyTabController that has a place for the button
Update MyTabController javascript to create the button
You can use your new controller widget in one of two ways. If it were me, I'd also create my own tab container widget that extends dijit.layout.TabContainer and overrides the _makeController function to instantiate the new controller.
Alternatively, you could pass in the _makeController function when instantiating the TabContianer widget
var tc = new dijit.layout.TabContainer({
_makeController: function(srcNode) {
...
}
}, node);
You can look at the dijit.layout.TabContainer source to see what needs to be done in the _makeController function.
Related
First of all a disclaimer, I'm not a dev. I'm halfway through The Odin Project and have covered some HTML and CSS, but, have not yet started on JS. In order to help with my learning I've created my own blog. My aim is for each blog post to have its own stylesheet (so with each new post I learn a little more about CSS).
Anyway, I plan to write a post about the benefits of using an eReader, specifically the Kindle. I've styled the page to look like a Kindle Oasis, and I'd like the reader to be able to step through the article contents via the Kindle's next/prev buttons, but, as I'm not a dev, this is where I'm stuck. Via Stack overflow I've managed to add some JS that will display page 1, 2 and 3 via dedicated buttons for each dive element, but, what I really need is to step through x number of pages via the prev/next buttons.
Here's what I have so far: https://codepen.io/dbssticky/pen/yLVoORO. Any help would be much appreciated. What I should do of course is finish The Odin Project and come up with a solution on my own, but, I'd really like to get this Kindle article published sooner rather than later. Hence my rather cheeky request for assistance.
Here's the JS I'm currently using:
function swapContent(id) {
const main = document.getElementById("main_place");
const div = document.getElementById(id);
const clone = div.cloneNode(true);
while (main.firstChild) main.firstChild.remove();
main.appendChild(clone);
}
You have the right idea and it just needs a few adjustments to get the previous/next functionality.
Currently your div IDs are following the format operation1, operation2, and so on. Since you want the previous/next functionality you'll need to change your 'swapping' function, which currently takes the full ID, to use the numeric portion only.
Add a new function which appends the number to 'operation' instead of using the whole thing:
function goToPage(pageNumber){
const main = document.getElementById("main_place");
const div = document.getElementById("operation" + pageNumber);
const clone = div.cloneNode(true);
while (main.firstChild) main.firstChild.remove();
main.appendChild(clone);
}
And then change your Page 1/2/3 buttons to use goToPage(1), goToPage(2) and so on.
Now for the previous/next functionality you'll need a way to track which page you're on, so that you can figure out which page to load.
Add a variable at the top (outside functions)
var currentPage = 0;
Then add a line in your goToPage function to track the page you're on.
currentPage = pageNumber;
Now that you're tracking you can add a previous and next function.
function goNextPage(){
goToPage(currentPage-1);
}
function goPreviousPage(){
goToPage(currentPage+1);
}
Then call it from the previous and next buttons.
<button onClick="goNextPage()" class="next-button"></button>
<button onClick="goPreviousPage()" class="previous-button"></button>
Here's a codepen: https://codepen.io/srirachapen/pen/WNZOXQZ
It's barebones and you may have to handle things like non existent div IDs.
HTML
<button class="next-button" onclick="nextContent()"></button>
<button class="previous-button" onclick="prevContent()"></button>
JS
var pageid = 0;
var maxpage = 3;
function nextContent() {
if(pageid == maxpage) return
pageid++
swapContent(`operation${pageid}`)
}
function prevContent() {
if(pageid == 1) return
pageid--
swapContent(`operation${pageid}`)
}
you can try this to switch between pages. But you may need to edit the "swapContent" method more sensibly.
Track the Current Page
Whatever solution you use to render pages & links (manual hardcoded links & content vs externally-stored & auto-generated), one thing is unavoidable: You need to track the current page!
var currentPage = 0
Then, any time there's a page change event, you update that variable.
With the current page being tracked, you can now perform operations relative to it (e.g. +1 or -1)
I'd suggest making a goToPage(page) function that does high-level paging logic, and keep your swapContent() function specifically for the literal act of swapping div content. In the future, you may find you'd want to use swapContent() for non-page content, like showing a "Welcome" or "Help" screen.
Example:
function goToPage(page) {
// Update `currentPage`
currentPage = page
// ... other logic, like a tracking event or anything else you want you occur when pages change
// Do the actual content swap, which could be your existing swapContent()
swapContent('operation'+page)
}
You'd invoke the function like so:
goToPage(3) // Jump to a specific page
goToPage(currentPage + 1) // Go to the next page
goToPage(currentPage - 1) // Go to the prev page
You can make separate helper functions like "goToNextPage()" if you desire, but for sure you start with a fundamental page-change function first.
I have 3 tiles on a screen and on click of each of them, I am showing a pop up. Each tiles have their own pop up's inner content (not static content, also needs many functions) but pop up's header and footer sections are same. So, I have created a generic pop up with header and footer and sending the inner template according to individual tile's click. Onclick of a tile, I will get the tile's id and for inner template I have created the templates. So in generic ui pop up's controller, I am creating a variable for each pop up and checking that in generic popup and showing the correct inner template according to those variables. My problem is I don't want to create separate variable for each tile. Also in future, for each tile added, a variable needs to be added which is not good I feel. This solution is working without any error but I want to make it efficient somehow and need some help with the same. Please find the code below.
P.S: please forgive there are any typos in the code.
Folder structure:
- tilepopup
- ui
-genericpopup
- templates
- tileonetemplate
- tiletwotemplate
genericpopup.html
<div>
<tile-one-template show-content="genericpop.tile1"></tile-one-template>
<tile-two-template show-content="genericpop.tile1"></tile-two-template>
</div>
Template HTML for tileonetemplate.html
<div ng-show="showContent">
Some content
</div>
genericpopup.controller.js
class Genericpopup {
constructor() {
this.tile1 = false;
this.tile2 = false;
}
$onInit() {
this.setActiveTile();
}
setActiveTile() {
this.activeTile = this.stateObject.tileName; //on click of tile,
//I will get the tile name
switch(this.activeTile) {
case 'Tile 1':
this.tile1 = true;
break;
case 'Tile 2':
this.tile2 = true;
break;
}
}
}
Consider using the ng-include directive:
<div ng-include="'tilepopup/templates/'+ $ctrl.stateObject.name +'.html'">
</div>
For more information, see
AngularJS ng-include Directive API Reference
I'm new in JS. I have a small front-end task and I don't know how to solve it after few hours of googling.
I need to override this function in PrimeNG MultiSelect component: MultiSelect.prototype.updateLabel.
In project, I'm working on the label should be static, but alt text (when hovering) should be dynamic as in original realization.
It would be great if you point me to the right direction. I have found this page, but it didn't help me because I don't know how to implement it correctly.
Thanks in advance for any help.
I had to do the same thing in my project.
Here's what I did to get it to work:
In your component's .html file add something like:
<p-multiSelect #multiselect
[options]="someOptions"
[(ngModel)]="someModel.options"
[defaultLabel]="Did this work?"
(onChange)="onChange($event)"
>
</p-multiSelect>
Below the constructor in your component file, add:
#ViewChild('multiselect') multi: MultiSelect;
I put mine in a setter that is always called, but wherever you need to change the label - perhaps in a subscribe function - you can override using:
this.multi.updateLabel = function () {
var label = this.value.length.toString() + " Data Points Selected";
this.valuesAsString = label;
}
Hope that helps!
I am adding elements dynamically using java script(Adding textboxes when we click add).Each of this textbox would be an element of a bList in my domain class.
See Below
Code:
Class A
{
Approach1
List<B> bList= LazyList.decorate(
new ArrayList<B>(), new InstantiateFactory(
B.class));
Approach2
List<B> bList= new AutoPopulatingList(B.class)
}
So basically i am trying to add elements to bList.
I know that i need to use autopopulatinglist or lazy list.But neither of these work.When i try to post the form it complains telling that collection has 0 elements and the index is invalid.
Is the above declaration enuf to ensure that i have the list ready to add elements.
Also when i read about using autopopulating list.Ref: http://blog.richardadamdean.com/?p=12
It says that we have to change the formBackingObject method in the controller to instantiate a new AutoPopulatingList:
Code:
ShoppingBasketForm sbf = new ShoppingBasketForm();
sbf.setItems(new AutoPopulatingList(ShoppingBasketItem.class));
But i am using spring webflow not spring MVC, So where exactly i put this logic.
Even if i try to access <form:input path="bList[0]" /> it would complain
Please advice.
https://jira.springsource.org/browse/SWF-990 <-- look at this issue.
I need a tree menu. But instead of a listview where you expand/collapse i need a dropdown box with the list and when you click on a element i need the box to update (with the first entry being 'Back') so the menu stays in a neat little dialog.
Does this menu have a name? Does anyone know where i can get code to do this?
I can think of several jQuery plugins which would soot your purposes. However, I would recommend jQuery iPod Style Drilldown Menu (Newer Version), which is exactly what it sounds like. The dropdown box updates in place, uses a cool sideways slide animation, and includes a "Back" button (as you desired). Finally, if you don't want any animation, you can try tweaking the plugin's many options. Setting crossSpeed to 0 may work, for example.
Adam is right, jQuery offers an assortment of menu's which you could use. Really though, this is a somewhat trivial problem, the code to write it would take up about 1/10th the space that jQuery's code will. So if possible I would say write it without jQuery.
The most effective method would be to do it JS OOP (Javascript Object-Oriented), but understandably this is a confusing topic.
Basically you just want something like:
function drillDown(){
//Any code that multiple drilldowns
// might need on the same page goes here
//Every instance of a drillDown will
// instantiate a new set of all functions/variables
// which are contained here
//A reference to the parent node the dropdown is placed in
this.parent;
//A reference to the div the dropdown is incased in
this.object;
//Returns a reference to this object so it can be
// stored/referenced from a variable in it's
// superclass
return this;
}
//Prototype Functions
//prototypes are shared by all
// instances so as to not double up code
//this function will build the dropdown
drillDown.prototype.build = function(parent){
//Too lazy to write all this, but build a div and your select box
// Add the select box to the div,
// Add the div to the parent (which is in your document somewhere)
var divEle = document.createElement('div');
var inputBox = document.createElement('input');
//code code code
divEle.appendChild(inputBox);
parent.appendChild(divEle);
}
//this function loads the newest dataset of
drillDown.prototype.loadNewDataSet = function(data){
//first clear out the old list
// remember we have a reference to both the
// 'object' and 'parent' by using
// this.object and this.parent
//load the data, we are going to use the text from
// the select boxes to load each new dataset, woo eval();
// If you didn't know, eval() turns a string into JS code,
// in this case referencing an array somewhere
var dataSet = eval(data);
//then loop through your list adding each new item
for(item in dataSet){
//add item to the list
//change the .onClick() of each one to load the next data set
// a la ->
selectItem.onClick = function(){this.loadNewDataSet(item);};
//if you name your datasets intelligently,
// say a bunch of arrays named for their respective selectors,
// this is mad easy
}
}
//Then you can just build it
var drillDownBox = new drillDown();
drillDownBox.build(document.getElementsByTagName('body')[0]);
drillDownBox.loadNewDataSet("start");
//assuming your first dataset array is named "start",
// it should just go
And by the way, Adam also said it, but wasn't explicit, this is refered to as a drill-down.