正文 

当前位置： 首页 > 技术 > java教程

markdownfreecodecamp：构建维基百科查看器(代码片段)

author author     2022-12-16     690

关键词： 

@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Rokkitt:700);

// Colors
$blue: #092B40;
$lightBlue: #85DEF2;
$water: #52A5D9;
$sky: #5BB5D9;
$orange: #D96F32;

*  
  box-sizing: border-box;


html, body, main 
  font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;

  position: relatiave;
  margin: 0; padding: 0;
  padding-top: 10px;
  width: 100%; height: 100%;
  background-color: $blue;


input[type='text'] 
  -webkit-appearance: none;
  outline: none;
  border: none;


.wrapper 
  display: flex;
  width: 100%;
  @include display(flex);
	@include flex-direction(column);
	@include align-items(center);
	@include justify-content(center);
  @include transition(all 2s linear);


.fullHeight  
  height: 100%; 
  @include transition-duration(2s);


.white-text 
  color: white;
  text-decoration: none;


form 
  position: relative;
  display: block;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-left: 0;
  padding: 0;
  margin-bottom: 10px;
  border: 4px solid $orange;
  border-radius: 20px;
  
  @include transition(all .25s ease .3s);
  cursor: pointer;
  &:before 
    @extend %def;
    top: 90%;
    left: 90%;
    width: 16px;
    height: 3px;
    background-color: $orange;
    border-radius: 1px;
    @include transition(width .15s ease .55s);
    @include transform(rotate(45deg));
    @include transform-origin(top left);
  
  input 
    width: 100%;
    height: 100%;
    padding: 0 30px 0 15px;
    font-size: 14px;
    line-height: 38px;
    opacity: 0;
    background-color: transparent;
    color: white;
    @include transition(opacity .15s ease);
  


.eks 
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 20;
	width: 30px;
	height: 30px;
	cursor: pointer;	
	@include transform(translateY(-50%));
	&:before, &:after 
		@extend %def;
		right: 5px;
		height: 2px;
		width: 2px;
		border-radius: 1px;
		@include transition(all .25s ease);
	
	&:before 
		top: 0px;
		background-color: $orange;
		@include transform(rotate(-45deg));
		@include transform-origin(top right);
		@include transition-delay(.1s);
	
	&:after 
		bottom: 0px;
		background-color: $orange;
		@include transform(rotate(45deg));
		@include transform-origin(bottom right);
		@include transition-delay(0s);
	


form.open 
  width: 260px;
  @include transition-delay(.1s);
  &:before 
    width: 0px;
    @include transition-delay(0s);
  
  input 
    opacity: 1;
    @include transition-delay(.15s);
  
  .eks 
    &:before, &:after 
      width: 15px;
      right: 12px;
    
    &:before 
      top: 9px;
      @include transition-delay(.25s);
    
    &:after 
      bottom: 9px;
      @include transition-delay(.3s);
    
  


ul 
  margin-left: 0; padding-left: 0;
  width: 80%;
  
  a 
    text-decoration: none;
    color: black;
    
    h1 
      font-size: 18px;
    
    p 
      font-size: 14px;
    
  
  li 
    list-style-type: none;
    display: block;
    margin-bottom: 10px;
    padding: 15px 30px 5px 30px;
    background-color: #E7E7E8;
    opacity: 0;
    @include animation(new-item 1s ease-in-out forwards);
    @include transition-timing-function(cubic-bezier(0.6, 0, 0.4, 1.0));

    &:hover 
      border-left: 5px solid $orange;
      margin-left: -5px;
      //box-shadow: inset 2px -2px 0 $orange;
    
  


.hide 
  display: none;


%def 
  content: '';
  position: absolute;
  display: block;


@include keyframes(new-item) 
  0%  opacity: 0; 
    -webkit-transform: translateY(2000px); 
  80%  opacity: 0; 
  100%  opacity: 1;
    -webkit-transform: translateY(0); 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.2/angular-animate.min.js"></script>

var app = angular.module('WikiApp', ['ngAnimate']);
app.controller('MainCtrl', function($scope, $http, $timeout) 
  var form = $('form');
  var close = $('.eks');
  var input = $('input');
  var search = $("#search");
  var help = $("#help");
  
  $scope.results = [];

  close.on('click', function() 
    form.toggleClass('open');
    
    if (!form.hasClass('open') && $scope.searchTxt !== '' && typeof $scope.searchTxt !== 'undefined') 
	    search.toggleClass('fullHeight')
      help.toggleClass('hide');
      $scope.searchTxt = '';
     
    $scope.results = [];
    $scope.$apply();
  )

  input.on('transitionend webkitTransitionEnd oTransitionEnd', function() 
    if (form.hasClass('open')) 
      input.focus();
     else 
      return;
    
  )

  $scope.search = function() 
    $scope.results = [];
    help.addClass('hide');
    search.removeClass('fullHeight');
    var title = input.val();
    var api = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=';
    var cb = '&callback=JSON_CALLBACK';
    var page = 'https://en.wikipedia.org/?curid=';
    
    $http.jsonp(api + title + cb)
    .success(function(data) 
      var results = data.query.pages;
      angular.forEach(results, function(v,k)  
        $scope.results.push(title: v.title, body: v.extract, page: page + v.pageid)
      )
    );
  
);
main(ng-app='WikiApp' ng-controller='MainCtrl')
  #search.wrapper.fullHeight
    a.white-text(href='https://en.wikipedia.org/wiki/Special:Random' target='_blank') Click here for a random article
    br
    form(ng-submit='search()')
      input(type='text' ng-model='searchTxt')
      .eks
    p.white-text#help Click icon to search
  .wrapper
    ul
      a(ng-href='result.page' target='_blank' ng-repeat='result in results')
        li
          h1 result.title
          p result.body
freeCodeCamp : Build a Wikipedia Viewer
---------------------------------------
Search wikipedia by clicking on the search icon, providing your search and press return.

Forked from [Geoff Storbeck](http://codepen.io/GeoffStorbeck/)'s Pen [Wikipedia Search](http://codepen.io/GeoffStorbeck/pen/MwgQea/).

Forked from [Free Code Camp](http://codepen.io/FreeCodeCamp/)'s Pen [Wikipedia Search](http://codepen.io/FreeCodeCamp/pen/pgNRvJ/).

A [Pen](https://codepen.io/harunpehlivan/pen/vdoxoR) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/vdoxoR/license).

markdownfreecodecamp：全球地图数据(代码片段)

查看详情

markdownfreecodecamp：打造生命游戏(代码片段)

查看详情

markdownfreecodecamp：使用scatterplotgraph可视化数据(代码片段)

查看详情

markdownfreecodecamp：使用条形图可视化数据(代码片段)

查看详情

jenkins+github持续集成构建docker容器，维基百科&人工自能（ai）模块

本文分两部分，第一部分是手动计划任务的方式构建Github上的Docker程序，第二部分是用GithubwebhookTrigger一个自动构建任务。Jenkins采用2.5版本Docker采用1.7.1代码托管使用的Github官网系统为IBMBluemix提供的Cent6.7，服务器地址在美国南... 查看详情

汉语语法

...文本分类、命名实体识别、句法分析、信息抽取、知识库构建、主题词识别、自动摘要、智能问答、语义理解、对话生成、话题推荐、语言模型、机器翻译、语义表示等方面在中文中的快速发展和广泛使用，必须很好的掌握汉语... 查看详情

xoops-模块-mediawiki维基百科

XOOPS-模块-MediaWiki维基百科克隆维基百科模块修改LocalSettings.php文件本文件修改了MediaWiki数据库表名的前缀，所修改的代码行已用Cloneable标记出。<?php/** *Configfileformediawiki * *ThefileiscomposedofXOOPSbasicpreferencesandmediawikiLocal 查看详情

复数的辐角（维基百科）

    查看详情

mediawiki怎么标记需要翻译的内容？

RT参考技术AMediaWiki维基百科维基百科[wéijībǎikē]维基百科，是一个基于维基技术的多语言百科全书协作计划，用多种语言编写的网络百科全书。非营利组织维基媒体基金会负责营运维基百科，接受捐赠。2018年12月，维基百科入... 查看详情

html维基查看器(代码片段)

查看详情

python维基百科摘要(代码片段)

查看详情

markdown我的维基(代码片段)

查看详情

流形（维基中文版）

原文地址：https://blog.csdn.net/libing_zeng/article/details/81568954 查看详情

关于8月31日维基解密被攻击的观察与分析

十几天前，维基解密遭受了一次攻击，导致很多访问者看到了“OurMine”的声明，他们声称已经获取了维基解密服务器的控制权。这次攻击之后，很多人（包括维基解密的粉丝及其死对头）在没有基础知识与技术功底，且未查明... 查看详情

python维基百科部分循环(代码片段)

查看详情

text维基百科查看器(代码片段)

查看详情

php我觉得维基百科(代码片段)

查看详情

phpphpbot获取维基百科的定义(代码片段)

查看详情