Telligent Community Mobile uses a set of common HTML markup formats to define UI. These formats can be used for development of new user experiences or as a basis for customizing styling.
[toc]
General
General purpose markup that applies to multiple parent formats.
Anchors
Anchors behave as on web with two enhancements:
- Click handlers are bound to the tap gesture in stead of click.
- Anchors defining the attribute data-messagename raise the defined message with the tapped link as a handler. Works with dynamically-added links as well.
<a href="#" data-messagename="someMessage">Raise a Message</a> <script type="text/javascript"> $.telligent.evolution.messaging.subscribe('someMessage', function(data) { console.log(data.target); }); </script>
User generated content
The user generated content class should wrap any content provided by users (as opposed to markup/content that is part of the system). Basic HTML formatting (lists, headers, etc) and content adjustments (tables, video, etc) is applied only to user-generated content.
<div class="user-generated-content"> Content <div>
User-generated content is often identified in addition to content on the Post format.
Links
Links refers to lists of links for purposes of a set of available actions to take, list of filters, or list of applications. Links are rendered horizontally using the ui-links component.
Actions
Actions should typically show as many links as possible horizontally, and collapse remaining links behind a more link
<div class="ui-links actions" data-minlinks="1" data-maxlinks="100"> <ul> <li><a href="#">Add as Friend</a></li> <li><a href="#">Bookmark</a></li> <li><a href="#">Flag</a></li> <!-- More is shown when links can't fit horizontallly --> <li><a href="#" data-more">More</a></li> <!-- Cancel is shown within a sheet of links displayed when tapping 'more' --> <li><a href="#" data-cancel">Cancel</a></li> </ul> </div>
Applications
An application tray should not collapse behind 'more', and should instead show all, horizontally scrolling.
<div class="ui-links applications" data-minlinks="100"> <ul> <li><a href="#">Test App 1</a></li> <li><a href="#">Test App 2</a></li> <li><a href="#">Test App 3</a></li> <li><a href="#">Test App 4</a></li> <li><a href="#">Test App 5</a></li> <li><a href="#">Test App 6</a></li> </ul> </div>
Filters
Filters should not collapse and should instead horizontally scroll. A currently-selected filter should be identified in order for it to be scrolled into view.
<div class="ui-links filters" data-minlinks="100"> <ul> <li><a href="#">Filter 1</a></li> <li><a href="#">Filter 2</a></li> <!-- selected filter --> <li><a href="#" data-selected>Filter 3</a></li> <li><a href="#">Filter 4</a></li> </ul> </div>
Post
Post details are free-form, but specific portions should be given specific classes
<div class="post"> <div class="avatar"> <!-- resized image html --> </div> <div class="details"> <h2>Post Title</h2> <span class="author"><a href="#">Display Name</a></span> in <span class="location"><a href="#">Group A</a></span> on <span class="date">Date</span> </div> <div class="content"> <!-- content --> </div> <div class="ui-links actions"> <!-- action links --> </div> </div>
Post List
data-targeturl is optional. When providing, tapping the item will highlight the entire row and navigate to the URL.
<div class="post-list"> <div class="post-list-item" data-targeturl=""> <!-- post --> </div> </div>
Banner
Banners are used on group and user homepages.
<div class="banner"> <div class="avatar"> <!-- resized image html 96x96 ZoomAndCrop --> </div> <h1>Name</h1> <div class="description">description</div> <!-- ui-links actions --> <!-- ui-links applications --> </div>
Navigation
Navigation lists are primarily used within the navigation bar.
Navigation headers
<div class="navigation-item header [with-label]"> [Label] </div>
If the header is just a separator, omit with-label and the label.
Navigation Links
<div class="navigation-item [with-avatar"]> <a href="..."> [<span class="avatar"><img /></span>] Label </a> </div>
User Profile
Field lists on the user's profile.
<div class="profile"> <div class="profile-field-list"> <div class="profile-field"> <div class="label">Label</div> <div class="value">Value</div> </div> </div> </div>