How to add Clicked?

How-to Discussions
1

< Panel Width=“50%” Height=“85%” Alignment=“Right” >
< Panel ux:Name=“infoRect” Color="{ReadProperty BackgroundColor}" Opacity=“0” >
< Grid ux:Name=“infoRectContent” Rows=“1*,1*” Padding=“15” Opacity=“0” >
< Translation ux:Name=“infoRectContentTrans” Y=“0.15” RelativeTo=“Size” />
< Each Items="{numbers}">
< Grid Rows=“1*,1*” Height=“60”>
< Text Value="{title}" FontSize=“16” TextColor="#fff" />
< Text Value="{fact}" FontSize=“14” TextColor="#fff" />
< /Grid>
< /Each>
< /Grid>
< /Panel>
< /Panel>

< JavaScript>
module.exports = Observable(
{
id: 0,
name: ‘Ancient Bristlecone Pine Forest’,
country: ‘United States’,
color: ‘#eb8b8b’,
image: “Assets/1.png”,
numbers: [
{ title: ‘Elevation’, fact: ‘3,410 m’ },
{ title: ‘Area’, fact: ‘113 km2’ }
]
},
< /JavaScript>

In This Panel, I want to add Clicked="{pageClicked}" to this line How to do that so i can go to a Particular page .

2

https://fuse-open.github.io/examples/exploring/index.html in this example if i click ancient pine forest it should be navigated to page1 or if i click iceland i want to open page2 using clicked="{pageclicked}"? how can i do that?

3

Please share the complete snippet. You can add HitTestMode=“LocalBoundsAndChildren” to the panel ux properties.

1 Like
4

As far as i understand what you’re trying to do is, you want to have an overview like the one in the example but instead of the animation you want to go to a specific “page”.

As i’m not sure this would work with PageControl, i suggest to use a Panel which you show and hide by using Visibility=“Hidden” or Visibility=“Visible”.

<App>
<JavaScript>
	var Observable     = require("FuseJS/Observable");
	var yourDataObject = Observable(
		{
			id: 0,
			name: 'Ancient Bristlecone Pine Forest',
			country: 'United States',
			color: '#eb8b8b',
			image: "Assets/1.png",
			numbers: [
				{
					title: 'Elevation',
					fact: '3,410 m'
				},
				{
					title: 'Area',
					fact: '113 km2'
				}
			]
		}
	);
	var yourPageObject = Observable();
	var pageVisibility = Observable("Hidden");

	function clickMe(args) {
	    yourPageObject.value = yourDataObject.getAt(args.data.id);
	    pageVisibility.value = "Visible";
	}

	function hideMe() {
		pageVisibility.value = "Hidden";
	}

	module.exports = {
	    yourDataObject:yourDataObject,
	    yourPageObject:yourPageObject,
	    clickMe:clickMe,
	    hideMe:hideMe,
	    pageVisibility:pageVisibility
	};
</JavaScript>

<Panel ux:Class="viewPage" Visibility="{pageVisibility}" Background="0,0,0,1" Color="#FFFFFF" Layer="Overlay">
	<object ux:Property="Input" />
    <JavaScript>
    	var data = this.Input.inner();
    	module.exports = {
    		data:data
    	};
    </JavaScript>
    <StackPanel>
    	<Text Value="Item Page:" />
    	<Each Items="{data}">
    		<Text Value="{name}" />
    		<Text Value="{country}" />
    		<Button Text="Hide me" Clicked="{hideMe}" />
    	</Each>
    </StackPanel>
</Panel>
<viewPage Input="{yourPageObject}" />
<StackPanel>
	<Text Value="Overview:" />
	<Each Items="{yourDataObject}">
	    <Text Value="{name}" Color="#000000" Clicked="{clickMe}" />
	</Each>
</StackPanel>
</App>
1 Like
5

< Text Value="{title}" Clicked="{yogaClicked}" FontSize=“16” TextColor="#fff" />

module.exports = {

yogaClicked: yogaClicked,

};

function yogaClicked() {
// TODO: validate login credentials

router.goto(“Yoga”);
}

So Obviously if i click any title it will navigate to “Yoga” Page. What i want is i wanna navigate each title to different page.

6

I don’t think your approach is going to work out.
Of course you could do

function yogaClicked(args) {
    router.goto(args.data.pageName); // or so
}

but that implies that every page has been set up before. which means you might have a hard time when you try to fetch data from the internet.

1 Like
7

Thanks for Your reply. I want to make same as it shown in this shot.


I m stuck and dont have any idea how to expand image on click. Fusetools already gave an example on this but i want to open image on click.

8

https://fuse-open.github.io/docs/fuse/animations.html

1 Like