< div class = "容器" >
Contact Form 让访问者有机会向网站所有者发送消息. 联系人数据(姓名、电子邮件、短信)被提交到相应的字段中. 如果访问者没有安装电子邮件客户端或使用别人的计算机,这将是非常有益的.g. in the internet club). 因此,我们开发了通用联系人表单,将消息发送到站点所有者指定的电子邮件, 有可扩展的字段数和可传输的数据验证功能吗.
Please include the following files in the section of HTML file to start working with the timer:
Introduction 在这个包里可以找到什么,它可以用来做什么
感谢您购买我们公司的网站模板. 本手册将向您展示如何使用模板, 如何编辑它,使它成为一个“活”的网站.
所有页面内容都是用HTML制作的,动态动画是用JavaScript制作的.
解压缩模板包
解压缩模板包后,你会发现3个文件夹:documentation", "screenshots" and "site". 你还可以看到一个名为“sources_############.zip“你需要解压缩.
源包包含模板的所有源文件. 该包受密码保护,只能使用 WinZip (Windows OS) and StuffitExpander (MAC OS) software.
您可以使用免费试用选项免费下载这两个应用程序:
在解压缩sources_############.Zip”文件,系统会提示您输入密码, 您可以在您的产品下载页面找到(打开您从我们公司收到的电子邮件中的链接).
一旦你完成解压缩模板,你应该有4个文件夹:documentation", "screenshots", "site" and "sources".
General Information
本指南展示了管理框架的细节、它的功能和原则. 它解释了FullJS v.3模板架构,并描述创建内容页面的原则以及脚本初始化的细节. 该框架旨在创建可以精细调整和快速编辑的动画模板. FullJS框架的通用性与之前的框架不同, 允许创建多种模板.
The FullJS v.框架具有自动创建移动布局的内置能力. 模板是响应性的,可以为小分辨率或窄屏幕改变其布局. 该框架有一组可定制的选项和模块:
Framework Components
该框架包括以下库和技术:
- jQuery JavaScript库是否专注于JavaScript与HTML的交互. jQuery库使您可以轻松访问任何DOM元素, 允许对属性和DOM元素内容进行操作. 它还为使用AJAX提供了方便的API.
jquery.com - Twitter Bootstrap v.3.x.x 是一套用于创建响应式网站和web应用程序的免费工具吗. 它包括用于排版的HTML和CSS样式模板, web forms, buttons, marks, 导航块和其他web界面组件, 包括JavaScript扩展.
getbootstrap.com - Ajax 是一种构建交互式用户界面和web应用程序的方法吗, 其中包括与web服务器的“后台”数据交换. As a result, 更新数据时,页面不会完全重新加载, 使web应用程序更快,更方便地使用.
- HTML5 History API 是一个处理浏览器地址栏历史记录的库吗.
http://github.com/browserstate/history.js/ - Font Awesome 是矢量字体与众多的图标,这是很容易修改简单的CSS. 字体是视网膜支持的.
http://fortawesome.github.io/Font-Awesome/ - 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 - a set of less files
- 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/).
请查看下面关于如何配置本地开发环境的教程:
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 新葡京博彩官网 Venice-Macao-customerservice@1718114.net Buying-website-careers@rvnetguy.com 雪郎生物 新葡京 温州人事考试网 Gaming-app-Download-media@xjiu.net Gaming-app-Download-media@xjiu.net" class="hidden">贝拉米中国官网 Sun-City-app-careers@blueroseent.net Online-gambling-sales@kxgc.net 365bet体育 Sun-City-official-website-help@blueroseent.net I-love-you-contactus@wxlongtouzhu.com MG-Games-customerservice@shikstar.com 28商机问答 Gaming-navigation-media@yyzwslm.com bet365体育 Crown-Sports-customerservice@xjiu.net 珠海一中 阿里巴巴校园招聘 欣欣山东旅游网 挑号网-湖北手机号码 搜狐广东 琅琅比价网 《是真的吗》官网 奥妙官方网站 苏北网新闻频道 58同城梧州分类信息网 北国网文化频道 站点地图 现代农业 权健自然医学 梦梦奈官网 中华经典网Read More
Aenean sapien massa, ultricies in risus at, consectetur.
不建议在加载的页面中包含脚本和样式文件. 最好在脚本中包含脚本.js.
…
Adding new pages
每个元素都是一个内容页,如果它位于具有上述属性的适当容器中,看起来像这样:
因此,要添加一个新页面,您只需要复制并粘贴这个 div 在下面标记并填写该页. The data-id="" 属性包含新的页面名称(相同的名称将显示在地址栏中). 让我们创建一个示例页面并给它起一个名字 "page5".
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" 属性设置为任何页面容器:
An 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 "函数来包含脚本,它的参数是包含脚本:
包括(“js / superfish.js');
脚本的包含可以基于一个条件, 网站是通过手机还是平板电脑打开:
if (!FJSCore.mobile){ 包括(“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
您可以通过查看教程了解更多关于使用谷歌网页字体 如何使用谷歌网页字体.
无法加载谷歌字体:
- Open 'site\index-*.Html '或'site\css\style.css' files
- Locate the line:
//fonts.googleapis.com/css?家庭=[——your_web_font_name_here]
- 将其替换为以下内容:
//fonts.useso.com/css?家庭=[——your_web_font_name_here]
定制教程
How to edit text
模板是基于HTML的模板,因此所有内容都是存储的,并且可以通过 .html files.
- 打开模板包并进入site文件夹.
- There open index.使用html编辑器创建html文件.
- 你可以使用搜索工具 CTRL+F 找到你需要的任何文本.
- 在HTML编辑器中编辑文本. 保存该文件并用浏览器打开它以查看更改.
另一种方法是使用浏览器开发人员工具找到您想要编辑的块. 您可以查看工具描述和教程,了解有关开发人员工具的更多信息.
请随意检查以下内容 Developer Tools article.
你也可以查看视频教程 如何在JS动画模板编辑文本
How to edit images
打开模板文件夹,点击'site/images' directory. 您可以上传您的图像与相同的名称和扩展名,以取代默认的.
另一种方法是上传带有标题和扩展名的自定义图像. 然后,您需要更改html文件中的图像文件名.
- Open .html file from the “site文件夹中的HTML编辑器.
- Use search tool CTRL+F 在HTML文件中查找图像.
- 替换图像标题和扩展名.
你也可以查看视频教程 how to edit images.
如何激活联系表单
- 打开模板文件夹.
- Go the site/bat directory.
- There open the 'MailHandler.php用编辑器(Adobe Dreamweaver, Notepad等)编辑文件。.
- 使用查找和替换工具(CTRL+F)搜索 $owner_email.
您应该看到以下行:
$owner_email='#';
replace # 符号与您的电子邮件地址. 这就是全部,现在联系表单应该将消息发送到您的电子邮件帐户.
Site Mobile Layout
General Information
The FullJS v.框架内置了自动创建移动布局的选项. 当模板在移动电话上加载时,将显示此布局. 它确保了网站将在其完整的视图中加载,但在平板设备上具有响应式设计. 这是可能的,因为现代平板电脑配备了强大的硬件,在功能上几乎与台式电脑不相上下. 移动布局将在屏幕较小的移动设备上启动.g. 手机或其他带有网络浏览器的设备.
Structure
移动版的文档树结构如下:
…
条件是 FJSCore.mobile variable is true, 框架自动构建这个结构, 同时删除文档树为桌面布局. 所有的桌面布局页面, 没有任何变化,保持相同的名称, 被重新安置到block中:
The new select 移动菜单是创建的,它是基于网站菜单与指定的属性 数据类型=“导航”. 下拉菜单添加了无限个子菜单级别. 此菜单位于站点标题中. The h1 标签也被转移到那里. 标签可以用作标识的固定块. The .copyright 块(隐私策略链接)和 .follow-links (a list of social links) are transferred to the 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).触发(后负荷); });
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('active') .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
根据模板设计,模板可能包括以下免费附加组件:
- Contact Form -让访问者有机会向网站所有者发送消息.
- Search Engine -通过的内容进行搜索 .html files.
- Under Construction -是带有倒计时计时器的页面.
- Subscription Form -允许组织通讯订阅.
Note, 取决于模板设计, 它可能包括联系表格, Search Engine, 已经在模板中实现并且默认情况下正在工作的倒计时和订阅表单附加组件. 如果需要额外的配置,或者您打算将它们实现到另一个网站/项目/模板中,请随意检查每个附加组件的详细文档.
Contact Form manual
Description
表单中的HTML结构是灵活的, 唯一的条件是所有字段(输入, 文本区域的HTML元素)应该放在 label 具有与其类型相对应的类的标记.默认情况下有以下类/类型:
- name – the User's Name. 验证:不允许使用数字,不少于2个符号;
- email – the User's Email;
- state – Country (Area). 验证:不允许使用数字,不少于2个符号;
- phone – Phone. 验证:仅限数字,不少于5个符号. 其他可接受的非字母符号:"空格"、"+"和"-";
- fax – Fax. 验证:仅限数字,不少于5个符号. 其他可接受的非字母符号:"空格"、"+"和"-";
- file – File upload. 验证:最大上传文件大小为10mb. 仅适用于doc, docx, txt, pdf, zip, rar文件格式.
- message – Message. 验证:任何符号,不少于20个符号.
- @Required -这个数据约束属性在填写表单时用作可选字段的指针.
Also label 上面提到的标签可以包含嵌套 span elements with classes error-message and empty-message, 其中包括在字段中的数据指定不正确或字段为空的情况下的错误消息.
Script Initialization
要激活联系人表单,需要将来自脚本的联系人包含在 部分的HTML文件和复制 "bat" 文件夹到您的网站根文件夹. The "bat" 文件夹应包含2个文件: MailHandler.php, libmail.php
你需要打开 MailHandler.php file in bat 文件夹和设置/更改所需的选项:
$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='出错了';
使用以下参数进行自定义:
- $owner_email -资料将被发送至的电邮地址;
请记住,您需要定义以下四个选项($host, $port, $username和$password),就在您使用SMTP服务器从您的网站发送邮件时. By default MailHandler.php uses the standard PHP mail() function 这在大多数情况下都有效,不需要额外的设置.
- $host -发送邮件的SMTP主机地址;
- $port -发送邮件的SMTP主机端口;
- $username -登录SMTP服务器的用户名;
- $password -登入SMTP伺服器的密码;
- $subject -联络表格邮件的主题;
- $file_types -文件类型,你可以上传和发送的形式;
- $error_text_filesize -上传文件大小不正确的错误文本;
- $error_text_filetype -上传文件类型不正确的错误文本;
- $error_text -邮件发送问题的错误文本.
Search engine manual
Attention! 搜索功能将无法在本地工作. 它只在启用了PHP的主机服务器上工作.
输入要搜索的单词:
例如:lorem, ipsum, dolor
Description
使用表单所需的文件:
- jquery.js - jQuery库(表单将只与这个版本的库工作);
- search.css -样式表文件,用于搜索结果页面的样式化;
- search.php -页面,显示搜索结果;
- search.js -脚本,负责在页面上的iframe中输出搜索结果 search.php;
- results.php - PHP脚本,实际执行搜索.
在这种形式中,我们应该定义这样的参数: action="search.php" and method="get",也为输入设置参数: name="s". 如果要更改搜索表单的名称,即 id="search" 默认情况下,您应该在文件的第3行更改它 search.js 你也可以在 search folder.
Settings
注意,搜索表单是默认启用、配置和工作的. 如果您试图在另一个项目/模板中使用此搜索表单而不使用搜索表单,则需要这些步骤.
要使表格正常工作,请执行以下步骤:
- copy search 文件夹到根目录.html files;
- move file search.php from the search 文件夹到根目录(带*.html files);
- 按照上面的说明编辑你的表单;
- 复制部分页眉和页脚与部分中所有连接的脚本 to the page search.php,但必须添加连接的文件 search.js. For example:
- 对于搜索结果输出,将以下块添加到您的内容中:
Search result:
- 更改搜索结果的样式,使用 search.css.
模板的所有其他主样式都将自动从文件中取出 style.css by the PHP script.
倒计时脚本手册(在建页)
< div id = "反" > < / div >
< div class = " counter_desc”>
天< div class = "天" > < / div >
< div class = "小时" >小时< / div >
< div class = "分钟" >分钟< / div >
< div class = "秒" >秒< / div >
DaysHoursMinutesSeconds
Features:
- 计算时间,直到确切的日期;
- 有定制的皮肤设计.
Description
使用计时器所需的文件:
- jquery.js - jQuery库(计时器只适用于这个版本的库)
- jquery.countdown.min.js 定时器功能;
- demo.css -计时器样式的CSS样式集.
Initialization
的末尾可以找到定时器初始化的代码 jquery.countdown.min.js file:
$(document).ready(function(){ var _date=new Date() ,countdown_to={ year:2013 ,month:6 ,date:13 ,hours:0 ,minutes:15 ,seconds:00 } _date.setFullYear (countdown_to.year,countdown_to.month,countdown_to.date) _date.setHours(countdown_to.hours) _date.setMinutes (countdown_to.minutes) _date.setSeconds (countdown_to.seconds) /*演示代码*/ _date=new Date() _date.setMonth(_date.getMonth()+8) /*结束演示代码*/ $('#counter').countdown({ 形象:“图像/ digits_inverted.png', startTime: _date, stepTime: 35 }); });
初始化发生在事件上 $(document).ready().
Parameters:- image -显示将用作皮肤的图像的路径(目录) images 包含可以用作计时器皮肤的文件);
- startTime -设置倒计时的最后日期. 利用变量实现时间倒计时 _date;
- stepTime -设置数字动画的周期速率.
演示版本显示了当前日期加上8个月的剩余时间. 这就是为什么每次刷新演示页面时timer都会开始一个新的倒计时. 这里是一个代码,你可以编辑这些参数:
/*演示代码*/ _date=new Date() _date.setMonth(_date.getMonth()+8) /*结束演示代码*/
如果你想设置准确的日期,你应该改变变量 _date. 的值 year, month(注意月份的编号从0开始),日期,小时,分钟,秒. 这里有一段代码,你可以改变这些参数:
$(document).ready(function(){ var _date=new Date() ,countdown_to={ year:2013 ,month:6 ,date:13 ,hours:0 ,minutes:15 ,seconds:00 } });
此外,您必须删除以下代码:
/*演示代码*/ _date=new Date() _date.setMonth(_date.getMonth()+8) /*结束演示代码*/
Color themes
下面你会发现一些计时器皮肤解决方案的例子. 所有你能找到的皮 images directory.
< div class = " counter_desc”>
天< div class = "天" > < / div >
< div class = "小时" >小时< / div >
< div class = "分钟" >分钟< / div >
< div class = "秒" >秒< / div >
$('#counter').countdown({
image: 'images/digits.png',
});
< div class = " counter_desc”>
天< div class = "天" > < / div >
< div class = "小时" >小时< / div >
< div class = "分钟" >分钟< / div >
< div class = "秒" >秒< / div >
$('#counter').countdown({
形象:“图像/ digits2.png',
});
订阅表格手册
订阅表格样本
Description
表单中的HTML结构是灵活的, 唯一的条件是输入应该放在 label 具有与其类型相对应的类的标记.
默认情况下有以下类/类型:
- name – the User's Name. 验证:不允许使用数字,不少于2个符号;
- email – the User's Email;
Also label 上面提到的标签可以包含嵌套 span elements with class error, 如果字段中的数据指定不正确,其中包括错误消息.
Script Initialization
控件中包含订阅表单脚本,以激活订阅表单 部分的HTML文件和复制 "bat" 文件夹到您的网站根文件夹. The "bat" 文件夹应包含1个文件: MailHandler-sub.php
之后,您应该在$(窗口)上初始化您的订阅表单.load(): sForm结束时的事件.js file
$(window).load(function(){ $('#subscribe-form').sForm({ ownerEmail:'#', sitename:'sitename.link' }) })
使用以下参数进行初始化:
- ownerEmail -资料将被发送至的电邮地址;
- sitename -保存订阅表格的网址.
在成功订阅的情况下,网站所有者和网站访问者获得两个单独的成功订阅确认电子邮件. 网站所有者目标电子邮件是从sForm抓取的.Js文件和网站访问者电子邮件是订阅期间指定的电子邮件.
Cookie Policy
cookie是网站放在访问者电脑上的小文本文件. 它们通常用于识别特定的访问者,并为他们提供更好的体验. cookie是许多网站功能的关键部分,我们认为这是理所当然的.
For instance, 通常是cookie让网上商店记住你购物车里有什么东西. 它们也被用来保持你登录到一个网站, 或者为网站所有者提供有价值的使用统计数据和信息.
如果你运行一个网站,它几乎肯定会使用cookie. 它们最有可能的功能是通过谷歌分析(Google Analytics)等工具监控访问者数量和行为. 它们也可用于向访问者显示相关广告, 或者-如果你在网上销售-电源的关键部分,你的网上购物系统.
2012年5月26日——ICO发布了一项执法变更, 现在,只要您明确您的隐私/cookie政策在哪里,就允许“暗示同意”.
Box info:
根据Cookie法的条件,我们建议您添加该插件 cookiecuttr created by Chris Wharton 并在GNU通用公共许可证下提供.
它看起来是这样的:
此插件用于警告您网站的访问者关于cookie的使用情况. 该插件将添加信息面板/框,可以完全定制通过 css and js files:
如何实现插件
您需要下载 jquery.cookie.js, jquery.cookiecuttr.js and cookiecuttr.css file. Copy them into the js and css 文件夹分别包含插件脚本和CSS文件参考中的 section of each html file:
Plugin customization
这个插件有很多参数和选项. 这允许您根据您的需要和愿望定制它.
这里只是其中的一些:
cookieCutter //如果你想主动隐藏你的网站的部分设置为true, 例如,假设您使用一个插入cookie的评论系统, 您可以将div名称放在下面,将其替换为cookie警告消息. cookieAnalytics //如果你只是使用一个简单的分析包,你可以将其设置为true, 它显示一个简单的默认消息,没有隐私策略链接-默认情况下设置为true. cookieDeclineButton //如果你想要一个拒绝按钮(讽刺的是)写一个cookie到浏览器,那么设置这个为true. cookieAcceptButton //将此设置为true以隐藏接受按钮,默认设置为false cookieResetButton //如果你想要一个重置按钮来删除接受或拒绝cookie,那么将其设置为true. cookieOverlayEnabled //不想要一个独立的工具栏? 这使得整个信息变成了100%的高度 cookiePolicyLink //如果适用, 输入链接到您的隐私政策在这里-这是一旦cookieAnalytics设置为false; cookieMessage //编辑你想要出现在cookie栏中的消息, 记住要保留{{cookiePolicyLink}}变量,以便它插入您的隐私策略链接. cookieAnalyticsMessage //编辑你想要显示的消息,这是默认消息. //编辑“什么是Cookies”链接. cookieErrorMessage //编辑你想要出现在功能的地方的消息 cookieNotificationLocationBottom //默认为false, 将其更改为true, cookie通知栏将显示在页面底部, 请注意,在移动设备、iOS设备和Internet Explorer 6中,此选项仍将位于顶部. cookieDisable //列出要禁用的元素,以逗号分隔, 这只会在cookieCutter被设置为true时起作用. cookieAcceptButtonText //你可以改变绿色接受按钮的文本. cookieDeclineButtonText //你可以改变红色拒绝按钮的文本. cookieResetButtonText //你可以改变橙色重置按钮的文本. cookieWhatAreLinkText //您可以更改“什么是cookie”链接显示在谷歌分析消息的文本. cookiePolicyPage //将此设置为true以显示您希望出现在隐私或cookie策略页面上的消息. cookiePolicyPageMessage //编辑你想要出现在策略页面上的消息. cookieDiscreetLink //默认为false,设置为true为启用. cookieDiscreetLinkText //编辑你想要出现在discreet选项上的文本. cookieDiscreetPosition //默认设置为topleft, 你也可以设置在最右边, bottomleft, bottomright. cookieddomain //默认为空,在这里添加你的域名,不带www. 或http://或http://删除谷歌分析cookie在下降.
你可以在官方网站上找到更多关于插件定制和使用的详细信息和说明 cookiecuttr website.
Uploading template
为了让你的网站“活”起来,你需要上传所有的“site文件夹从您的本地计算机到您的主机服务器.
请注意:您的网站根取决于您的托管服务器上的目录结构. If you upload the "site文件夹本身到你的服务器,你的网站的根目录将是 http://your_domain_name/site. 为了避免这种情况,使网站根 http://your_domain_name/ please open the "site文件夹并上传文件夹内容.
This 视频教程将向您展示如何上传文件 到您的主机使用免费的FTP软件FileZilla.
This 视频教程将向您展示如何上传文件 到您的主机使用托管面板(WebHost管理器,WHM).
请不要上传源目录或任何模板源文件到托管服务器.
Addendum 从哪里获得帮助、支持和其他信息
我们希望本手册对您有用,并帮助您安装, 编辑模板并解决您的问题.