• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

developerforce/Mobile-Design-Templates: Repo for hosting the Mobile Design Templ ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

developerforce/Mobile-Design-Templates

开源软件地址(OpenSource Url):

https://github.com/developerforce/Mobile-Design-Templates

开源编程语言(OpenSource Language):

JavaScript 53.8%

开源软件介绍(OpenSource Introduction):

Mobile Design Templates

Quickly build engaging enterprise mobile apps with these high-impact visual design templates that utilize mobile-optimized HTML5 and CSS3 to give your customers the best user experience. Combine these modular design templates with Salesforce Mobile Services and Developer Mobile Packs to connect to Salesforce Platform and access customer data. View, edit and update customer data, view backend reports, find nearby records, and more using these templates. Take advantage of these customizable, open-source templates and focus on building engaging mobile apps for your customers, employees, and partners.

The Template home page has a detailed walkthrough of the different templates included in this repo. Be sure to also see the Mobile Templates Jumpstarter sample app for an example of building an HTML 5 mobile app using Mobile Design Templates. For additional information, please refer to the Mobile Design Templates FAQ.

Key Features

  • Modular and customizable open-source CSS3 and HTML5 markup that can be modified at will to meet the specific UI/UX requirements of a mobile app.
  • Combine these static templates with a JavaScript library like ForceTk or one of the Mobile Packs for Backbone, Angular or Knockout to provide live data bindings with any Salesforce backend.
  • Cross-platform (iOS, Android etc.) support courtesy of the use of standard web technologies like HTML5, CSS3 and JavaScript.
  • Optimized for the phone form factor.
  • Use-case agnostic. The base HTML5/CSS3 can be modified to work with any Salesforce object (Standard or Custom) in the context of any mobile use case.

Gallery

Check out the Mobile Design Templates Gallery for a quick look at all the templates included in this repo.

#Getting Started

Visualforce

Step 1. git clone https://github.com/developerforce/Mobile-Design-Templates.git or Download it as Zip by clicking on Download ZIP button. If you have downloaded it as a ZIP file, unzip it.

Step 2. You only need files in common/js, common/css and common/images, but for simplicity sake just zip the whole common folder.

Step 3. Upload it as static resource with name Mobile-Design-Templates.

Step 4. Create a new Visualforce page.

Step 5. Reference the JS, CSS & Images in your Visualforce page like below:

   <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1, 
                                  minimum-scale=1, maximum-scale=1, user-scalable=no"/> 
      <apex:stylesheet value="{!URLFOR($Resource.Mobile_Design_Templates, 
                'Mobile-Design-Templates-master/common/css/app.min.css')}"/>
      <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
                'Mobile-Design-Templates-master/common/js/jQuery2.0.2.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
                'Mobile-Design-Templates-master/common/js/jquery.touchwipe.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
                'Mobile-Design-Templates-master/common/js/main.min.js')}"/>
   </head>
   <body>
     <!-- Copy Paste Template HTML's body here -->
   </body>
 

Step 6. The downloaded repo has all the templates arranged in different folders. For example List View folder alone has Standard.html, Tabbed.html, Picture.html etc 6 templates.

Step 7. Open one of those templates and copy-paste the body of the template into your visualforce page.

Step 8. That should show the template in your Visual force page.

Hybrid (Local or Remote)

(You plan to create a hybrid app and store js, css etc locally in the app or run it remotely on Heroku )

Step 1. git clone https://github.com/developerforce/Mobile-Design-Templates.git or Download it as Zip by clicking on Download ZIP button. If you have downloaded it as a ZIP file, unzip it.

Step 2. You only need files in common/js, common/css and common/images.

Step 3. The downloaded repo has all the templates arranged in different folders. For example List View folder alone has Standard.html, Tabbed.html, Picture.html etc 6 templates.

Step 4: Copy the files in Step #2 and one of the templates and refer JS, CSS, Images from the template files.

For More..

Bitdeli Badge




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
polinema-mobile/2019-mobile10发布时间:2022-09-04
下一篇:
KingFelix/emerald: A minimal and mobile-first blog theme for Jekyll发布时间:2022-09-04
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap