分类目录归档:HTML

HTML

获取谷歌电子表格作为JSONP的新版本

< 警告 >
我建议你​​获得额外的谷歌帐户仅用于公众。因为如果你按照我的步骤,您的Gmail地址将是对公共JSONP文件。

< 新版Google表格 >
谷歌电子表格的老版本可以共享电子表格为XML,JSON和某种格式。我想新的版本没有这样的共享功能。但是,我发现谷歌电子表格的新版本很好的解决方案上的StackOverflow的问题的答案。
Unable to publish specific cells in new Google Spreadsheets – StackOverflow ( 用英语 )
根据以上的页面,这个API是一种旧的API。没有人知道,当它停止。我不在乎这种情况。但是,如果你不喜欢的情况,我不建议你使用这个API。

< URL格式 >

https://spreadsheets.google.com/feeds/cells/[ 您的电子表格的关键 ]/od6/public/values?min-row=[ 开始行号 ]&max-row=[ 结束行数 ]&min-col=[ 开始列数 ]&max-col=[ 结束列号 ]&alt=json-in-script&callback=[ 回调函数名 ]

< 如何使用它? >
JSONP格式很容易在JavaScript中使用。没有人需要解析器。但我想使用URL生成器来使API更加有用。所以我开发了从转换页面参数到URL参数下谷歌的语法的脚本。

< jQuery插件 >
我开发了一个名为 “generateGoogleJsonpUri” 这个jQuery插件。
generateGoogleJsonpUri – github
我创建示例页面就像一个博客框架来测试我的插件。
https://mecrazy.net/sample/generateGoogleJsonpUri/
如果你愿意,请复制其源作为一个例子。

< 用法 – 铸件 >
铸造语法为

var test = $.genJsonpGDU("<把你的电子表格关键就在这里>");

var test = $.genJsonpGDU({key:"<把你的电子表格关键就在这里>"});

你可以找到一个关键在电子表格中的URL。这是我下面的示例。
spreadsheet_sample_001
关于这个图片,URL是 “https://docs.google.com/spreadsheets/d/1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw/edit#gid=0″。关键我的电子表格是 “1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw”。请检查您的电子表格的网址,让您的密钥。

< 用法 – 配置寻呼机 >

test.pager({
  startRow:2,//行号开始得到 (需要)
  minCol:2,//列号开始得到 (需要)
  maxCol:7,//最后得到的列号 (需要)
  recsPerPage:5//在一个页面记录 (可选)
});

请比较上面的语法和下表。当你看到下面的表格,请想象一下Excel或任何形式的电子表格。语法上面表示第一页的范围是粉红色的范围,第二页是绿色的范围。 “B2:G2″ 是第一条记录。”B6:G6” 是第五记录。

A1 B1 C1 D1 E1 F1 G1 H1
A2 B2 C2 D2 E2 F2 G2 H2
A3 B3 C3 D3 E3 F3 G3 H3
A4 B4 C4 D4 E4 F4 G4 H4
A5 B5 C5 D5 E5 F5 G5 H5
A6 B6 C6 D6 E6 F6 G6 H6
A7 B7 C7 D7 E7 F7 G7 H7
A8 B8 C8 D8 E8 F8 G8 H8
A9 B9 C9 D9 E9 F9 G9 H9
A10 B10 C10 D10 E10 F10 G10 H10
A11 B11 C11 D11 E11 F11 G11 H11
A12 B12 C12 D12 E12 F12 G12 H12
A13 B13 C13 D13 E13 F13 G13 H13

< 用法 – 获取页面的URL >
这是一个例子,得到第一页的URL。

var pageUrl = test.page(1);

( “test.pager(客体)” 是执行该功能之前需要。 )

< 用法 – 执行Ajax >
参数为 “test.ajax” 相同 “http://api.jquery.com/jQuery.ajax/“。

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
  }
});

如果你想知道当前页面上一页或下一页,请在 success 功能,检查参数使用 “test.get()”。
If you want to know current page has previous page or next page, please use “test.get()” in success function and check parameters.

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
    var param = test.get();
    if(param.pager.prev){
      console.log('当前页面有上一页。');
    }else{
      console.log('当前页面没有上一个页面。');
    }
    if(param.pager.next){
      console.log('当前页面翻页。');
    }else{
      console.log('当前页没有翻页。');
    }
  }
});

< 用法 – JSON转换为二维数组 >
“test.jsonToArr” 把来自谷歌的JSON格式,以二维数组。

test.ajax({
  url:test.page(1),
  success:function(json){
    var arr2d = test.jsonToArr(json);
    console.log(arr2d);
  }
});

< 用法 – 变量缓存 >
如果你想使用JavaScript变量来启用分页缓存,请按照下面的语法。

test.set({cache:true});

这种说法切换到使用缓存分页。它会检查更新日期JSONP每20分钟的默认。如果日期改变,它会自动清除缓存。如果你想改变的时间间隔,检查日期。你可以用它代替上面的语法类似下面的语法。

test.set({
  cache:true,
  cacheInterval:{
    sec:0,min:50,hour:0
  }
});

< 后记 >
有新的和旧的谷歌电子表格之间的基本区别。

 
最大的细胞 2000000细胞 400000细胞
最大列 无限 每张256列

我认为新版本是令人难以置信的大,免费的数据库。我想找到新的谷歌电子表格有趣的用法。

对于Bootstrap3基本HTML生成

< 这是什么? >
它产生基本的HTML源Bootstrap 3。您可以选择的选项,当你生成它。我经常用这个自己。如果你愿意,请添加书签。


< 发电机 >
页面标题 :
语言代码 :
版本的Bootstrap级 :
兼容旧的IE浏览器 :
使用固定导航栏 :
使用粘性页脚 :
使用jQuery故障转移 :
使用jQuery UI故障转移 :
使用backbone.js :
使用underscore.js :
使用bootbox :

如果您选择 “兼容旧的IE浏览器”,“是的”,你需要把 “bootstrap.min.css” 和 “respond.min.js” 您的服务器上。基本上是 “respond.min.js” 不正确的CDN和其他服务器的工作。

< Scripts >
您可以下载HTML使用脚本。你可以把你的服务器上,并替换脚本路径。
Bootstrap
jQuery
jQuery UI
backbone.js
underscore.js
bootbox
html5shiv
Respond.js
( BootstrapRespond.js都需要下载旧IE浏览器。请注意。 )

让STINGER3(WordPress主题)通过WPML兼容(多语言插件)

< 什么是WPML? >
它是一个多语种的WordPress插件。我使用WPML这个mecrazy博客。
WPML的官方网站

< 什么是STINGER3? >
这是一个主题为WordPress。它有许多不错的功能,而无需插件。例如,代码段插入器的广告(如谷歌的Adsense)和酷设计社交按钮。我一直想尝试使用这个主题。
STINGER3的官方网站(日本人页)

< 希望温和的活动 >
STINGER3的开发商是太忙,无法在Twitter上回答,我不知道他能读懂语言日语以外。如果您有关于STINGER3任何问题,我希望你找到对谷歌的答案或自己解决问题。

< 对于谁也看不懂日文的人 >
STINGER3的官方网站是在日本。我认为这是很难找到的主题zip文件的下载链接。你应该找到日语单词“ダウンロード”。这意味着“下载”在中国。请使用 CTRL + F 找到这个词。请查找当前版本的文件名“stinger3ver20140327.zip”。

< 为了兼容代码 >
下面的代码给WPML兼容STINGER3。

<style type="text/css">

.submenu-languages{
  background-color:#f3f3f3;
  border-style:solid;
  border-color:#dedede;
  border-width:0px 1px 1px 1px;
  position:absolute;
  margin-left:-11px;
  margin-top:21px;
  padding-bottom:5px;
  display:none;
}
.submenu-languages > li{
  white-space:nowrap !important;
  float:none !important;
  display:inline-block !important;
}

.iclflag{ vertical-align:middle;position:relative !important;top:-1px !important; }
#lang_sel{ z-index:1000; }
#lang_sel a{ display:block; }
#lang_sel ul,#lang_sel li,#lang_sel a{
  margin:0px;padding:0px;
  width:300px;
  text-align:left;
  white-space:nowrap;
}
#lang_sel ul,#lang_sel li{ margin:0px !important;padding:0px !important; }
#lang_sel a{ margin:0px !important;padding:0px 7px !important; }
#lang_sel li,#lang_sel a,#lang_sel span{
  height:30px !important;
  line-height:30px !important;
  font-size:14px;
}
#lang_sel > ul > li > ul{ top:31px; }

</style>
<script type="text/javascript">
jQuery(function($){
var langMenuObj = $('.submenu-languages').eq(0);
var wpmlMobile = (typeof(window.orientation) != "undefined");
$('.menu-item-language-current').eq(0).on('mouseenter',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeIn('fast');}
}).on('mouseleave',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeOut('slow');}
}).on('click',function(){
langMenuObj.stop(true,true).toggle();
});
$('.icl_lang_sel_current ').parent().click(function(){ return false; });
});
</script>

< 如何插入代码? >
有3个例子的方式来插入代码。请选择其中之一。或者,如果你知道如何自定义WordPress的,你可以手动插入到你的PHP脚本。

< 方法 – 1 >
进入管理员菜单[ 外观 – 小工具 ]。请加“文本”一个有效的区域。请不要输入标题,把脚本只在细节的形式。

< 方法 – 2 >
我开发了一个插件STINGER3 loves WPML。这个插件做同样的事情“方法 – 1”。如果您发现错误,请报告或告诉我在GithubTwitter Google+或。

< 方法 – 3 >
使用WordPress插件”Wp Insert“。它可以插入HTML代码,在您的博客的任何地方。

< 后来 >
我觉得每一个方法都没有那么困难。但STINGER3的当前版本是不符合语言的mo文件兼容。我们只能翻译与WPML的字符串翻译。如果我有空闲时间,我想开发补丁STINGER3与mo文件兼容。

< 更新于2014年6月11日 >
固定 – 它不能处理的Android或iOS的浏览器第一次点击的事件。此页面上的源代码和WordPress插件Github上进行更新。

生成动态网页只能用谷歌驱动器

< 警告 >
我建议你​​获得额外的Google账户仅适用于大众。
因为如果你按照我的步骤,您的Gmail地址将是对公共的XML文件。

< 于2014年7月9日新的解决方案 >
我写的帖子获取谷歌电子表格作为JSONP的新版本。如果你想使用谷歌电子表格的新版本,生成动态网页,而不是旧版本,请参阅该职位。

< 更新于2014年4月26日 >
请在谷歌网上商店,而不是Drive Notepad使用Anyfile Notepad或任何其他文本编辑器应用程序的谷歌驱动器。因为Drive Notepad从存储中删除。

< 更新于2014年5月12日 >
嘿!Drive Notepad是回到谷歌网络商店!

< 推荐 >
我建议你安装“Drive Notepad”。这对谷歌驱动器的扩展。当您安装驱动记事本,你需要Chrome。但在连接Drive Notepad到云端硬盘后,Chrome浏览器不是必需的。您可以在任何浏览器中使用驱动器记事本。
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< 从电子表格更新内容 >
您需要使用“谷歌电子表格的版本1”。由于“第2版”不支持CSV和XML共享爱好。 (我在2014年4月19日写了这篇文章。)如果你平时生成新的电子表格的今天,它会自动进行版本2。

谷歌解释上”试用新版Google表格“新的电子表格。

我担心CSV和XML共享不会在版本2的支持,所以我检查也”新版Google表格不支持的功能“。但这个功能没有在该网页上列出。是的…没有上市……但没有人知道什么时候谷歌改变主意….
你可以同意这个情况?

让我们进入https://g.co/oldsheets生成一个电子表格中第1版。

这是我的样品。

它只是一张纸。它头,3列和2列。
( 我要生成imgur图像的网站。 )

< 让我们把它公开 >
按照下面的图片。
publish_to_the_web_zh-hans

选择“发布到网络”,推动“开始发布”。
请参阅“获取已发布数据的链接”一节。
publish_to_the_web_2_zh-hans
你可以得到你的电子表格作为网页,HTML,CSV,TXT,PDF,ATOM,RSS,XLS和ODS.If要同步的电子表格到您的网站,你应该选择CSV,ATOM或RSS。这些都是很容易的格式进行同步。当您选择其中之一,你可以找到功能选择列和行。该功能可以使每个请求更小的文件大小。

如果您选择CSV,选择范围之前,请选择目标表。样品是像下面的图片。
select_sheet_zh-hans
在我的范例,”A1″为标题。我想获得最大的5行。所以我设定的范围”A2:A6″。
select_cell_zh-hans
您可以在URL中找到”range=A2%3AA6″。如果你想分页功能添加到您的网站,您应该动态地更改为”range”通过Javascript的参数。

< 是不是很难? >
不要担心。我在这里写的Javascript代码。
https://github.com/mecrazy/generateGoogleDriveUri
这个脚本是使用CSV,ATOM和RSS格式兼容。这是唯一的URI发生器。它不具有解析器。如果您选择ATOM或RSS,您可以使用jQuery作为一个解析器。

请使用”generateGoogleDriveUri.min.js”象下面这样。

<!DOCTYPE html>
<html>
<head>
<title>样本页面</title>
<script src="js/generateGoogleDriveUri.min.js"></script>
<script type="text/javascript">
window.onload = function(){

//Casting object
var gduObj = new genGDU('把一个链接在这里公布的数据');

//Generate URI
var atomUri = gduObj.genUri(
  'atom', // 我选择ATOM格式。
  {
    startRow:2, //从第2行开始
    startCol:1, //从山坳1开始
    cols:1, //剪下1列
    rows:5, //切每页5行
    page:1 //获取第一页
  }
);

var html = '<a href="' + atomUri + '" target="_blank">' + atomUri + '</a>';
document.getElementById('sample').innerHTML = html;

}
</script>
</head>
<body id="sample"></body>
</html>

< 添加的index.html和Drive Notepad设置 >
当你在Chrome添加Drive Notepad,你可以找到关于创建谷歌驱动器的菜单”Text Document”。
add_index_zh-hans
如果这是你第一次使用Drive Notepad,你会被要求像下面。
permission_01_en_us
按”Login and/or grant app permissions…”并接受以下问题。
permission_02_zh-hans

请更改文件名以”index.html”会。保存文件后,关闭该选项卡。
change_file_name_en_us

请更改设置有关”管理应用”。
manage_apps_zh-hans
请检查驱动器记事本排的”默认情况下使用”。
use_by_default_zh-hans
在此之后,您可以使用Drive Notepad像谷歌驱动的其他应用程序。

< 更改共享设置 >
选择您的文件夹设置公开。
在此之后,按照下面的图片。
set_sharing_enabled_01_zh-hans
设置“在网络上公开”入选。
set_sharing_enabled_02_zh-hans

< 准备的HTML,CSS,Javascript代码 >
使用Drive Notepad让他们做好准备。
或用自己的文字编辑器来编辑和上传。
我的相对位置是象下面这样。
my_public_tree_zh-hans

下面的链接是谷歌电子表格创建我的网页。
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
如果你愿意,请使用来源为样本。

< 额外的程序 >
我公司开发imgur的URL转换为我的网页。如果你愿意,请用这个。
https://github.com/mecrazy/imgurUrlConverter