Better Breadcrumbs
By Daniel Wood, 4 October 2018
Introduction
Breadcrumb menus are great. They tell the user a lot about where they are within a solutions hierarchy. They also provide a really quick and easy way to navigate up/down that hierarchy if needed. In the FileMaker world, people have been making breadcrumb menus in various forms for a while, the most common implementation is that of a repeating fields, button bars, or in the case of vertical menus, a portal.
And while all of these methods are workable, they tend to have limitations when it comes to 2 aspects - the visual quality of the menu, and the ability to customise and extend the menu. So what do we mean by these? We’ll start off by giving an example of a breadcrumb menu built using a button bar, discuss some of its limitations, and then present our alternative implementation using a tab control object.
Example file time!
Rather than wait til the end to check out the demo, we strongly recommend you download and explore the example file as you read. This will help you follow along with the content of the article and help you to understand what we are talking about.
A typical breadcrumb menu
Here is an example of a standard breadcrumb menu. This is a location based menu, as the items in the menu are locations within the solution the user can navigate to.
The user currently resides at the right-most location in the menu, and as you scan to the left you can work your way back up the navigation hierarchy all the way to home screen. These navigation elements are clickable, so the user is free to traverse back up the hierarchy to any point they wish.
Building this in FileMaker
Many peoples first instinct would be to use a button bar to design and build a breadcrumb menu. It has a number of properties that suit a breadcrumb menu:
- Multiple segments, each could be a step in the hierarchy
- Clickable, as each segment is essentially a button
- You can calculate the text to appear in each segment.
But here’s the problem. Button bars are of a fixed width, and the segments within the button bar are all proportional in width to the overall width of the bar itself. So if you have a 100pt wide button bar, with 10 segments, then each segment will be 10 pts wide. If you extend the width of the bar to 200pts, then each segment grows to 20pts in width. You have no control over the width of each individual segment.
So what does this mean for us in real terms?
Here is a crack at building a breadcrumb menu with a button bar. The issue we have is that each segment has a variable amount of text, yet we can only have a single width per segment. Add to this the fact that typical breadcrumb menus have a divider between each element, and you end up with a pretty average looking menu.
This is what it looks like in layout mode, to further illustrate whats going on.
Now, we have seen people come up with attempts to work around this fixed width segment issue. Some involve creating button bar segments based on calculations, where the text inside each segment is padded with spaces to make it a certain width, while others involve starting off with hundreds of small segments, and programmatically removing certain segments and padding others. The simple fact is these are all complex and a real pain to work with, and you still do not achieve a really beautiful result.
What about a tab control?
What’s that, I hear you ask? A tab control? Surely a tab is the last object you’d think of to build a breadcrumb menu right? Well maybe, but the fact is tab controls are the perfect layout object for building them (short of an actual breadcrumb menu layout object!).
The reason why tab controls are so great for this, is the simple fact that the width of each tab control name is variable in width. This means it doesn’t matter how much or how little text goes into each tab name, they won’t all end up the same width.
This is a tab control, designed to look like a breadcrumb menu. Looks pretty nice doesn’t it. Notice how all of the spacing between the dividers and the items are all consistent. So how is this done?
Here is the same tab control object highlighted in layout mode. The height of the overall object has been reduced such that there is actually no content space, it’s just the height of the tab names themselves. We aren’t going to be using this object for placing other objects in, we are only concerned with the names.
Let’s look at the tab control setup next.
Interesting! What we can see here is that the odd positions in the tab control are given the names of the items in the menu. Whilst the even positions are used for dividers. This is a key concept in our technique for building the menu - odd spaces are for items, even spaces are for separators.
The above setup is kind of useless in an actual solution because it is so hard-coded. Ideally you want the menu to be dynamic, and have elements add/remove as you traverse up/down the navigation hierarchy of your solution, but at this point we’re simply showing you the building blocks for how we structure the object.
We use the “Label width + Margin of” option for tab width, this allows tabs to grow as more text is added, whilst maintaining an even spacing between items and dividers. We are using an ascii character of a right arrow for the divider.
Formatting items
You’ll note that the first three items in the menu are underlined. This is to give visual indication to the user that these are clickable. The right-most element is not underlined, suggesting that is the screen they are current on, and there is no need for them to click that link.
Visual design is achieved through conditional formatting of each individual tab control. In this very basic example, the condition for the first 3 items is simply “true” and we format them to underlined. Again in reality we want to be a bit more dynamic in our conditional formatting, which we’ll cover later.
For a navigation breadcrumb, you may actually wish to simply go with a hard-coded menu such as the one above, and just adjust its display for each layout it appears on, and indeed this may be the easiest implementation. Other implementations may require a more soft-coded dynamic approach.
A simple example
In the example file we start off with a simple wizard example. Here we use a breadcrumb menu to indicate position in a step by step wizard.
This wizard has 5 steps, and the user will work their way through the wizard, and continue to the next section by clicking a button. The menu itself is not clickable, it exists purely as a visual aid to inform the user of their progress in the wizard.
We use the tab control for display of the menu, and we are using a slide-control beneath it for the wizard itself. So, the slide control has 5 panels and each panel is named Wizard_1 through Wizard_5.
The tab control setup is as follows:
Pretty simple stuff. Again odd positions for items, even positions are separators. Because the size of this wizard is known, we only need to add however many tabs are required for each step.
Navigation through the wizard is done by running a script. The script takes as a parameter a direction, be it forward or back. Depending on which direction, it updates the value of a global variable $$WIZARD_POSITION. We use this global variable to help us know which step of the wizard we are on. The script then simply navigates to the next or previous slide panel.
The breadcrumb menu now has to update visually to reflect the users position also. We know the position of the user based on the number in the global variable which will be between 1 and 5. The visual updating is done via conditional formatting, so let's take a look at that:
This is really easy. What we are looking at is the conditional formatting rule for the second position “Your Details”. We’re saying that if the user is at this position, or has gone past this position already, that it should be coloured.
Here the user is on step 4 “Interests”, and so the conditional formatting of items 1 through 4 are evaluated to true, and are coloured bold and green.
For the dividers, they are irrelevant in our example, so we can either always evaluate their conditional formatting to true (and assign them some property, in this case grey colour), or you can leave them without conditional formatting, in which case they will inherit the default formatting of the tab control object.
In this example, you’ll note that the text is black, and the dividers are grey, so we have a difference in formatting of the 2 types of tabs. In the interests of simplicity, we make the default tab text colour black, and we have applied conditional formatting to all dividers, to change them to grey.
Adding action to navigation items
More often than not, you want the user to be allowed to click an item in the navigation menu and run a script accordingly. We can achieve this in tab controls by using the OnPanelSwitch object trigger.
Here is the same wizard, although this time all sections can be navigated to at any point in time.
We start by altering the formatting so that all objects are underlined to begin with, indicating that they can be clicked. The other conditional formatting properties are the same as in the previous example, if the user is on a position, or that position is to the left of where the user currently is, we make it bold and green.
If we apply an OnPanelSwitch trigger to the tab control object, then our script will run regardless of which tab is chosen. An important piece of information we will use in the script is the position of the tab the user has clicked. This can be found by evaluating the first value in the function Get ( TriggerTargetPanel ).
There are 2 possible situations here. Firstly, the user may have clicked a divider. Our script will still run in this instance, so we must handle this situation. Recall all even positions are dividers, so we can check whether the clicked position is even. If it is then we return a FALSE result from the script, and the divider tab is not navigated to.
The only other scenario is the user has clicked on an actual item that they can navigate to. This will be an odd number. We must translate this number into the actual wizard position. We need to do this because of the dividers, they offset the clicked item.
To illustrate this consider clicking on “Immediate Family”. You know that this is the third position in the wizard, but it is actually the 5th position in the tab control. So we need to write a translation between the position chosen and the wizard position. It’s pretty straightforward and simply Ceiling ( $PositionClicked / 2 ). In our example, this would be 5/2 = 2.5, and taking the ceiling of this gives us a wizard position of 3.
Now that we know the wizard position, it’s just a case of setting our location to that value, and going to that sliding panel object, all done !
You can indeed write your own script to cater for any positional click in your menu, regardless of what you are using your menu for.
Abstracting item names into a table
Often times your wizard or menu items will exist in a table as records because you need to customise them, or build different menus for different purposes. In this example we’re going to show that you can still use the breadcrumb menu in this fashion.
Here is a table of records, each for a different section in the breadcrumb menu, and below is the breadcrumb menu. The 2 important bits of information in the table are the name of the item, and its position in the menu.
The beauty of using a tab control really stands out when using an abstracted menu like this. The menu will simply expand to accommodate variable lengths of text. In order for things to work smoothly there are just two things you need to be aware of:
- Make the initial width of the tab object wide enough to cater for a worst case scenario length of menu.
- Add enough tab control objects so that you are sure you have enough menu positions to cater for all the items that may end up in the menu.
Here is the tab control setup of this abstracted menu. Wow things are really getting interesting now! What you see there is a custom function which we have named @BREADCRUMB. It takes 2 parameters. The first is a keyword identifying which records in our wizard setup table to retrieve, and the second is the order number to retrieve. The 5 items in our table are all of type “Abstracted”, and are all numbered 1 through 5.
Here’s the custom function. It’s a simple executeSQL query where we retrieve names of items based on their type and order number, again nothing magical here just standard FileMaker.
The rest of the implementation is no different to our other examples. Conditional formatting for the items, and a script trigger for navigation.
Abstracting the formatting as well as the names
In this last example we show how you can tailor the formatting of individual items in the menu as well as their names. Now you could achieve this with conditional formatting again, but if you want a specific item to have a specific formatting you may wish to abstract this into a table of records to be based on actual items, rather than position in the menu.
This is a very similar example to the one above, with a slight exception that we have an additional field in our table containing an RGB function for the colour we want our item to be.
Here is the tab control setup for this example:
We have added in 9 different tabs here. In fact we add more than required in case more are needed. Because the items are abstracted to a menu, but adding more tabs, we ensure we don’t have to come back and potentially add more in future.
The other interesting thing to notice here is that we no longer are adding dividers into the even positions. It’s all just calls to a custom function called @BREADCRUMB_Formatted. This function is identical in behaviour to the earlier one, but this function does a couple more things
- If the order number passed through is even, it returns the divider character
- If the order number passed through is odd, it obtains the name of that item from corresponding record.
- It also obtains the formatting properties from the record, and applies them to the name, using the Evaluate function.
- It also determines using the wizard position $$WIZARD_POSITION whether to format the item, or whether to not format
So in this case, we are not using conditional formatting to determine whether to format an item or not, it is entirely done within the custom function. The formatting properties we use comes from the record itself.
The end result of this is that because we are only displaying text for items, we have full formatting control over how that looks using the text formatting functions. Here we are using slightly different colours for each item.
Tabs are awesome
The tab control object is just one of those cool objects that just keeps giving. We really love these breadcrumb menus and feel they have a really useful place in solutions. They can also be now made to look really professional and behave just like a breadcrumb menu should as well as being very easy to customise and format.
Example file again!
As with all of our articles we produce we like to provide a detailed example file to go along with it. It’s not enough to just read how something is done, you should be able to see it in action and explore how it works yourself. Please find attached the example file below.
Credits
We'd like to thank Greig Jackson here at Digital Fusion for coming up with this method — nice work!
Something to say? Post a comment...
Comments
usb c hdmi adapter 25/12/2024 1:57am (1 month ago)
This USB-C connector ensures fast, efficient data transfers every
time.
하이오피 25/12/2024 1:18am (1 month ago)
Night Out 하이오피
Kristan 25/12/2024 1:01am (1 month ago)
Dance Party 마사지 (Kristan)
buy tier 2 links 25/12/2024 12:21am (1 month ago)
Howdy just wanted to give you a quick heads up.
The words in your post seem to be running off the screen in Safari.
I'm not sure if this is a format issue or something to do with browser
compatibility but I figured I'd post to let you know.
The style and design look great though! Hope you
get the problem solved soon. Cheers
mostbet-oa.top 24/12/2024 11:49pm (1 month ago)
Пре-релизы - тоже регулярное событие.
но прежде всего - с людей.
в древнего рима все пути вели
в Рим мостбет - причём буквально.
https://mostbetfanx4.xyz/ 24/12/2024 11:36pm (1 month ago)
???? Заведение для раскладки необходимо выбирать по критериям безопасности, к ним относятся те,
mostbet официальный сайт кто является в.
https://mostbet-wav1.top/ 24/12/2024 11:14pm (1 month ago)
Має одну з найбільших колекцій ігрових автоматів серед ліцензійних казино України з
доступним мінімальним депозитом всього від 100.
can you buy doxycycline 24/12/2024 11:11pm (1 month ago)
In 2008, the Minisolder mentioned how he was married for eighteen years
threshold, which corresponds to Robinson's marriage to Yolanda Hill in 1990.
provadent returns 24/12/2024 11:09pm (1 month ago)
Hey there I am so grateful I found your webpage, I really found you by error,
while I was browsing on Digg for something else, Nonetheless I am here now and would just like to say thank you for a remarkable post and a all
round interesting blog (I also love the theme/design), I don't have time to browse it
all at the moment but I have book-marked it and also added your
RSS feeds, so when I have time I will be back to read more,
Please do keep up the awesome work.
Pussy888 download 24/12/2024 10:47pm (1 month ago)
Salutations, associate reader. I must compliment the
author for their insightful and artfully-composed
blog post. The subject was both revealing and introspective, leaving me with a more comprehensive
understanding of the topic at hand.
I would hope to extend an suggestion to connect with the reputable PUSSY888 association. This place offers a universe of amusement and
stimulation, welcoming those who esteem the more discerning things in experience.
I urge you to immerse yourself in the expansive array and captivate yourself in the exhilarating
excursions that beckon you. Your participation would be incredibly desired,
and I await with excitement the possibility to engage with you more intimately within this exalted virtual domain
best stretch mark cream during pregnancy 24/12/2024 10:26pm (1 month ago)
Both of those individuals, Schumer and Pelosi, perceive very acutely what Donald
Trump is, how he is strong politically. And I believe that
the Democratic Party has realized plenty of classes from 2016, after they did underestimate him.
mostbet официальный сайт 24/12/2024 10:23pm (1 month ago)
виртуальные казино Пин Ап на реальные средства дает своим пользователям роскошный выбор захватывающих
игровых автоматов, mostbet.
Tabitha 24/12/2024 10:05pm (1 month ago)
LMCHING, a progressive force in charm e-commerce, is transforming the skin care shopping experience with its
very tailored, data-powered platform.
By expanding its shipping network to 10 major international
markets, such as the USA, United Kingdom, Australia, Canada,
France, Singapore, Switzerland, UAE, Germany, and New Zealand, LMCHING is bringing costs skin care
items to a bigger target market.
LMCHING harnesses the power of feature personalization and clever referrals to assist users
make well-informed skin care selections customized to their specific requirements.
As customized experiences end up being much more in-demand, LMCHING
blazes a trail by offering a system that personalizes the shopping trip based upon private skin types, problems,
and preferences.
Many thanks to the innovative use data and innovation, LMCHING deals individuals individualized
item suggestions, professional guidance, and tailored skin care routines, making sure positive and educated skin care decisions.
Despite if users are looking for services for fine lines, coloring, or acne, LMCHING's smart platform directs them to the
most effective and appropriate products.
LMCHING's curated option consists of 2 of the most trusted and revered skincare brand names
worldwide-- SkinCeuticals and HELENA RUBINSTEIN.
SkinCeuticals, celebrated for its evidence-based formulations, uses effective skin care options that target
aging, discoloration, and ecological damages.
SkinCeuticals supplies clinically shown skin care with its
series of products, moisturizers, and sun blocks created to shield, avoid, and
correct skin problems.
HELENA RUBINSTEIN adds a sense of deluxe and beauty to the collection readily available on LMCHING.
Distinguished for its sophisticated anti-aging services, HELENA RUBINSTEIN has
a proven history of developing superior skincare formulas that
target the skin's most demanding issues.
HELENA RUBINSTEIN combines luxurious appearances and ingenious technologies to create skincare products that boost the skin's
look while raising the self-care routine.
Via the combination of these two distinguished brands,
LMCHING ensures its customers access to the finest in both scientifically-backed and luxury skincare.
With the aid of LMCHING's personalized platform, users can conveniently navigate these world-class offerings, ensuring they choose
the items that are right for them.
LMCHING's platform features progressed tools, including tailored item suggestions and in-depth
active ingredient details, that get rid of the guesswork from skin care purchasing and aid users make smarter, faster choices.
Expanding LMCHING's delivery network is a vital relocate making top-tier skincare extra available to consumers worldwide.
With trustworthy delivery services to markets such as the
United States, UK, Australia, Canada, France,
Singapore, Switzerland, UAE, Germany, and New
Zealand, LMCHING guarantees a smooth buying experience for its
global clients.
Whether it's a hectic specialist in New york city or a skin care fanatic in London, LMCHING's platform makes it easy for consumers to gain access to
premium skin care with quick and effective shipment.
In nations like Australia and New Zealand, where access to international skin care brand names has
commonly been restricted, LMCHING's expansion is a
game-changer.
Making use of data-driven features to personalize recommendations, LMCHING guarantees that individuals in these areas can easily find one of
the most reliable skincare options for their certain needs.
The exact same holds true for customers in markets like Singapore,
Switzerland, and the UAE, where local choices
and environmental aspects affect skin care requirements.
By considering regional ecological factors and choices, LMCHING's intelligent system recommends products that are
both appropriate and effective, using individuals a tailored experience.
Past product choice, LMCHING also uses a straightforward user interface that enables customers to filter and
look for items by numerous classifications, consisting of skin type, ingredients,
and concerns.
Such customization guarantees that consumers can quickly find items customized to their specific needs, eliminating the stress and anxiety
and uncertainty that can include buying skincare.
LMCHING supplies skilled guidance and individualized tips at individuals'
fingertips, encouraging them to construct a skin care regimen that
suits their demands.
The platform also prioritizes openness, using in-depth details
on each item's components, benefits, and user evaluations.
This level of openness allows customers to make well-informed choices, providing a more powerful feeling of control in their skin care trip.
LMCHING pairs its data-driven tools with thorough item
understanding to supply an experience that is both customized and academic.
As LMCHING increases internationally and gives tailored options for diverse skin kinds, it is developing new benchmarks in the beauty
market.
LMCHING's concentrate on customization and accessibility equips worldwide consumers to accomplish glowing, much
healthier skin without unnecessary anxiety
or uncertainty.
With costs brand names like SkinCeuticals and HELENA RUBINSTEIN, LMCHING is altering
the skincare buying trip, supplying individualized experiences to every client.
In recap, LMCHING is pioneering a much more intelligent and personalized skin care
purchasing experience for its consumers.
With data-powered devices and global delivery, LMCHING
makes it possible for clients in areas like the USA, United Kingdom, Australia, Canada, France, Singapore, Switzerland, UAE,
Germany, and New Zealand to make clever skincare choices.
With customized solutions and professional assistance, LMCHING is helping users around the world achieve the very best feasible skin care results easily.
rosso dolce ราคา 24/12/2024 9:45pm (1 month ago)
ใครกำลังมองหาไวน์ดีๆ กันอยู่ แวะมาแนะนำร้านขายไวน์ให้หน่อยสิ อยากลองไวน์ที่มีรสชาติเป็นเอกลักษณ์
ถ้าคุณรู้จักร้านไวน์ดีๆ บอกต่อกันนะ การรู้จักไวน์ที่เหมาะกับตัวเองสำคัญมาก ขอบคุณล่วงหน้าสำหรับทุกคำแนะนำนะคะ
เว็บไซต์นี้มีข้อมูลที่น่าสนใจมาก อยากให้เพิ่มเนื้อหาเกี่ยวกับไวน์มากกว่านี้ อย่าลืมแชร์เว็บนี้ให้เพื่อนที่รักไวน์ด้วยนะคะ
สุดท้ายนี้ขอให้ทุกคนเจอไวน์ที่ชอบนะคะ จะติดตามเว็บนี้ต่อไปเรื่อยๆ ค่ะ ขอบคุณมากค่ะ!
mostbet-4tu8.xyz 24/12/2024 9:33pm (1 month ago)
Некоторые ТОП игорный дом предоставляют бездепозитный
бонус за авторизацию с выводом, чтоб гэмблер мог попробовать все предложения и.
เว็บยูฟ่าฝากถอนไม่มีขั้นต่ำ 24/12/2024 8:51pm (1 month ago)
Choose to bet on <a href="https://ufavvip789.vip/">เว็บยูฟ่าฝากถอนไม่มีขั้นต่ำ</a> 22556 Easy bet with us. We have options for you to bet 24 hours a day, whether it's a small league or a big league, you can choose to bet as you wish.
เว็บยูฟ่าฝากถอนไม่มีขั้นต่ำ 24/12/2024 8:47pm (1 month ago)
Choose to bet on <a href="https://ufavvip789.vip/">เว็บยูฟ่าฝากถอนไม่มีขั้นต่ำ</a> 22556 Easy bet with us. We have options for you to bet 24 hours a day, whether it's a small league or a big league, you can choose to bet as you wish.
แทงบอลออนไลน์ 24/12/2024 8:21pm (1 month ago)
789<a href="https://ufavvip789.vip/">แทงบอลออนไลน์</a> UFA VVIP789 must be the first direct website that you should consider. With unique confidence With the most stable system
ebet slot 24/12/2024 8:14pm (1 month ago)
Remarkable Blog Article
Incredible, what an perceptive and thought-provoking work !
I found myself agreeing as I perused through your analysis of this essential topic
.
Your contentions were thoroughly investigated
and communicated in a concise , persuasive manner. I especially
treasured how you were equipped to refine the central
intricacies and subtleties at operation , excluding
simplifying or disregarding the hurdles.
This article has given me a significant amount to ponder .
You've undoubtedly expanded my knowledge and transformed my perspective
in some profound forms.
Thankfulness for devoting the effort to impart your
mastery on this matter . Articles like this are extremely a valuable
participation to the conversation. I await with excitement experiencing what other thought-provoking data you have
in stock .
ooounistroy.ru 24/12/2024 8:05pm (1 month ago)
Запорно регулирующая арматура отопление предназначена для управления потоками теплоносителя
в системах отопления. Она позволяет регулировать температуру
и поток теплоносителя в трубопроводах.
squareblogs.net 24/12/2024 7:23pm (1 month ago)
The provided material of this blog entry is truly
captivating . I delighted in the way you scrutinized the
diverse issues so comprehensively and unambiguously. You helped me procure fresh perspectives that
I had not contemplated before. I'm thankful for sharing your proficiency and adeptness
- it has equipped me to gain understanding further .
I particularly enjoyed the novel outlooks you introduced , which
broadened my understanding and thinking in meaningful
courses. This blog is systematic and captivating ,
which is paramount for material of this standard .
I anticipate to read more of your work in the days to come , as I'm
confident it will continue to be illuminating and help me continue developing .
Thanks again !
viagra drug interactions 24/12/2024 7:22pm (1 month ago)
Finally, there's concern that some men -- especially younger men who
take Viagra recreationally and who do not really want it for bodily causes --
may find yourself with a dependency on the drug and change into unable to maintain an erection without taking Viagra.
Doctors advise users to take the blue pill on an empty stomach and desist from consuming alcoholic drinks as alcohol
is thought to inhibit the impact of the drug. The best
environment for viagra to take impact is always an hour before partaking in sexual exercise and on an empty stomach.
Men can really minimize the problem of erectile dysfunction without blaming a lot the
character of the issue or his personal inefficiency by merely opting to the very best second of
consuming Generic Viagra or purchase Kamagra, Kamagra
oral jelly, etc. There are various other medicines even for older people corresponding to Kamagra Oral Jelly that helps in providing simple consumption.
provadent pro dentim advanced oral probiotics reviews 24/12/2024 7:18pm (1 month ago)
I'm extremely impressed with your writing skills
and also with the layout on your weblog. Is this
a paid theme or did you modify it yourself? Either way keep up the nice quality writing,
it's rare to see a great blog like this one
today.
محصولات برتر را اینجا ببینید 24/12/2024 7:05pm (1 month ago)
Verгy nice post. I juіst ѕtmbled uplon yiur bⅼog aand wished
tto mentiopn tgat I hae rewally enjoyed browsinbg youг wbloց posts.
Afrer alll I ill bbe subscribing tto yojr rsss feded aand I aam hoрinng youu wrute gain soon!
ufabet-ฝากถอนไม่มีขั้นต่ำ 24/12/2024 6:58pm (1 month ago)
<a href="https://ufavvip789.vip/">ufabet-ฝากถอนไม่มีขั้นต่ำ</a> ฝากถอนได้แบบง่ายๆ โดยการใช้บริการระบบ ufabet เว็บตรงไม่มีขั้นต่ํา นั้นท่านผู้เล่นสามารถใช้ได้เลยแบบง่ายๆ ผ่านหน้าหลัก ทางเข้า UFABET 789 ของเรา พร้อมให้ท่าน ฝากถอนได้เลยแบบอิสระ
« previous 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 next »
No one has commented on this page yet.
RSS feed for comments on this page | RSS feed for all comments