解压缩模板包

解压缩模板包后，你会发现3个文件夹:documentation", "screenshots" and "site". 你还可以看到一个名为“sources_############.zip“你需要解压缩.

源包包含模板的所有源文件. 该包受密码保护，只能使用 WinZip (Windows OS) and StuffitExpander (MAC OS) software.

您可以使用免费试用选项免费下载这两个应用程序:

• WinZip
• StuffitExpander

在解压缩sources_############.Zip”文件，系统会提示您输入密码, 您可以在您的产品下载页面找到(打开您从我们公司收到的电子邮件中的链接).

一旦你完成解压缩模板，你应该有4个文件夹:documentation", "screenshots", "site" and "sources".

General Information

本指南展示了管理框架的细节、它的功能和原则. 它解释了FullJS v.3模板架构，并描述创建内容页面的原则以及脚本初始化的细节. 该框架旨在创建可以精细调整和快速编辑的动画模板. FullJS框架的通用性与之前的框架不同, 允许创建多种模板.

The FullJS v.框架具有自动创建移动布局的内置能力. 模板是响应性的，可以为小分辨率或窄屏幕改变其布局. 该框架有一组可定制的选项和模块:

Framework Components

该框架包括以下库和技术:

1. jQuery JavaScript库是否专注于JavaScript与HTML的交互. jQuery库使您可以轻松访问任何DOM元素, 允许对属性和DOM元素内容进行操作. 它还为使用AJAX提供了方便的API.
   jquery.com
2. Twitter Bootstrap v.3.x.x 是一套用于创建响应式网站和web应用程序的免费工具吗. 它包括用于排版的HTML和CSS样式模板, web forms, buttons, marks, 导航块和其他web界面组件, 包括JavaScript扩展.
   getbootstrap.com
3. Ajax 是一种构建交互式用户界面和web应用程序的方法吗, 其中包括与web服务器的“后台”数据交换. As a result, 更新数据时，页面不会完全重新加载, 使web应用程序更快，更方便地使用.
4. HTML5 History API 是一个处理浏览器地址栏历史记录的库吗.
   http://github.com/browserstate/history.js/
5. Font Awesome 是矢量字体与众多的图标，这是很容易修改简单的CSS. 字体是视网膜支持的.
   http://fortawesome.github.io/Font-Awesome/
6. LESS 是一种动态样式语言，它提供了以下CSS扩展, nested blocks, mixins, 运算符和函数.
   http://lesscss.org/

Framework Features

该框架具有以下特点:

• 模块核心结构框架的核心由可激活的模块组成, 扩展或更改核心功能.
• 强调CSS3动画和创意: FullJS v.3模板应该取代Flash, 所以动画是这些模板的独特之处. 它是用CSS3而不是脚本执行的. 脚本动画已经成为一种标准，然而，它比CSS3动画慢.
• using Bootstrap:使用Bootstrap作为网站框架，使代码更加清晰、标准化和通用.
• responsiveness:在科技飞速发展的时代，没有响应的网站不再被认为是功能齐全的. 响应性正在成为一种标准. 这就是为什么这个框架是响应式的.
• mobile layout:为满足移动设备有限的资源，开发了移动版. 它由开发人员自动创建和配置. 这节省了移动资源，使网站兼容更广泛的设备.
• 灵活的站点到设备配置系统:在这种类型的网站, 有一种机制允许管理元素规则, 它们的显示和行为通过CSS或JavaScript.
• 用Ajax加载页面:无需重新加载整个站点, 让您加载单独的页面, 节省时间和资源.
• History API使用此库消除了现代浏览器url中的哈希符号(#), 所以页面有一个固定的地址(然而), Internet Explorer 8, 9 still uses hash #). 该库还通过启用后退和前进浏览器按钮增加了功能。.
• 定期更新插件清单插件库一直在增长，添加了新的库和功能.
• site search:网站有内置的搜索功能, 让您轻松找到正确的页面与一个单词或短语.
• 保留了FullJS的所有积极特性:消除了以前FullJS版本中不必要的选项, 但最好的和最有用的功能被保留在产品中.

文件和文件夹体系结构

基本文件和文件夹的文件结构如下所示:

• ajax -通过Ajax加载页面的文件夹*.html, *.php
  • .htaccess - Ajax文件夹的web服务器配置文件(检查 .Htaccess在根目录下)
  • 404.html 当浏览器产生404错误时显示的页面(请求的页面没有找到). 这通常是一个用Ajax加载的单独页面，但也可以位于索引中.html file
  • search.php -负责网站页面搜索的文件
• assets -一个文件夹包含一组各种有用的例子，脚本和样式从Twitter引导
• css -包含层叠样式表文件的文件夹
  • bootstrap.css - Twitter Bootstrap v3的基本样式.x.x framework
  • style.css -包含网站样式的主文件
• fonts -一个文件夹与一组字体Awesome图标字体
• img -一个文件夹与网站图像
• js -网站脚本的文件夹
  • jquery.js jQuery框架
  • history.js 一个管理HTML5历史API的库
  • device.js -一个库，用于确定用于查看站点的设备的类型和操作系统
  • core.js - FullJS的核心文件.3 framework
  • bootstrap.min.js -推特引导v.3.x.x framework
  • jquery.cookie.js -一个jQuery插件与浏览器cookie工作
  • jquery.mousewheel.min.js -一个插件，跟踪鼠标滚轮事件
  • script.js -包含模板基本脚本的主文件
• less -一组less文件
• index.html -包含基本HTML树的文件
• .htaccess - Apache web服务器以及其他类似web服务器的附加配置文件. 它允许在单独的目录(文件夹)中为web服务器的工作设置广泛的附加选项和权限。. 例如，它提供了对目录的可管理访问、文件类型的重新分配等. 无需更改主配置文件

上面描述的架构是典型的FullJS v.3 templates. However, as a rule, 模板中补充了脚本, stylesheets, additional pages, images, etc. 但默认情况下，必须保留此文件夹结构.

Editing template

Preparation

进入站点的根文件夹. 每个编辑过的文件都位于具有匹配类型的文件夹中. 模板编辑是通过修改来完成的 *.html, *.php, *.css (or *.less) and *.js files. 能够编辑文件, 你需要对这些语言有一些了解:HTML, CSS (or LESS), PHP, JavaScript. 您还需要使用编辑器. Notepad (适用于Windows)是一种最简单的编辑器，可以打开上述所有文件类型. 但是，它不方便编辑，所以你最好使用以下编辑器之一:

• SublimeText http://www.sublimetext.com/
• Dreamweaver http://creative.adobe.com/products/dreamweaver
• Notepad++ http://notepad-plus-plus.org/

要在电脑上本地浏览网站，你需要一个本地服务器，例如， Wamp (http://www.wampserver.com/en/). 没有它，AJAX查询和php文件将无法工作. 但是如果你用的是最新版本的 Mozilla Firefox，即使不使用本地托管服务器，您的网站也可能功能齐全(http://www.mozilla.org/en-US/firefox/new/).

请查看下面关于如何配置本地开发环境的教程:

• 如何安装AppServ web开发环境
• 如何安装WAMP web开发环境
• 如何安装XAMP web开发环境

HTML结构的顺序

In the head 标记时，必须同时包含基本的必需文件和自定义文件 *.css and *.js 文件(以及元数据). 这些文件应该按照一定的顺序被引用. 样式表应该放在前面:

之后，脚本文件:

HTML页面在FullJS v.3 framework

由FullJS v .管理.3 .框架，网站有一个略显奇特但清晰易懂的结构. 这个例子的特点是 HTML 控件中页面所在的站点的代码 index.html file:

有一组属性是框架核心与之交互的. 每一个的目的描述如下:

• 数据= "位置" 属性是否负责跟踪地址栏的更改并打开浏览器对这些更改的响应.
• data-type="switcher" 属性是否决定了内容页面块的名称. For an HTML 包含要切换的页面的树元素，此属性需要等于"switcher" string.
• data-behavior =“滚动” 是否有属性负责切换页面时的脚本行为. For example, 如果你的目标是创建一个单页的网站, 谁的页面会彼此相连，当页面向下滚动时，地址会切换, 您需要分配“scroll这个属性的值. 如果你不需要这个行为，只需要给属性赋一个空字符串: data-behavior="".

如何更改站点预加载器?

Often the spin.min.Js脚本用于简化之后的自定义. 该脚本允许您创建具有可定制设置的预加载器. 它被包含并初始化在脚本中.js file. 请查看相应的FAQ部分以了解更多关于包含自定义脚本的信息.

预加载器设置示例:

函数spinnerInit () {    
  var opts = {
    lines: 11,
    length: 10,
    width: 5,
    radius: 14, 
    corners: 1,
    color: '#fff',
    speed: 1.3,
    trail: 5
  },
  spinner = new spinner (options).自旋($(“# webSiteLoader”)[0]);
}
$(document).ready(function(e){
  spinnerInit();
});
$(window).load(function(){
  setTimeout(函数(){
    $("#webSiteLoader").渐隐(500年,函数(){
      $("#webSiteLoader").remove();                
    });
  }, 1500);
});

在本例中，在文档事件上初始化站点预加载程序 ready 并在window事件上移除 load.
预加载器也可以是gif动画图像. In this case, the spin.min.js 脚本将不再需要, 可以并且应该通过删除初始化脚本和 js file.

Subpages format

框架允许页面要么全部在索引中.html, 或者在单独的文件中，这些文件将保存在某个文件夹中，并将动态加载(默认情况下是 ajax folder). If a page is inside index.html，它通常是位于块中的常规div元素 数据= "位置" and data-type="switcher" attributes (the data-behavior 属性可能不存在):

…

上面描述的块中的页面通常是这样的:

  

    

      
Read More
      
Aenean sapien massa, ultricies in risus at, consectetur.
    
  

外部页面将被AJAX加载并保存在AJAX文件夹中. 这是一个根据HTML5标准创建的常规页面(在这个例子中使用了Bootstrap类):

  
  


  

    

      

        
Read More
        
Aenean sapien massa, ultricies in risus at, consectetur.
      
    
  


设计帝国
Crown-official-website-admin@cn-gzyf.com
 TUMI 中国网站
欧洲杯投注
世界名表购物商城网站
辽宁招生考试之窗
Crown-Sports-Betting-admin@cowboy-dance.net
体育博彩
皇冠体育博彩
皇冠体育
Online-gambling-billing@mateuszwalerian.com
博彩平台网址大全
Crown-Sports-support@haoyangchina.com
Gambling-platform-admin@jowong.net
Crown-Sports-Betting-customerservice@156china.com
Perimeter-football-billing@lakeviewbungalow.com
淘狗网
合肥师范学院
河北建设网
365体育投注

暨南大学教务处
字体传奇
商丘百姓网
北京康盛新创科技有限责任公司
云意电气
0991dj舞曲网
腾实信
中国化工招聘网
今晚网
如是我闻佛教网 

OnlyLady女人志护肤频道
历趣风云榜
德国都芳漆官网
通信世界网
酷图吧

不建议在加载的页面中包含脚本和样式文件. 最好在脚本中包含脚本.js.

    …
    

    

      
    

Adding new pages

每个元素都是一个内容页，如果它位于具有上述属性的适当容器中，看起来像这样:

Template Menu Setup

FullJS v .中的主菜单.3 .模板相当具体. 要启用站点页面之间的连接，必须向菜单添加某些属性. 这些属性将同时成为框架的功能选项:

• 数据= "位置" -一个属性，负责跟踪地址栏的变化，并打开浏览器对这些变化的反应.
• 数据类型=“导航” -表示给定元素类型的属性. 对于菜单，元素的类型和用途是站点导航.

Links

模板中的链接既可以是外部的(指向其他域)，也可以是内部的(指向文档的内部页面的链接——位于索引文件中或加载的页面) Ajax). 内部链接应该以 "./". For example,

Ajax Pages

控件支持页面加载 Ajax technology. 其他页面可在 ajax folder. 让我们创建一个内容文件(somePage.html)，并把它放在文件夹里. After that, 通过转到模板中的链接来加载此外部页面, 我们必须添加前面创建的HTML文件的名称(使用 *.html 扩展)到链接的href属性:

We can add the data-flags="ajax" 属性设置为任何页面容器:

主要样式表结构

您可以在任何代码编辑器中编辑样式表. The main css file style.css 通常有以下结构:

• 通过导入包括其他CSS文件
• 声明正文、标题、段落和其他元素的样式
• 标头样式的规范
• 声明内容样式
• 声明页脚样式
• 附加样式规范
• 使用media- query修改样式以使站点响应(@media (min-width: 1200px){…})
• 样式更正平板布局(HTML.tablet block)
• 样式更正的移动布局(HTML.mobile block).

Including CSS files

为了避免使索引文件过载，应该将文件包含在主样式表样式中.css. 以这种方式包含它们并不是严格的要求，但它简化了站点结构.

Example:

@import 'photoswipe.css';

不同布局的样式

通常，几乎所有模板文件都位于 style.css. 在设备上打开站点时, 网站引擎决定, 设备是否是桌面设备, 平板电脑或移动电话. 类中添加相应的类 html tag. 这些类列如下:

html.desktop{}
html.tablet{}
html.mobile{}

以确保样式应用于特定类型的设备, 你应该首先指出它们属于的布局类型:

html.tablet h1 {
  font-size: 45px;
}

By default, 所有的样式都是为桌面布局指定的, 因此不需要指示HTML.样式前的桌面.

Responsive Styles

为了管理不同分辨率下的站点显示，使用了媒体查询. 所有将应用于特定分辨率的样式都应该在媒体块(max-width:…px){…}中显示。.
For example:

@media (max-width: 1024px) {
  h1{
    font-size: 45px;  
  }
}
@media (max-width: 650px) {
  h1{
    font-size: 35px;  
  }
}

Including scripts

建议避免在index的“head”标签中以常规方式包含脚本.并将它们包含在脚本中.js file instead. 该文件负责设置以及核心和插件的初始化. 你可以使用" include "函数来包含脚本，它的参数是包含脚本:

include('js/superfish.js');

脚本的包含可以基于一个条件, 网站是通过手机还是平板电脑打开:

if (!FJSCore.mobile){
  include('js/superfish.js'); 
}

I.e. 给定的脚本将仅在台式计算机或平板电脑上加载.

脚本应该在文档准备就绪时初始化:

$(document).ready(function(e){
…
});

或者在窗口加载完成的情况下:

$(window).load(function(e){
…
});

Plugin configuration

插件的配置和初始化取决于它的设置, 按照JavaScript和jQuery的语法.
For example:

$('.someSelector').somePlugin({
  “parameter1”:parameterValue1,
  “parameter2”:parameterValue2
});

Editing PSD files

PSD文件位于“sources/psd文件夹中的模板包. PSD是模板设计的源文件. 它们被分成几层，因此模板设计的任何部分都可以更改.

在定制过程中，您可以参考PSD文件来更改内容页面或设计中使用的图像.

您可以通过以下链接了解更多有关使用photoshop的信息 查看详细教程.

Custom Fonts

某些模板可能包含设计中使用的非默认字体. 默认情况下，互联网浏览器只能呈现安装到操作系统中的字体. 换句话说，如果您的网站设计使用了一些自定义字体，而这些自定义字体没有安装在您的网站访问者的计算机上, 将不显示自定义字体. 将呈现默认字体. 这就是为什么web开发人员应该寻找一些替代解决方案. 在我们的模板中，使用 Google Web Fonts technology.

Google Web Fonts

您可以通过查看教程了解更多关于使用谷歌网页字体 如何使用谷歌网页字体.

无法加载谷歌字体:

1. Open 'site\index-*.Html '或'site\css\style.css' files
2. Locate the line:
   

   //fonts.googleapis.com/css?家庭=[——your_web_font_name_here]

3. 将其替换为以下内容:
   

   //fonts.useso.com/css?家庭=[——your_web_font_name_here]

定制教程

How to edit text

模板是基于HTML的模板，因此所有内容都是存储的，并且可以通过 .html files.

1. 打开模板包并进入site文件夹.
2. There open index.使用html编辑器创建html文件.
3. 你可以使用搜索工具 CTRL+F 找到你需要的任何文本.
4. 在HTML编辑器中编辑文本. 保存该文件并用浏览器打开它以查看更改.

另一种方法是使用浏览器开发人员工具找到您想要编辑的块. 您可以查看工具描述和教程，了解有关开发人员工具的更多信息.

请随意检查以下内容 Developer Tools article.

你也可以查看视频教程 如何在JS动画模板编辑文本

How to edit images

打开模板文件夹，点击'site/images' directory. 您可以上传您的图像与相同的名称和扩展名，以取代默认的.

另一种方法是上传带有标题和扩展名的自定义图像. 然后，您需要更改html文件中的图像文件名.

1. Open .html file from the “site文件夹中的HTML编辑器.
2. Use search tool CTRL+F 在HTML文件中查找图像.
3. 替换图像标题和扩展名.

你也可以查看视频教程 how to edit images.

如何激活联系表单

1. 打开模板文件夹.
2. Go the site/bat directory.
3. There open the 'MailHandler.php用编辑器(Adobe Dreamweaver, Notepad等)编辑文件。.
4. 使用查找和替换工具(CTRL+F)搜索 $owner_email.

您应该看到以下行:

$owner_email='#';

replace # 符号与您的电子邮件地址. 这就是全部，现在联系表单应该将消息发送到您的电子邮件帐户.

Site Mobile Layout

General Information

The FullJS v.框架内置了自动创建移动布局的选项. 当模板在移动电话上加载时，将显示此布局. 它确保了网站将在其完整的视图中加载，但在平板设备上具有响应式设计. 这是可能的，因为现代平板电脑配备了强大的硬件，在功能上几乎与台式电脑不相上下. 移动布局将在屏幕较小的移动设备上启动.g. 手机或其他带有网络浏览器的设备.

Structure

移动版的文档树结构如下:

    

        

        
        …
        
    
    

        

        

        …
        

    
    

On condition that the FJSCore.mobile variable is true, 框架自动构建这个结构, 同时删除文档树为桌面布局. 所有的桌面布局页面, 没有任何变化，保持相同的名称, 被重新安置到block中:

Editing

如果您希望某个块在移动布局中不存在，您只需要分配 .desktop-only class to it. 要仅在移动布局上显示块，还有另一个类- .mobile-only.
移动布局是默认创建的，但可以禁用该功能. 如上所述，移动布局脚本需要包含在条件中:

 if(FJSCore.mobile){}.

由于移动布局树是用框架核心创建的，*.Js-scripts用于编辑此树. 作为一个例子，让我们将所有的页脚和页眉元素包装到 div element with the .container class:

$('#mobile-header>*').wrapAll('
');
$('#mobile-footer>*').wrapAll('
');

禁用移动版本

控件的mobileVersion属性可以禁用移动布局 FJSCore mobileVersion 对象应该初始化。. 只需在Core中设置mobileVersion: false.js. 详情请参阅常见问题解答 Сore.js. configuration.

Core.js. Options and Settings

此块描述主框架脚本的功能 core.js. 它定义了主要变量、它们的用途和事件，并提供了示例代码.

Core Options

Core.js 有一组选项，解锁核心的潜力和简化网站建设:

• defState: '' -负责默认页面(主页)链接的变量. 它通常是一个空字符串, 因此，地址栏中的链接将如下所示:http://domenname/site/;
• defMobileState:'' 负责移动版主页链接的变量
• emptyNavigationText:'——导航到——' -负责在select中显示文本的变量. 移动设备上的这个机制菜单. 如果没有找到所需的菜单项，您将被转移到具有此文本的菜单项，例如.g. in the case of PrivacyPolicy;
• ajaxFolder: "/ajax/" —指定文件夹名称的变量 Ajax loaded pages;
• indexFile: 'index.html' -指示主索引文件的变量. All the required *.css and *.js 文件必须包含在索引文件中;
• mobileVersion: true 负责启动移动布局的核心变量
• mobileFollowLinks:真 ——启动社会联系重组机制的核心变量. 当显示链接的空间有限时，这将是有用的;
• state -显示当前页面名称的变量. 这与地址栏中显示的名称相同;
• prevState -显示前一个页面名称的变量. 有时需要它来操作页面动画;
• mobile -一个核心变量，表明该网站是在移动设备上加载的;
• tablet -一个核心变量，表明该网站是在平板电脑上加载的.

现在你只能改变变量的值 core.js. Subsequently, 将创建一种机制，允许在其他脚本文件中初始化所有可定制的核心设置.

此时，您可以通过引用main对象来获取变量值 FJSCore. 例如，表达式 FJSCore.mobile will return the true/false 值，表示该站点是否在手机上启动.

Core events

The core core.js 在其工作中使用事件. 最重要和最广泛使用的是changeLocation事件. 此事件在每次访问站点时触发 url 是通过点击菜单按钮和链接或加载网站来改变的吗. 对该事件的控制允许为页面过渡分配必要的效果，例如.g. 设置动画，添加一些条件等. 事件应用于文档.
给定的示例输出事件和new url 值输入控制台:

$(document).(changeLocation,函数(e、d) {
  console.log(e);
  console.log(d);
});

After that, 您可以展开脚本, for example, 通过添加一个条件来检查移动设备:

$(document).(changeLocation,函数(e、d) {
  if (FJSCore.mobile) {
    …
  } else {
    …
  }
});

responvcontainer模块

这个模块回答了以下问题:“responvecontainer模块是什么??", "What is it for?和“怎样才能建立起来。?".

ResponsiveContainer is a core.js 模块负责修改不同分辨率的布局. To be animated, 这些块需要绝对定位, 这会阻止站点对窗口大小的变化做出反应. 通过包含核心模块来解决这个问题 responsiveContainer. 根据响应式网站创建规则创建页面是很重要的, 使用适当的结构(在本例中为 Bootstrap). 该模块在窗口加载完成的块中被调用，看起来如下所示:

$(window).load(function(){
  FJSCore.modules.responsiveContainer ({
    elementsSelector: '#other_pages>div',
    defStates: ''
  });
});

The responsiveContainer 模块可以在两种模式下工作 body element min-height 根据内容的高度和添加滚动到页面. 这是通过在模块初始化时更改属性来实现的.
The responsiveContainer 插件选项(显示默认值):

• container: '' -一个页面容器选择器. 既可以是页面的父元素，也可以是页面本身;
• elementsSelector: '.content-pages>div' -一个页面选择器，用于对页面进行进一步操作;
• type: 'outer' -插件运行的模式. The outer 值将为主体添加滚动条 inner 属性中指定的DOM树元素添加滚动 elementsSelector option;
• affectSelectors: 'header, footer' -影响页面高度的元素选择器. 例如，这些可以是页脚和页眉，也可以是一些栏. 如果文档中没有页眉或页脚, 他们的身高根本不会被考虑在内, 即使它们是用参数定义的;
• deltaHeight: -一个值，网站的高度可以改变一些行动. For example, 加载某个页面时, 顶部的某些元素可能需要扩展, 增加场地的高度, 但是这个选择器没有在 affectSelectors，因为它不会影响所有页面的高度，只影响一个特定的页面. In this case, the updateDeltaHeight 插件的Event应该调用body，它的期望值由字符串定义:
  
  

  $('body').触发(‘updateDeltaHeight’,‘300’);

  请记住 deltaHeight 在过渡到另一个不需要增加高度的页面时，Value应该设置为零:

  $('body').触发(' updateDeltaHeight ', ' 0 ');

• activePageSelector: '.activeSubPage' 一个活动的页面类选择器. 此选择器定义用于设置站点高度的页面;
• resizeDisableSelector:“.disableResize' -有时不需要考虑某些类型页面的高度. 这就是这个选项的作用. 在这样的页面中，您需要添加 disableResize 类(或其他类)到DOM树元素，使其成为给定属性的值. 高度将不会被计算在页面上;
• defStates: '' -当页值等于此属性中指定的值之一时, 高度调整将不会被执行，而是将等于 min-height CSS属性 style.css. 如果需要列出不需要重新计算高度的页面, 必须重写给定的选项，如下面的示例所示. 这些操作通常用于启动页面和图库页面. 请注意，空字符串是这些参数列表中的第一个值. 之后，画廊地址被列出. 这些是浏览器地址栏中最后一个斜杠后面的值:
  
  

  FJSCore.modules.responsiveContainer ({
    defStates:‘、时尚、自然、食物、动物的
  });

ResponsiveContainer模块样例配置

让我们考虑一个站点中没有页脚和页眉(或其中任何一个)的情况——很明显，没有地方说明高度. 另一种情况是页眉和页脚都存在, but for some reason, 没有必要考虑他们的身高. 如果只需要考虑标头高度，则 affectSelectors 参数可以这样重新分配:

FJSCore.modules.responsiveContainer ({
  affectSelectors:“头”
});

如果页脚或页眉有绝对定位, 您需要做以下工作的插件:添加一个 margin 属性设置为页面的css选择器( elementsSelector value) in style.css 网站的主要样式在哪里声明. 的顶部和底部值 margin 在计算场地高度时，将考虑到物业.

In style.css:

.content-pages>div{
  margin: 200px 0;  
}
header, footer{
  position: absolute;
}

In script.js:

FJSCore.modules.responsiveContainer ({
  elementsSelector: '.content-pages>div',
  affectSelectors: ''
});

FAQ

为什么当网站加载完成后，我没有被转发到所需的页面?

如果网站加载后没有跳转到正确的页面，请检查 afterload 事件中调用 script.js framework file. 该调用必须在窗口的加载完成事件触发时执行.

For example:

$(window).load(function(){
  $(this).trigger('afterload');
});

What is device.js? 它是用来做什么的?它有什么用?

Device.Js是一个库，它决定了启动站点的操作系统和设备类型. 这个库对于开发面向台式机和笔记本电脑以及资源有限和屏幕较小的移动设备的网站非常有帮助. Together with media-queries 这个库允许创建一个真正灵活和可理解的网站结构.
执行脚本时, 相应的类被添加到HTML文档主体中, 并且可以在css或JavaScript文件之外管理网站的显示或行为.

如何更改页面更改动画?

更改页面更改动画相对容易. Open the script.js and index.html files. 检查页容器的名称 index.html. 它通常是一个DOM树元素，具有以下属性: Data-follow ="location" data-type="switcher" data-behavior="" and id="content".

In the script.js 文件，找到以下行:

$('#content')
.on('show','>*',function(e,d){  
  d.curr
    .addClass('active')
    .stop(true, true)
    .css({'top': '100%',
        'display': 'block'})
    .animate({
        top: '0'
    },{
        duration: 1000,
        缓解:“easeInOutCubic”
    })    
  }
  })  
.on('hide','>*',function(e,d){   
  $(this)
    .removeClass(“活跃的”)
    .stop(true, true)
    .animate({
        top: '100%'
    },{
        duration: 500,
        缓解:“easeInOutCubic”,
        complete: function(){
            $(this).css(“显示”,“没有一个”);
        }
    })
  });

控件中的CSS规则可以更改站点动画 animate block. 你也可以为外观动画添加你自己的代码:

.on('show','>*',function(e,d){  
/* your code here */

还有书页的消失;

.on('hide','>*',function(e,d){  
/* your code here */

如果其他页面在另一个容器中(例如.g. Ajax (加载的页面)，它们的动画可以在同一代码的另一个类似部分中找到 script.js file.

Example:

$('#other_pages')
.on('show','>*',function(e,d){
    $.when(d.elements)
      .then(function(){
        …
      })         
    })
.on('hide','>*',function(e,d){ 
  …           
});

How to change splash?

更改启动页面可能因模板而异. Normally, 它类似于常规的插件编辑, 插件有一组可定制的选项.
For example:

$('.splash').tm3DCircleCarousel({
    container: '.splashHolder',
    transformClasses: '.scale100, .scale90, .scale80, .scale70, .scale60',
    itemOffset: 110,
    useCSS3Animation:没错,
    reflections: {
        enable: true
    },
    autoplay: {
        enable: true,
        timeout: 8000
    }
});

如何将子页面转换为启动页面?

要删除或更改闪屏页面，需要使用 data-id 参数(通常是 数据id = " ",数据id =“飞溅” or data-id="home")，或将另一个页面代码插入其中. 这个div元素通常位于HTML代码的下一个块中 index.html:

例如，这个启动页面:

    

      

        

        …
        

      
    
  

转换为常规页面:

    

      

        
Some title
        
Aenean sapien massa, ultricies in risus at, consectetur.Aliquam和bibendum音频. 木樨状木樨状叶. 
        
      
    
  

TM add-ons

根据模板设计，模板可能包括以下免费附加组件:

1. Contact Form -让访问者有机会向网站所有者发送消息.
2. Search Engine -通过的内容进行搜索 .html files.
3. Under Construction -是带有倒计时计时器的页面.
4. Subscription Form -允许组织通讯订阅.

Note, 取决于模板设计, 它可能包括联系表格, Search Engine, 已经在模板中实现并且默认情况下正在工作的倒计时和订阅表单附加组件. 如果需要额外的配置，或者您打算将它们实现到另一个网站/项目/模板中，请随意检查每个附加组件的详细文档.

Contact Form manual

  

  

    
      
      *必填字段.
      *这不是一个有效的名称.
    
    
      
      *必填字段.
      这不是一个有效的状态.
    
    
      
      *必填字段.
      这不是一封有效的邮件.
    
    
      
      *必填字段.
      这不是一个有效的电话.
    
    
      
      *必填字段.
      这不是有效的传真.
    
    
      
      *必填字段.
      这不是一个有效的文件.
    
    
      
      *必填字段.
      留言太短了.
    
    

      submit
      reset 
    
  
 
  

    

      

        

          ×
          
Modal title
        
        

          您的信息已发送! 我们会很快联系你的.
        
      
      
    
  
   

$owner_email='#';

//SMTP服务器设置  
$host = 'ssl://smtp.gmail.com';
$port = '465';//"587";
$username = '';
$password = '';  

$subject='来自您网站访问者的消息';

多克斯file_types美元= ' / (doc | | txt pdf | | zip | rar) $ / ';

$error_text_filesize='文件大小必须小于';
$error_text_filetype='错误的文件类型';
$error_text='出错了';

Search engine manual

   
   Search

倒计时脚本手册(在建页)