Webknife的快速Web UI-CSDN博客

现代网络要求越来越快的开发周期。随着需求的增加，需要有工具来满足这些截止日期。 Webknife是一个Web开发框架，可帮助您以最少的代码创建漂亮的布局和设计。在本教程中，我将创建一个基于Web的应用程序，以帮助Tuts +的讲师更轻松地在Markdown中创建他们的课程文书。

线框

在进行编码之前，最好先了解一下应用程序的布局以及工作方式。此应用程序创建格式正确的Markdown文档，用于将视频课程放入Envato CMS。因此，它将主要由输入字段组成。

我使用Affinity Designer创建了应用程序的线框。这是主要的“ 属性”选项卡。这是创建课程CMS条目所需的主要信息。

选择“ 课程”选项卡将显示此表单。在这里，讲师可以输入章节标题，课程标题，课程说明和课程链接。编号将由程序自动计算。本教程仅显示足够的演示项目以查看布局。

导出选项卡具有一个元素：用于将课程导出到Markdown文档的按钮。

Webknife入门

要下载该库，请访问Webknife的网站并下载最新版本。在编写本教程时，最新版本是1.4.0。将文件解压缩到您的工作目录中。

Webknife是一组样式表和一些JavaScript文件，这些文件使创建HTML网站变得快速而容易。因此，我将首先介绍HTML的创建，显示其结果，然后添加足够CSS以使其看起来像我想要的样子。 Webknife工具箱完成了大部分工作。

HTML的顶部将是用于加载样式表并设置标题的标题。创建文件index.html并添加以下内容：

<!doctype html>
<!-- MOTW-DISABLEDsaved from url=(0014)about:internet -->
<!-- delete MOTW-DISABLED to enable Mark of the Web (http://msdn.microsoft.com/en-us/library/ms537628%28VS.85%29.aspx)-->
<html>
 <head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" ><!--Prevent IE using compatibility mode on local or intranet pages. Do not put scripts before this line.-->
   <meta name="viewport" content="width=device-width, user-scalable=yes"><!--Mobile device scaling-->
   <meta charset="UTF-8">
     <title>Envato Course Sheet Generator</title>

	 <!-- Style Sheets Used -->
	 <link type="text/css" rel="stylesheet" href="webknife-1.4.0/framework/framework.min.css" />
	 <link type="text/css" rel="stylesheet" href="webknife-1.4.0/framework/highlight.min.css" />
     <link rel="stylesheet" type="text/css" href="css/basic.css" />
 </head>
 <body>
    <section>
        <div  id="main" class="w-fixed-width">
    	</div>
    </section>
 </body>
</html>

那是该项目HTML文件的开头。其他所有操作在<div id="main"></div>标记之间进行。

<!-- Tabs Definition -->
<ul class="w-tab">
    <li id='propertiesTab' class="w-active">
		<a href="#" onclick="propertiesTabClick();">
			<span class="w-icon" data-name="clipboard"></span>
			<span>Properties</span>
		</a>
	</li>
	<li id='lessonsTab'>
		<a href="#"  onclick="lessonsTabClick();">
			<span class="w-icon" data-name="compose"></span>
			<span>Lessons</span>
		</a>
 	</li>
	<li id='exportTab'>
		<a href="#"  onclick="exportTabClick();">
			<span class="w-icon" data-name="share"></span>
			<span>Export</span>
		</a>
	</li>
</ul>

无序列表具有w-tab类。该Webknife类将列表项设置为选项卡格式。第一个列表项的类别为w-active 。 Webknife使用此选项将选项卡的颜色更改为活动的着色。其余的都不是，因此它们将处于非活动状态。

每个列表项都有一个带有onclick功能的锚点。我将创建这些功能来支持内容面板内容的切换。

在锚点标签内，有两个跨度。第一个范围具有w-icon类。此类的所有范围都具有一个data-name选择器，该名称带有要插入该范围内的图标的名称。属性范围具有data-name="clipboard" 。课程跨度具有data-name="compose" 。导出范围具有data-name="share" 。 Webknife有77个svg图标可供选择。有关更多详细信息，请参考《 HTML参考指南》。

留言内容

在“ 选项卡面板”之后 ，放置以下代码：

<div id="panelContainer" class='w-tab-content'>
<!-- Warning Messages and Comments. -->
    <div id="message">
        <span class="w-icon large" data-name="alert_circled" title="alert_circled"></span>
        <p class="w-message w-information">Saved Okay!</p>
    </div>

    <div id="alert">
        <span class="w-icon large coloured" data-name="alert_circled" title="alert_circled"></span>
        <p class="w-message w-error">There was an Error!</p>
    </div>

本节以div开头，该div包含所有三个选项卡的所有面板内容。该div还包含两个消息区域：一个用于保存完成，另一个用于错误消息。

WebKnife消息-具有我添加的格式 — Webkife消息-具有我添加的格式

WebknifeCSS样式large ，可以使图标变大，而CSS样式则coloured为红色。在这两个消息中，我都使用data-name:"alert_circled"表示带有感叹号图标的圆角三角形。每个消息都有Webknife类w-message以具有消息样式。保存的消息使用w-information ，错误消息使用w-error 。

在本教程的源文件中，我将这些行注释掉了。我将使用JavaScript根据需要将此代码注入DOM。

属性面板

对于“ 属性面板” ，添加以下代码：

<!-- Properties Panel -->
<div id='propertiesPanel' class="w-form w-active">
    <div class="w-form-group">
        <label for="author">Author: </label>
        <input type="text" name="author" id="author" / />
    </div><div class="w-form-group">
        <label for="difficulty">Difficulty: </label>
        <select name="difficulty" id="difficulty">
            <option>Beginner</option>
            <option>Intermediate</option>
            <option>Advanced</option>
        </select>

    </div><div class="w-form-group">
        <label for="topic">Topic: </label>
        <select name="topic" id="topic">
            <option>3D & Motion Graphics</option>
            <option>Computer Skills</option>
            <option>Crafts & DIY</option>
            <option>Design & Illustration</option>
            <option>Game Development</option>
            <option>Music & Audio</option>
            <option>Web Design</option>
            <option>Code</option>
            <option>Photo & Video</option>
        </select>

    </div><div class="w-form-group">
        <label for="Categories">Categories: </label>
        <input type="text" name="Categories" id="Categories" />
    </div><div class="w-form-group">
        <label for="frameworks">Software/Languages/Frameworks:</label>
        <input type="text" name="frameworks" id="frameworks" />
    </div><div class="w-form-group">
        <label for="courseRate">Course Rate: </label>
        <input type="text" name="courseRate" id="courseRate" />
    </div><div class="w-form-group">
        <label for="due">Due: </label>
        <input type="text" name="due" id="datedue" />
    </div><div class="w-form-group">
        <label for="courseName">Course Name: </label>
        <input type="text" name="courseName" id="courseName" />
    </div><div class="w-form-group">
        <label for="courseDescription">Course Description: </label>
        <textarea rows="5" type="text" name="courseDescription" id="courseDescription" class="multipleLineProperties"> </textarea>
    </div><div class="w-form-group">
        <label for="sourceDescription">Source Description: </label>
        <textarea rows="5" type="text" name="sourceDescription" id="sourceDescription" class="multipleLineProperties"> </textarea>
    </div>
</div>

属性面板div包含两个类： w-form和w-active 。 w-form定义w-form的样式， w-active将其指定为主动显示。由于应用程序应在此面板上启动，因此应从头开始进行设置。

在这个div ，有w-form-group类的div 。此类将所有内容保持在一行中。每个div包含一个标签和一个输入或文本区域。每个输入都有一个唯一的标识符，可以轻松地从JavaScript获取信息。该面板上的每个输入都有一个w-form-group dev人员。

课程面板

在“ 属性面板”的div之后，放置以下代码：

<div id='lessonsPanel' class='w-form '>
    <div class="w-form-group">
        <label for="headingtitle1">1</label>
        <input id="headingtitle1" type="text" name="headingtitle1" />
        <span class="w-icon closeIcon" data-name="close_circled"></span>
        <div class="w-form-group lessonGroup">
            <label for="lessontitle1">1.1</label>
            <input id="lessontitle1" type="text" name="lessontitle1" />
            <span class="w-icon closeIcon" data-name="close_circled"></span>
            <div class="w-form-group lessonDescriptionGroup">
                <textarea id="lesson1description1"></textarea>
                <div class="w-form-group linksGroup">
                    <h3 class="w-no-underline">Related Links:</h3>
                    <div class="w-form-group">
                        <span class="w-icon linkIcon" data-name="earth"></span>
                        <input id="lesson1-1link1" type="text" name="lesson1-1link1" />
                        <span class="w-icon closeIcon" data-name="close_circled"></span>
                    </div>
                    <div class="w-form-group">
                        <button class="w-small w-colored addButton" type="button">Add Link</button>
                    </div>
                </div>
            </div>
            <div class="w-form-group">
                <button class="w-small w-colored addButton" type="button">Add Lesson</button>
            </div>
        </div>
    </div>
    <div class="w-form-group">
        <label for="headingtitle2">2</label>
        <input id="headingtitle2" type="text" name="headingtitle2" />
        <span class="w-icon closeIcon" data-name="close_circled"></span>
        <div class="w-form-group lessonGroup">
            <label for="lesson2title1">2.1</label>
            <input id="lesson2title1" type="text" name="lesson2title1" />
            <span class="w-icon closeIcon" data-name="close_circled"></span>
            <div class="w-form-group lessonDescriptionGroup">
                <textarea id="lesson2description1"></textarea>
                <div class="w-form-group linksGroup">
                    <h3 class="w-no-underline">Related Links:</h3>
                    <div class="w-form-group">
                        <span class="w-icon linkIcon" data-name="earth"></span>
                        <input id="lesson2link1" type="text" name="lesson2-1link1" />
                        <span class="w-icon closeIcon" data-name="close_circled"></span>
                    </div>
                    <div class="w-form-group">
                        <span class="w-icon linkIcon" data-name="earth"></span>
                        <input id="lesson2-1link2" type="text" name="lesson2-1link2" />
                        <span class="w-icon closeIcon" data-name="close_circled"></span>
                    </div>
                    <div class="w-form-group">
                        <button class="w-small w-colored addButton" type="button">Add Link</button>
                    </div>
                </div>
            </div>
            <div class="w-form-group">
                <button class="w-small w-colored addButton" type="button">Add Lesson</button>
            </div>
        </div>
        <div class="w-form-group">
            <button class="w-small w-colored addButton" type="button">Add Heading</button>
        </div>
    </div>
</div>

“课程”面板的结构与“属性”面板相同。标签指示不同的章节编号和课程编号。输入是用于标题和标题的文本输入，是用于描述的textarea 。

每个标题，课程标题和链接都有一个span元素，其data-name为close_circled 。这会在中间放置一个带有“ x”的圆圈，以删除这些项目。

每个链接输入都有一个span元素，其data-name为earth 。这将放置一个看起来像地球的图标。

所有按钮的Webknife类均为w-small和w-colored 。 addButton类用于在CSS文件中添加特定的样式。

id不是最终的id ，但是JavaScript代码将根据需要创建它们。这些只是显示基本格式。

导出面板和JavaScript导入

在“课程面板”的div之后，放置以下代码：

<div id='exportPanel' class='w-form'>
                <div class="w-for-group w-center">
                    <button class="w-large w-colored" type="button">Export Markdown File</button>
                </div>
            </div>
        </div>
        <!-- Load the Scripts last. -->
        <script type="text/javascript" src="webknife-1.4.0/framework/framework.min.js"></script>
        <script type="text/javascript" src="webknife-1.4.0/framework/framework.icons.js"></script>
        <script type="text/javascript" src="webknife-1.4.0/framework/highlight.min.js"></script>
        <script type="text/javascript" src="js/basic.js"></script>
    </body>
</html>

导出面板上有一个简单的按钮。 Webknife类的w-large和w-colored color使按钮变大而颜色变深。

在面板的div结束之后，这三个script标签从Webknife和我JavaScript文件加载JavaScript文件。我JavaScript文件包含切换选项卡和显示日期选择器所需的功能，以及用于添加链接的模式对话框。

JavaScript代码

在文件js/basic.js ，添加以下代码：

function onLoadFunctions() {
    //
    // WebKnife:  instantiate an svg injector to show SVG icons
    // or use injector.inject('#foo') to only inject inside the
    // matching elements
    //
    var injector = new svgInject();
    injector.inject();

    //
    // Setup the datepicker for the due date.
    //
    var dateDue = $('#datedue').pikaday({
    	    firstDay: 1,
		    minDate: new Date('01-01-2015'),
		    maxDate: new Date('12-31-2015'),
        format: 'MM/DD/YYYY',
		    yearRange: [2015,2099]
    });
}
window.onload = onLoadFunctions;

//
// These Global variables and functions are for quickly changing the
// states of the tabs and their contents.
//
var propPan = $("#propertiesPanel");
var lessPan = $("#lessonsPanel");
var expPan = $("#exportPanel");
var propTab = $("#propertiesTab");
var lessTab = $("#lessonsTab");
var expTab  = $("#exportTab");

function propertiesTabClick() {
    propPan.addClass("w-active");
    lessPan.removeClass("w-active");
    expPan.removeClass("w-active");

    propTab.addClass("w-active");
    lessTab.removeClass("w-active");
    expTab.removeClass("w-active");
}

function lessonsTabClick() {
    propPan.removeClass("w-active");
    lessPan.addClass("w-active");
    expPan.removeClass("w-active");

    propTab.removeClass("w-active");
    lessTab.addClass("w-active");
    expTab.removeClass("w-active");
}

function exportTabClick() {
    propPan.removeClass("w-active");
    lessPan.removeClass("w-active");
    expPan.addClass("w-active");

    propTab.removeClass("w-active");
    lessTab.removeClass("w-active");
    expTab.addClass("w-active");
}

function getLink(addButton) {
    //
    // Create the modal dialog for entering the web address.
    // 
    var modalOptions = {
        'width' : 600,
        'height' : 220,
        'title' : 'Enter Title and Web Address for Link',
        'html' : '<div style="text-align: center;"><p style="font-size: 30px;">[<input type="text" id="linkTitle" size="25" />](<input type="text" id="linkAddress" size="25" />)</div><button class="w-small w-colored" type="button" >Set Link</button>'
    };
    $(addButton).modal(modalOptions);
}

第一个功能是onload功能。页面加载完成后将执行。此功能使用Webknife框架设置svg图标注入器。之后，它也从Webknife设置课程的到期日的日期选择器。

全局变量和以下三个功能执行选项卡切换。我使用变量为不同的选项卡元素和面板保留jQuery包装器。这样，就不会在每次运行函数时都创建它们。

最后一个功能是在“ 添加链接”按钮上弹出模式对话框。当用户单击按钮时，将显示以下对话框：

用于添加链接的模型对话框-具有我的格式 — 用于添加链接的模态对话框-使用我的格式

需要编写更多代码才能使应用程序充分发挥功能，但这对于本教程而言已足够。

自定义CSS

在添加自定义CSS之前，该应用程序如下所示：

具有默认WebKnife样式的应用程序 — 具有默认Webnife样式的应用程序

看起来还不错，除了所有面板一次显示并且背景颜色不是我想要的。但这很容易解决。在文件css/basic.css ，放置以下代码：

body {
  overflow-x: hidden;
  background-color: lightblue;
}

#main {
  background-color: lightblue;
  overflow-x: hidden;
  padding-left: 10px;
  padding-top: 10px;
  margin: 0px;
  width: 720px;
}

section {
    padding: 0px;
}

#panelContainer {
  width: 700px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #bbb;
  height: 855px;
  overflow-y: auto;
}

#propertiesPanel {
    height: 0px;
}

#lessonsPanel {
    height: 0px;
}

#exportPanel { 
    height: 0px;
}

#exportPanel div {
    top: 200px;
    position: relative;
}

.w-tab {
    margin-left: 5px;
}

.w-tab li {
  background-color: #86c5da;
}

.w-tab li.w-active {
  background-color: #d4ebf2;
  border-bottom: 0px;
}

.w-tab-content {
  background-color: #d4ebf2;
}

.w-form {
    top: 0px;
    border: 0px;
    padding: 0px;
    margin: 0px;
    visibility: hidden;
}

#propertiesPanel .w-form-group .w-file-input, #propertiesPanel .w-form-group input[type=text], #propertiesPanel .w-form-group input[type=password], #propertiesPanel .w-form-group select, #propertiesPanel .w-form-group textarea, #propertiesPanel .w-form-group label {
    display: inline;
    width: 55%
}

.w-form .w-form-group {
  margin: 0;
}

#propertiesPanel .w-form-group label {
    display: inline-table;
    width: 42%;
    text-align: right;
    padding-right: 10px;
}

#lessonsPanel .w-form-group .w-file-input, #lessonsPanel .w-form-group input[type=text], #lessonsPanel .w-form-group input[type=password], #lessonsPanel .w-form-group select, #lessonsPanel .w-form-group textarea, #lessonsPanel .w-form-group label {
    display: inline;
    width: 80%
}

#lessonsPanel .w-form-group label {
    display: inline-table;
    width: 5%;
    text-align: right;
    padding-right: 10px;
}

.lessonGroup {
    padding-left:  40px;
}

.lessonDescriptionGroup {
    padding-left: 45px;
}

.linksGroup {
    padding-left:  0px;
}

.closeIcon {
    vertical-align: middle;
}

.closeIcon svg {
    width: 15px;
    margin-top: 5px;
    vertical-align: middle;
}

.linkIcon {
    vertical-align: middle;
}

.linkIcon svg {
    width: 15px;
    margin-top: 5px;
    vertical-align: middle;
}

.addButton {
    margin-top: 10px;
}

#message {
    display: inline-flex;
    width: 600px;
    overflow: hidden;
    top: -100;
}

#message p {
    width: 550px;
    margin-left: 20px;
}

#message span svg {
    margin-top: 20px;
}

#message span {
    height: 45px;
}

#alert {
    display: inline-flex;
    width: 600px;
    overflow: hidden;
}

#alert p {
    width: 550px;
    margin-left: 20px;
}

#alert span svg {
    margin-top: 20px;
}

#alert span {
    height: 45px;
}

.w-active {
    visibility: visible !important;
    height: auto; 
}

这就是获得所需外观所需的所有CSS。大多数情况是将图标放置在正确的位置，正确隐藏使用选项卡选择不可见的面板，并设置背景颜色。

放置好CSS后，“ 属性”选项卡如下所示：

“ 课程”选项卡如下所示：

并且，“ 导出”选项卡如下所示：

它们并不完全像线框，但我喜欢这种外观。

结论

在本教程中，我向您介绍了如何在Markdown for Envato中创建用于创建课程表的基本Web应用程序。该项目仅显示了前端图形，但是演示了如何使用Webknife快速创建Web应用程序或网站的外观。有比我在这个项目中可以使用的更多的元素。您现在就可以进行实验。因此，在Webknife中创建一些新内容。