如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、什么是跨域訪問
舉個栗子：在A網站中，我們希望使用Ajax來獲得B網站中的特定內容。如果A網站與B網站不在同一個域中，那么就出現了跨域訪問問題。你可以理解為兩個域名之間不能跨過域名來發送請求或者請求數據，否則就是不安全的?？缬蛟L問違反了同源策略，同源策略的詳細信息可以點擊如下鏈接：Same-origin_policy；
總而言之，同源策略規定，瀏覽器的ajax只能訪問跟它的HTML頁面同源（相同域名或IP）的資源。
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數據訪問的問題。
由于同源策略，一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用<script>元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解，小伙伴可以自行去百度。
JQuery Ajax對JSONP進行了很好的封裝，我們使用起來很方便。前端示例：
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //訪問的鏈接 dataType:"jsonp", //數據格式設置為jsonp jsonp:"callback", //Jquery生成驗證參數的名稱 success:function(data){ //成功的回調函數 alert(data);
},
error: function (e) { alert("error");
}
});
需要注意的地方是：
后端要配合使用jsonp，那么首先得了解Jquery Ajax jsonp的一個特點：
Jquery在發送一個Ajax jsonp請求時，會在訪問鏈接的后面自動加上一個驗證參數，這個參數是Jquery隨機生成的，例如鏈接
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
中，參數callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自動添加的。
添加這個參數的目的是唯一標識這次請求。當服務器端接收到該請求時，需要將該參數的值與實際要返回的json值進行構造（如何構造下面講解），并且返回，而前端會驗證這個參數，如果是它之前發出的參數，那么就會接收并解析數據，如果不是這個參數，那么就拒絕接受。
需要特別注意的是這個驗證參數的名字（我在這個坑上浪費了2小時），這個名字來源于前端的jsonp參數的值。如果把前端jsonp參數的值改為“aaa”，那么相應的參數就應該是
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046
知道了Jquery Ajax Jsonp的原理，也知道了需要接受的參數，我們就可以來編寫服務器端程序了。
為了配合json，服務器端需要做的事情可以概括為兩步：
根據與前端Ajax約定的jsonp參數名來接收驗證參數，示例如下（使用SpringMVC，其他語言及框架原理類似）
@ResponseBody @RequestMapping("/getJsonp") public String getMySeatSuccess(@RequestParam("callback") String callback){
將接收的的驗證參數callback與實際要返回的json數據按“callback(json)”的方式構造：
@ResponseBody
@RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
Gson gson=new Gson(); //google的一個json工具庫 Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12"); return callback+"("+gson.toJson(map)+")"; //構造返回值 }
最終，前后端的相應代碼應該是這樣的：
前端
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //訪問的鏈接 dataType:"jsonp", //數據格式設置為jsonp jsonp:"callback", //Jquery生成驗證參數的名稱 success:function(data){ //成功的回調函數 alert(data);
},
error: function (e) { alert("error");
}
});
后端
@ResponseBody
@RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
Gson gson=new Gson(); Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12");
logger.info(callback); return callback+"("+gson.toJson(map)+")";
}
需要注意的是：
完整的示例就是上面兩段代碼，這里就不提供Github連接了。上面的示例親測有效，如果有遇到問題的，歡迎留言提問。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
有時候當小程序向后臺拿數據是一篇html標簽的文章時，把它放進小程序會發現很多標簽就不兼容，如果要一個個改又很麻煩，有沒有方法可以很快地兼容html標簽呢？
有個工具可以做到：wxParse
下載了它的壓縮包后解壓，復制wxParse文件夾放到小程序pages頁面里：
在wxml里引入，這里的路徑僅供參考：
<import src="../../../../wxParse/wxParse.wxml" /> <view> //在需要放置html文本的地方使用wxParse模板 <template is="wxParse" data="{{wxParseData:content.nodes}}" /> </view>
在js里引入：
let wxparse = require("../../../../wxParse/wxParse.js");
Page({ /**
* 頁面的初始數據
*/ data: {
content: '' },
onLoad: function(options) { var that = this;
..... /**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數據名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數據(必填)
* 4.target為Page對象,一般為this(必填)
* 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
*/ wxparse.wxParse('content', 'html', result.data.content, that);
}
在wxss引入：
@import "../../../../wxParse/wxParse.wxss";如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
親測必須將代碼放在記事本中，改成html格式，在用IE運行（必須）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>顯示指定驅動器的大小及可用空間</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<form name="form1" method="post" action="">
盤符：
<input type="text" name="text1">
<input type="button" name="Button1" value="磁盤空間" onclick="DriveSize(document.form1.text1)">
</form>
<script language="javascript">
<!--
function DriveSize(Drivename)
{
var fso=new ActiveXObject("Scripting.FileSystemObject");
var s=fso.GetDrive(Drivename.value);
if (s.IsReady)
{
var str,str1，AllSize=0.0;
str="當前驅動器的名稱為:"+s.DriveLetter+"\n";
AllSize=s.TotalSize/1024/1024/1024;
str=str+"當前驅動器的大小為:"+parseInt(AllSize*10)/10+"\n";
AllSize=s.FreeSpace/1024/1024/1024;
str=str+"當前驅動器的可用空間為:"+parseInt(AllSize*10)/10;
alert(str);
}
else
alert("該驅動器無效。")
}
//-->
</script>
</body>
</html>
運行：
結果：單位為g
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Bootstrap Table實現定時刷新數據
推薦第二種方法
1、毀掉表格，再查詢數據后append，如果你查大量的數據（例如：查詢很多渠道的信息），而獲取服務器數據又太慢，你就會看到表格在一行一行的增加
setInterval(function() { queryAll();
}, 30000);
function queryAll() { updateRealTimeData();
.
.
.
.
}
function updateRealTimeData() { if(errorFlag || appid == -1) return; //把表格的tbody移除，不然后面會一直添加 $("#realTimeTable").bootstrapTable('removeAll'); //獲取數據 $.ajax({
data: { //向服務器發送的一些參數，像日期，游戲ID什么的 .
.
.
.
.
},
type: "post", //url不用說了吧，否則不知道向服務器哪個接口發送并請求 url: *******,
async: true, //超時時間 timeout:30000,
success: function(msg) { if(msg.code == '1') { //定義的函數實現對表格賦值，自定義想傳的參數，但別忘了msg，不然搞個屁 showTableData(msg，……);
}
}
});
}
function showTableData(msg，……) { tableData = []; for(var i = 0; i < json.length; i++) {
tableData.push({ //這里也就是data-field的名稱，getDate是服務器返回的字段名 date: json[i].getDate,
.
.
.
.
}) //數組反向排列，看情況使用 tableData.reverse(); //向tbody里面添加數據 $("#realTimeTable").bootstrapTable('append', tableData);
}
}
2、使用updateRow方法
setInterval(function() { queryAll(); for (var j = 0; j < 請求的數據的總條數（也就等于表格的行數）; j++) {
changeAllChannelRealTime(j, .....);
} }, 30000);
function changeAllChannelRealTime(j, .....) {
$.ajax({
data: { //向服務器發送的一些參數，像日期，游戲ID什么的 .
.
.
.
.
},
type: "post", //url不用說了吧，否則不知道向服務器哪個接口發送并請求 url: *******,
async: true, //超時時間 timeout:30000,
success: function(msg) { if (msg.code == '1') {
changeData(j, msg, .....);
}
},
error: function () { msgToast.error("查詢數據出錯");
}
});
}
function changeData(i,msg,......){ $('#realTime_Table').bootstrapTable('updateRow', { //i表示第幾行，從0開始 index: i,
row: { //這里也就是data-field的名稱,*表示字段名 date: msg.*
.
.
.
.
}
});
}
大象~ 大象~ 你的鼻子怎么那么長~~
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
關于 node 環境升級到 v8^ 以上，node-sass 報錯的解決方法
今天給同事電腦升級了一下系統，順便升級了所有的軟件，發現原來好好的項目報錯了。報錯大致信息如下：
ERROR Failed to compile with 1 errors 下午1:56:26 error in ./src/components/Hello.vue Module build failed: Error: Missing binding /Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/vendor/darwin-x64-57/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x Found bindings for the following environments: - OS X 64-bit with Node.js 6.x This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass --force` to build the binding for your current environment.
at module.exports (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/lib/binding.js:15:13) at Object.<anonymous> (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/sass-loader/lib/loader.js:3:14)
at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2d1bdf0c","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 4:14-394 13:3-17:5 14:22-402 @ ./src/components/Hello.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
> Listening at http://localhost:8080
這段代碼是我升級node之后，在我的電腦上復制出來的。但大概就是這么個意思，里面根據不同的項目位置什么的，會有所不同。
簡單的說，這段代碼就是告訴你，node-sass 不兼容 node v8 的版本。那就很好解決了。在當前項目下面執行
npm i node-sass -D
然后項目就恢復正常了。
當項目出錯之后，不要著急，仔細看下報錯代碼，實在不行用翻譯工具翻譯一下。一般來說，是很快能夠找到解決方法的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
本章節介紹CefSetting各種設置
CefExample.Init(osr: false, multiThreadedMessageLoop: multiThreadedMessageLoop, browserProcessHandler: browserProcessHandler);
這個方法就是Cef的初始化設置。里面有一些設置是已經注釋的，每項設置我也沒有詳細研究，感興趣的朋友可以自己看看代碼和注釋。這里我只說說幾個比較重要的設置。
//設置語言環境是中文環境
settings.Locale = "zh_CN";
//遠程調試端口
settings.RemoteDebuggingPort = 8088;
//瀏覽器緩存的路徑,可以設置到某個磁盤，默認設置是在軟件運行目錄下面。
settings.CachePath = "cache";
//讓瀏覽器的消息循環在一個單獨的線程中執行,建議設置成true,具體含義看看瀏覽器消息處理。
settings.MultiThreadedMessageLoop = true;
//這個我理解不到，只有看源碼的注釋;
settings.ExternalMessagePump = false;
//獲取本機internet代理設置。
var proxy = ProxyConfig.GetProxyInformation();
switch (proxy.AccessType)
{
case InternetOpenType.Direct:
{
//Don't use a proxy server, always make direct connections.
settings.CefCommandLineArgs.Add("no-proxy-server", "1");
break;
}
case InternetOpenType.Proxy:
{
settings.CefCommandLineArgs.Add("proxy-server", proxy.ProxyAddress);
break;
}
case InternetOpenType.PreConfig:
{
settings.CefCommandLineArgs.Add("proxy-auto-detect", "1");
break;
}
}
//直接注釋掉，因為這個應用程序已經包含在工程目錄下面
//settings.BrowserSubprocessPath = "..\\..\\..\\..\\CefSharp.BrowserSubprocess\\bin\\" + architecture + "\\Debug\\CefSharp.BrowserSubprocess.exe";
//注冊custom的域名，程序內部資源訪問域名。
//custom://cefsharp/zpy.html這種域名注冊，后續注冊https和test都是使用這種方式，zpy.html就是我自己加載在項目內的html文件?？梢允褂眠@種方式用本地html開發圖形界面。模糊B/S程序和C/S程序。
settings.RegisterScheme(new CefCustomScheme
{
SchemeName = CefSharpSchemeHandlerFactory.SchemeName,
SchemeHandlerFactory = new CefSharpSchemeHandlerFactory(),
IsSecure = true //treated with the same security rules as those applied to "https" URLs
//SchemeHandlerFactory = new InMemorySchemeAndResourceHandlerFactory()
});
//在設置最后使用Cef.AddCrossOriginWhitelistEntry(BaseUrl, "https", "cefsharp.com", false);這些域名添加到白名單。
做完這些以后并且設置好ChromiumWebBrowser后就可以使用Application.Run(browser);啟動瀏覽器。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們把自己的html5網頁，
通過小程序的web-view組件，
加載到小程序。
為了能夠更好的利用小程序本身的功能特性，
會希望從h5頁面跳轉到小程序頁面中去，
我們后面要分享的h5網頁調用小程序支付，
就需要用到這個特性。
這一節課程，
子恒老師跟你分享web-view中的h5頁面怎么跳轉到小程序里去…
猛擊這里，
試看《h5頁面跳轉到小程序》視頻
https://edu.csdn.net/course/play/6970/141895
設置web-view的業務域名——小程序web-view高級用法1
小程序使用web-view打開h5網頁——小程序web-view高級用法2
微信web-view高級用法介紹——小程序web-view高級用法3
小程序web-view JSSDK配置文件說明——小程序web-view高級用法4
web-view的h5頁面設置jssdk選項——小程序web-view高級用法5
小程序web-view打開網頁demo實例——小程序web-view高級用法6
微信web-view用wx.getNetworkType獲取網絡狀態——小程序web-view高級用法7
web-view調用wx.scanQRCode微信掃一掃——小程序web-view高級用法8
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
將
json對象轉化為json字符串，再判斷該字符串是否為"{}"
var obj = {}; var b = (JSON.stringify(obj) === "{}");
console.log(b); // true
for in 循環判斷
var obj = {}; var b = function() { for(var key in obj) { return false;
} return true;
}
console.log(b()); // true
網上很多都是如上的說法，但是會存在一個問題，就是如果obj=null ，obj=undefined，obj=""，obj=[]，obj=0 以及obj為任意數字也返回true，所以有了下面這個for in 循環判斷：
方案一：
var obj = {}; var b = function() { for(var key in obj) { return false;
} if(obj === null || typeof obj !== "object" || Array.isArray(obj)){ return false;
} return true;
}
console.log(b()); // true
方案二：
var obj = {}; var b = function() { for(var key in obj) { return false;
} if(obj === null || typeof obj !== "object" || Object.prototype.toString.call(obj) === "[object Array]"){ return false;
} return true;
}
console.log(b()); // true
上面兩種方案的區別就是判斷判斷空數組的方式不同。
jQuery.isEmptyObject(obj)方法
var obj = {}; var b = $.isEmptyObject(obj);
console.log(b); // true
jQuery.isEmptyObject(obj) 方法依然存在obj=null ，obj=undefined，obj=""，obj=[]，obj=0 以及obj為任意數字返回true的問題，所以我們還應該再用typeof 或者 $.type() 判斷一下：
var obj = {}; var b = $.isEmptyObject(obj) && $.type(obj) === "object";
console.log(b); // true
var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && !Array.isArray(obj);
console.log(b); // true
var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
Object.getOwnPropertyNames()方法
Object.getOwnPropertyNames() 方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數組。
var obj = {}; var b = !Object.getOwnPropertyNames(obj).length;
console.log(b); // true
Object.getOwnPropertyNames() 方法存在obj=0 以及obj為任意數字返回true的問題，所以我們還應該再用typeof 判斷一下：
var obj = {}; var b = !Object.getOwnPropertyNames(obj).length && typeof obj === "object";
console.log(b); // true
Object.keys()方法
Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in循環遍歷該對象時返回的順序一致 。
var obj = {}; var b = !Object.keys(obj).length;
console.log(b); // true
Object.keys() 方法存在obj=""，obj=[]，obj=0 以及obj為任意數字返回true的問題，所以依舊需要加判斷如下：
var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && !Array.isArray(obj);
console.log(b); // true
var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、添加表頭：
復制代碼
二、設置表格屬性：
復制代碼
注：在進行表格設置時必須是“ui->tableView->setModel(model);”在前，屬性具體設置在后，
反之則設置不會生效。如上述代碼所示。
三、添加行（添加三行一樣的信息）：
復制代碼
四、刪除行：
復制代碼
再舉一個例子：
在一個藥品劃價模塊中有這樣的操作流程：
檢索處方項目成功后，把該項目顯示到QTableView里，把需要編輯的數量字段提供給用戶輸入，用戶輸入確認后，該項目留在列表中，然后開始下一項目檢索錄入。
實現過程如下：
錄入的項目保留在臨時表tmp中，界面上的QTableView取名為tbList，與tbList關聯的Model取名為tb1。檢索成功后，把檢索結果插入到臨時表中，把需要編輯的字段提供給用戶。
復制代碼
程序中需要顯示的時候，
復制代碼
程序中需要提供編輯輸入的時候
復制代碼
有一個問題需要注意。向QTableView中添加記錄時，字段一定要完整，不能有空白字段，否則結果無法保存。切記。
如果需要對用戶輸入做限制，比如只能在指定的字段輸入指定的數據類型，可以通過QItemDelegate來實現。
貼一段代碼，說明QTableView基本用法
QT的MVC（View/Delegate）模型十分強大，可以利用各種控件來對表格的輸入進行限制，不過我以前一直沒有過，這幾天研究了一下，寫個小例子，希望大家喜歡。
如果看不懂這個例子，請先看QT的自帶例子：http://qt-project.org/doc/qt-4.8/itemviews-spinboxdelegate.html
思路：
1：為每一列定義委托：
A：第一列是編號列，使用只讀委托，令該列的單元格是只讀的
B：第三列是ID列，只能輸入1－12個數字，利用QLineEdit委托和正則表達式對輸入進行限制
C：第四年齡列，利用QSpinBox委托進行輸入限制，只能輸入1－100之間的數字
D：第五列是性別列，利用QComboBox委托對輸入進行限制，該列的單元格只能輸入Male或Female
E：第六列是頭像列，在該列的單元格中央放置一張頭像
2：定義代理類，把所有單元格中的字符居中顯示。
3：利用QSS，將表格的背景色弄成黃藍相間。
截圖：
上代碼：
1.#include <QtGui>
2.
3.//編號列，只讀委托
4.//這個方法我還真想不到，呵呵
5.class ReadOnlyDelegate : public QItemDelegate
6.{
7. Q_OBJECT
8.public:
9. ReadOnlyDelegate(QObject *parent = 0): QItemDelegate(parent) { }
10. QWidget *createEditor(QWidget*parent, const QStyleOptionViewItem &option,
11. const QModelIndex &index) const
12. {
13. return NULL;
14. }
15.};
16.
17.//ID列，只能輸入1－12個數字
18.//利用QLineEdit委托和正則表達式對輸入進行限制
19.class UserIDDelegate : public QItemDelegate
20.{
21. Q_OBJECT
22.public:
23. UserIDDelegate(QObject *parent = 0): QItemDelegate(parent) { }
24. QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option,
25. const QModelIndex &index) const
26. {
27. QLineEdit *editor = new QLineEdit(parent);
28. QRegExp regExp("[0-9]{0,10}");
29. editor->setValidator(new QRegExpValidator(regExp, parent));
30. return editor;
31. }
32. void setEditorData(QWidget *editor, const QModelIndex &index) const
33. {
34. QString text = index.model()->data(index, Qt::EditRole).toString();
35. QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);
36. lineEdit->setText(text);
37. }
38. void setModelData(QWidget *editor, QAbstractItemModel *model,
39. const QModelIndex &index) const
40. {
41. QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);
42. QString text = lineEdit->text();
43. model->setData(index, text, Qt::EditRole);
44. }
45. void updateEditorGeometry(QWidget *editor,
46. const QStyleOptionViewItem &option, const QModelIndex &index) const
47. {
48. editor->setGeometry(option.rect);
49. }
50.};
51.
52.//年齡列，利用QSpinBox委托進行輸入限制，只能輸入1－100之間的數字
53.class AgeDelegate : public QItemDelegate
54.{
55. Q_OBJECT
56.public:
57. AgeDelegate(QObject *parent = 0): QItemDelegate(parent) { }
58. QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option,
59. const QModelIndex &index) const
60. {
61. QSpinBox *editor = new QSpinBox(parent);
62. editor->setMinimum(1);
63. editor->setMaximum(100);
64. return editor;
65. }
66. void setEditorData(QWidget *editor, const QModelIndex &index) const
67. {
68. int value = index.model()->data(index, Qt::EditRole).toInt();
69. QSpinBox *spinBox = static_cast<QSpinBox*>(editor);
70. spinBox->setValue(value);
71. }
72. void setModelData(QWidget *editor, QAbstractItemModel *model,
73. const QModelIndex &index) const
74. {
75. QSpinBox *spinBox = static_cast<QSpinBox*>(editor);
76. spinBox->interpretText();
77. int value = spinBox->value();
78. model->setData(index, value, Qt::EditRole);
79. }
80. void updateEditorGeometry(QWidget *editor,
81. const QStyleOptionViewItem &option, const QModelIndex &index) const
82. {
83. editor->setGeometry(option.rect);
84. }
85.};
86.
87.//性別列，利用QComboBox委托對輸入進行限制
88.//這一列的單元格只能輸入Male或Female
89.class SexDelegate : public QItemDelegate
90.{
91. Q_OBJECT
92.public:
93. SexDelegate(QObject *parent = 0): QItemDelegate(parent) { }
94. QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option,
95. const QModelIndex &index) const
96. {
97. QComboBox *editor = new QComboBox(parent);
98. editor->addItem("Female");
99. editor->addItem("Male");
100. return editor;
101. }
102. void setEditorData(QWidget *editor, const QModelIndex &index) const
103. {
104. QString text = index.model()->data(index, Qt::EditRole).toString();
105. QComboBox *comboBox = static_cast<QComboBox*>(editor);
106. int tindex = comboBox->findText(text);
107. comboBox->setCurrentIndex(tindex);
108. }
109. void setModelData(QWidget *editor, QAbstractItemModel *model,
110. const QModelIndex &index) const
111. {
112. QComboBox *comboBox = static_cast<QComboBox*>(editor);
113. QString text = comboBox->currentText();
114. model->setData(index, text, Qt::EditRole);
115. }
116. void updateEditorGeometry(QWidget *editor,
117. const QStyleOptionViewItem &option, const QModelIndex &index) const
118. {
119. editor->setGeometry(option.rect);
120. }
121.};
122.
123.//頭像列，只是在單元格中央放一張小圖而已
124.class IconDelegate : public QItemDelegate
125.{
126. Q_OBJECT
127.public:
128. IconDelegate(QObject *parent = 0): QItemDelegate(parent) { }
129. void paint(QPainter *painter, const QStyleOptionViewItem &option,
130. const QModelIndex & index ) const
131. {
132. //show.bmp是在工程目錄中的一張圖片（其實就是QQ的圖標啦，呵呵）
133. QPixmap pixmap = QPixmap("show.bmp").scaled(24, 24);
134. qApp->style()->drawItemPixmap(painter, option.rect, Qt::AlignCenter, QPixmap(pixmap));
135. }
136.};
137.
138.//代理類，把所有單元格中的字符居中顯示
139.class VIPModel : public QStandardItemModel
140.{
141. Q_OBJECT
142.public:
143. VIPModel(QObject *parent=NULL) : QStandardItemModel(parent) { }
144. VIPModel(int row, int column, QObject *parent=NULL)
145. : QStandardItemModel(row, column, parent) { }
146. QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const
147. {
148. if( Qt::TextAlignmentRole == role )
149. return Qt::AlignCenter;
150. return QStandardItemModel::data(index, role);
151. }
152.
153.};
154.
155.#include "main.moc"
156.
157.int main(int argc, char *argv[])
158.{
159. QApplication app(argc, argv);
160.
161. VIPModel *model = new VIPModel(5, 5);
162. QTableView *tableView = new QTableView;
163.
164. //把表格的背景調成黃藍相間
165. //這種方法是在網上看到的，用起來還真方便啊
166. tableView->setAlternatingRowColors(true);
167. tableView->setStyleSheet("QTableView{background-color: rgb(250, 250, 115);"
168. "alternate-background-color: rgb(141, 163, 215);}");
169.
170. tableView->setWindowTitle("VIP List");
171. tableView->resize(700, 400);
172. tableView->setModel(model);
173. QStringList headerList;
174. headerList << "No." << "ID" << "Name" << "Age" << "Sex" << "Show";
175. model->setHorizontalHeaderLabels(headerList);
176. tableView->verticalHeader()->setVisible(false);
177. tableView->horizontalHeader()->setStretchLastSection(true);
178.
179. //為每一列加載委托
180. ReadOnlyDelegate readOnlyDelegate;
181. tableView->setItemDelegateForColumn(0, &readOnlyDelegate);
182. UserIDDelegate userIDDelegate;
183. tableView->setItemDelegateForColumn(1, &userIDDelegate);
184. AgeDelegate spinBoxDelegate;
185. tableView->setItemDelegateForColumn(3, &spinBoxDelegate);
186. SexDelegate comboBoxDelegate;
187. tableView->setItemDelegateForColumn(4, &comboBoxDelegate);
188. IconDelegate iconDelegate;
189. tableView->setItemDelegateForColumn(5, &iconDelegate);
190.
191. for(int i=0; i<10; i++)
192. {
193. QModelIndex index = model->index(i, 0, QModelIndex());
194. model->setData(index, i);
195. }
196.
197. tableView->show();
198. return app.exec();
199.}
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、 前言
使用Sublime Text 也有幾個年頭了，版本也從2升級到3了，但猶如寒天飲冰水，冷暖盡自知。最初也是不知道從何下手，滿世界地查找資料，但能查閱到的資料，苦于它們的零碎、片面，不夠系統和全面，所以一路走來，耗費了本人大量的時間和精力。所以蒙生了寫這篇《Sublime Text 3 全程詳細指南》，一來對自己的經驗是一個總結，二來可以給初學者做個系統、全面的指引，讓他們少走我當時走過的彎路，從而能快速地掌握Sublime Text這個優秀的編輯器。
目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本，已經相當穩定。所以本文所有講解均以此版本為準，并以windows 7 x64平臺為示例。至于其它的版本也不會有太大的差異。
二、 Sublime Text 特點
1、Sublime Text 是一款跨平臺代碼編輯器，在Linux、OS X和Windows下均可使用。
2、Sublime Text 是可擴展的，并包含大量實用插件，我們可以通過安裝自己領域的插件來成倍提高工作效率。
3、Sublime Text 分別是命令行環境和圖形界面環境下的最佳選擇，同時使用兩者會大大提高工作效率。
4、Sublime Text 為收費軟件，建議有能力的人付費使用，以支持開發者。不過不購買也可以一直使用。
三、下載與安裝
1、下載：目前官方的正式版本為v2.0.2，我們打開官網下載鏈接http://www.sublimetext.com/3，下載Sublime Text 3 Build 3083。
其中“Windows 64 bit”下載下來為“Sublime Text Build 3083 x64 Setup.exe”的安裝程序；“portable version”下載下來為“Sublime Text Build 3083 x64.zip”編輯器的包，解壓后無需安裝就能運行。
如果你的電腦平臺是windows x86,也就是32位的系統，請點擊“Windows”下載32位的安裝程序，如果不想安裝，就點擊其后的“portable version”下載它的32位編輯器包。
2、安裝：雙擊上一步下載下來的“Sublime Text Build 3083 x64 Setup.exe”，記得選擇“Add to explorer context menu”，把它加入右鍵快捷菜單。其它以默認設置安裝。
3、安裝完畢，雙擊桌面“Sublime Text 3”快捷圖標，打開程序，就可以見到“Sublime Tex的廬山真面目了。
4、如果你不是把“Sublime Text 3”安裝在默認路徑，比如你把它安裝在D盤，請你添加環境變量。
四、設置字體及字體大小
點菜單“Preferences--->Setting - User”，打開“Preferences.sublime-settings”。
如下圖添加所需代碼，根據自己的喜好進行設置。設置字體用"font_face":"字體名稱"，設置字體大小用"font_size":"字體大小"，注意它們之間需要用逗號隔開。
五、安裝插件
學習Sublime Text擴展插件的安裝前，讓我們來先了解一下它的插件官方網站：https://packagecontrol.io/。
當我們在搜索框中輸入插件的關鍵字，相關的插件就會在下面實時顯示出來，我們就可以選擇自己想要的插件進行了解。
1、安裝Package Control
Package Control為插件管理包，所以我們首先要安裝它。有了它，我們就可以很方便的瀏覽、安裝和卸載Sublime Text中的插件。
打開Package Control的網頁https://packagecontrol.io/，點擊右側的“Install Now”按鈕。
進入https://packagecontrol.io/installation#st3頁面，選擇“SUBLIME TEXT 3”選項卡，復制出里面的代碼段：
雙擊桌面“Sublime Text 3”打開程序，快捷鍵
等待其安裝完成后關閉程序，重新啟動“Sublime Text 3”，點開菜單“Preferences”可見“Package Control”項，說明插件管理包已安裝成功。
2、ConvertToUTF8 插件安裝
a)功能說明：ConvertToUTF8 能將除UTF8編碼之外的其他編碼文件在 Sublime Text 中轉換成UTF8編碼，在打開文件的時候一開始會顯示亂碼，然后一剎那就自動顯示出正常的字體，當然，在保存文件之后原文件的編碼格式不會改變。
b)安裝方法一：快捷鍵 Ctrl+Shift+p ，打開 “Command Palette” 懸浮對話框，在頂部輸入 “install”, 然后下選點擊 “Package Control:Install Package”。
在出現的懸浮對話框中輸入 “convert”, 然后點選下面的 “ConvertToUTF8” 插件，就會自動開始安裝，請耐心等待。
當插件安裝成功后，Sublime Text 3 編輯器底端的狀態欄會有安裝成功的提示。
c)安裝方法二：你還可以下載完整的插件包后解壓，放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目錄下，以達到安裝插件的目的。下載地址：https://github.com/seanliang/ConvertToUTF8。
如何找到 Packages 目錄？一個快捷的方法是：雙擊打開你的 “Sublime Text 3”，點菜單 “Preferences--->Browse Packages...”。
它會直接打開插件包存放的目錄 “Packages”。然后你就可以把下載后解壓好的插件包復制到這個 Packages 目錄下。
當然，如果你熟悉 git，你還可以用 git 從插件的 GitHub 庫直接克隆插件包到 Packages 目錄下。
備注： 以后所有插件都可以通過以上介紹的兩種方法安裝，將不再贅述，推薦方法一，使用“ Package Control”安裝插件。
3、BracketHighlighter 插件
功能說明：高亮顯示匹配的括號、引號和標簽。
插件地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3
4、LESS 插件
功能說明：LESS語法高亮顯示。
插件地址：https://github.com/danro/LESS-sublime
5、sublime-less2css 插件
功能說明：將less文件編譯成css文件。
插件地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3
輔助工具：安裝后從 https://github.com/duncansmart/less.js-windows 下載 less.js-windows，然后配置 less.js-windows 的環境變量。
6、Emmet 插件
功能說明：Emmet的前身是大名鼎鼎的Zen codin。前端開發必備，HTML、CSS代碼快速編寫神器。
使用方法：默認快捷鍵 Tab
插件地址：https://github.com/sergeche/emmet-sublime
輔助工具：PyV8 下載地址： https://github.com/emmetio/pyv8-binaries
注意：Emmet 插件需要 PyV8 插件的支持，所以在安裝 Emmet 時，會自動安裝 PyV8 插件，如果安裝后 Emmet 不能正常保用，很有可能是因為 PyV8 沒有安裝完全，Sublime Text 2 和 3 容易出現這個問題。你可以刪除它，然后手動下載，采用方法二安裝 PyV8 插件。
使用方法示例：書寫代碼 ul#nav>li.item$*8>a{Item $}
然后把光標定在這行代碼的最后面，按 Tab 鍵，就會自動生成：
<ul id="nav">
<li class="item1"><a href="">Item 1</a></li>
<li class="item2"><a href="">Item 2</a></li>
<li class="item3"><a href="">Item 3</a></li>
<li class="item4"><a href="">Item 4</a></li>
<li class="item5"><a href="">Item 5</a></li>
<li class="item6"><a href="">Item 6</a></li>
<li class="item7"><a href="">Item 7</a></li>
<li class="item8"><a href="">Item 8</a></li>
</ul>
更多更詳細的使用方法，請查閱 Emmet 官網：http://docs.emmet.io/
7、JsFormat 插件
功能說明：JavaScript代碼格式化。
使用方法：在打開的JavaScript文件里點右鍵，選擇JsFormat。
插件地址：https://github.com/jdc0589/jsformat
8、ColorHighlighter 插件
功能說明：顯示所選顏色值的顏色，并集成了ColorPicker
插件地址：https://github.com/Monnoroch/ColorHighlighter
在16進制的顏色值上點右鍵，選擇“Choose color”,會彈性顏色拾色器，在需要的色塊上單擊。
看看效果，顏色值和顯示顏色都相應做了改變。
9、Compact Expand CSS Command 插件
功能說明：使CSS屬性展開及收縮，格式化CSS代碼。
使用方法：按 Ctrl+Alt+[ 收縮CSS代碼為一行顯示，按 Ctrl+Alt+] 展開CSS代碼為多行顯示。
插件地址：https://gist.github.com/vitaLee/2863474 或者：https://github.com/TooBug/CompactExpandCss
快捷鍵 Ctrl+Alt+[ 收縮CSS代碼為效果：
快捷鍵 Ctrl+Alt+] 展開CSS代碼為多行顯示效果：
10、SublimeTmpl 插件
功能說明：快速生成文件模板。
使用方法：SublimeTmpl默認的快捷鍵如下，如果快捷鍵設置沖突可能無效。
Ctrl+Alt+h 新建 html 文件
Ctrl+Alt+j 新建 javascript 文件
Ctrl+Alt+c 新建 css 文件
Ctrl+Alt+p 新建 php 文件
Ctrl+Alt+r 新建 ruby 文件
Ctrl+Alt+Shift+p 新建 python 文件
插件地址：https://github.com/kairyou/SublimeTmpl
下圖為按快捷鍵 Ctrl+Alt+h 新建的一個 html 文件。
相應的模板為tmpl格式的文件，它們保存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。
當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改為早期的html標準格式后保存。
現在按快捷鍵 Ctrl+Alt+H，新建一個 html 文件，其格式就和更改后模板格式完全一樣了。如下圖：
新增語言：你還可以增加模板文件夾中沒有的文件模板，并做相應的設置來使用這一功能。具體可以參考它的中文文檔：http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/
11、Alignment 插件
功能說明：使代碼格式的自動對齊。
使用方法：快捷鍵Ctrl+Alt+A，可能與QQ截圖沖突，二者中的一個要重置快捷鍵。
插件地址：https://github.com/kevinsperrine/sublime_alignment
12、AutoFileName 插件
功能說明：自動補全文件(目錄)名。
插件地址：https://github.com/BoundInCode/AutoFileName
安裝好后就可以來測試如何使用AutoFileName，先以<link>css檔案來示范，當輸入href=””的同時，Sublime Text就會將現在編輯檔案的路徑為中心，判斷該路徑內的所有檔案。
a)以這個檔案為范本它會去抓取跟abc.html在同一層的檔案列表。
像我們這次要link的是在css資料夾內的auto.css，所以我們直接銜接打上css/，就會跑出css資料夾內的檔案，整個用法以此類推
b)像是<img src=””>的部分也是一樣的方式，沒什么困難了，弄懂一下路徑就好了。
c)再來看看是css檔中要用url，也是用同樣方式，只不過因為要連到上一層的images資料夾內的arrow.png，所以就前面打..(上層)，依序去選擇路徑即可。
13、DocBlockr 插件
功能說明：快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust語言函數注釋。
使用方法：在函數上面輸入/** ,然后按 Tab 就會自動生成注釋。
插件地址：https://github.com/spadgos/sublime-jsdocs
在函數上面輸入/** ,然后按Tab 就會自動生成注釋。
14、SublimeCodeIntel 插件
功能說明：智能提示。
插件地址：https://github.com/SublimeCodeIntel/SublimeCodeIntel
15、HTML-CSS-JS Prettify 插件
功能說明：HTML、CSS、JS格式化。
插件地址：https://github.com/victorporof/Sublime-HTMLPrettify
安裝方法：安裝這個套件前必須先安裝node.js,指定 node.exe 的執行檔所在位置。進而安裝HTML-CSS-JS Prettify。
使用方法一：View -> Show console 或者使用快捷鍵(Ctrl + `)，在命令列的地方輸入:view.run_command("htmlprettify")，然后按下Enter。
使用方法二：默認快捷鍵：Ctrl+Shift+H。
你也可以自行設置快捷鍵，菜單 “Preferences---> Key Bindings – User” 里新增：
完成后保存，以上代碼設定執行此插件的快捷鍵是：Ctrl+Shfit+O，自己設定的話就要測試一下，不要跟其他快捷鍵沖突。
格式化前：
格式化后：
16、SideBarEnhancements 插件
功能說明：側欄菜單擴充功能。
插件地址：https://github.com/titoBouzout/SideBarEnhancements/tree/st3
17、View In Browser 插件
功能說明：Sublime Text保存后網頁自動同步更新。
插件地址：https://github.com/adampresley/sublime-view-in-browser
使用方法：在打開的文檔任一處點右鍵，選擇“View In Browser”，就會用默認的瀏覽器自動打開該文件。
如果你電腦裝有多個瀏覽器，你想換其它的作為此操作的默認瀏覽器，你可以按以下方法設置：
打開“View In Browser.sublime-settings”，寫入以下代碼：
這樣你就把它默認設置為“Chrome”瀏覽器了，當然你還可以改成“Firefox”、“Safari”等等，前提是你的電腦事先已安裝好了這些瀏覽器。
18、LiveReload 插件
功能說明：調試網頁實時自動更新。
使用說明：快捷鍵 Ctr+Alt+V
插件地址：https://github.com/dz0ny/LiveReload-sublimetext2
同時Chrome瀏覽器也要安裝LiveReload 的擴展插件。
19、TortoiseSVN 插件(win下需要安裝有TortoiseSVN客戶端支持)
功能說明：版本控制工具。
插件地址：https://github.com/dexbol/sublime-TortoiseSVN
20、Theme-Soda 插件
功能說明：的 Sublime Text 主題之一。
插件地址：https://github.com/buymeasoda/soda-theme
安裝完成后，點菜單 Preferences--->Settings - User，根據需要的主題效果，添加如下代碼。
Soda 亮色主題請添加：
Soda 暗色主題請添加：
要達到圖中的效果，你還需要下載與之搭配的 color scheme。下載地址：http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip，如果你喜歡 Soda Dark 和 Monokai，我建議你使用 Monokai Extended。這個 color scheme 是 Monokai Soda 的增強，再配合 Markdown Extended ，將大大改善 Markdown 的語法高亮。
如果加代碼 "soda_classic_tabs":true，文件標簽頁形狀會如下顯示：
如果不添加此行代碼，文件標簽頁形狀會如下顯示：
21、Theme-Flatland 插件
功能說明：的 Sublime Text 主題之一。
插件地址：https://github.com/thinkpixellab/flatland
22、Theme-Nexus 插件
功能說明：的 Sublime Text 主題之一。
插件地址：https://github.com/EleazarCrusader/nexus-theme
六、插件列表
快捷鍵 Ctrl+Shift+P，在對話框中輸入“list”，選擇“Package Control:List Packages”。
會列出所有已安裝的插件。這樣可以很方便地了解自己已經安裝了哪些插件。
七、移除插件
有時候我們需要移除自己不想要的插件，具體操作如下：快捷鍵 Ctrl+Shift+P，在對話框中輸入“remove”，選擇“Package Control: Remove Packages”。
然后在出現的插件列表中點選你要移除的插件。
八、Sublime Text 的窗口操作
1、分屏
Sublime Text有多種分屏形式，讓我來具體地看一看。菜單 “View-àLayout”就可以選擇你的分屏樣式。
對應的快捷鍵與分屏情況如下：
Alt+Shift+1 Single 獨屏
Alt+Shift+2 Columns:2 縱向二欄分屏
Alt+Shift+3 Columns:3 縱向三欄分屏
Alt+Shift+4 Columns:4 縱向四欄分屏
Alt+Shift+8 Rows:2 橫向二欄分屏
Alt+Shift+9 Rows:3 橫向三欄分屏
Alt+Shift+5 Grid 四格式分屏
2、創建新窗
快捷鍵Ctrl+Shift+N 創建一個新窗口。
九、使用技巧薈萃
（未完待續。。。。。。）
十、Sublime Text 快捷鍵列表
快捷鍵按類型分列如下：
1、通用
↑↓← → 上下左右移動光標
Alt 調出菜單
Ctrl + Shift + P 調出命令板（Command Palette）
Ctrl + ` 調出控制臺
2、編輯
Ctrl + Enter 在當前行下面新增一行然后跳至該行
Ctrl + Shift + Enter 在當前行上面增加一行并跳至該行
Ctrl + ←/→ 進行逐詞移動
Ctrl + Shift + ←/→ 進行逐詞選擇
Ctrl + ↑/↓ 移動當前顯示區域
Ctrl + Shift + ↑/↓ 移動當前行
3、選擇
Ctrl + D 選擇當前光標所在的詞并高亮該詞所有出現的位置，再次 Ctrl + D 選擇該詞出現的下一個位置，在多重選詞的過程中，使用 Ctrl + K 進行跳過，使用 Ctrl + U 進行回退，使用 Esc 退出多重編輯
Ctrl + Shift + L 將當前選中區域打散
Ctrl + J 把當前選中區域合并為一行
Ctrl + M 在起始括號和結尾括號間切換
Ctrl + Shift + M 快速選擇括號間的內容
Ctrl + Shift + J 快速選擇同縮進的內容
Ctrl + Shift + Space 快速選擇當前作用域（Scope）的內容
4、查找&替換
F3 跳至當前關鍵字下一個位置
Shift + F3 跳到當前關鍵字上一個位置
Alt + F3 選中當前關鍵字出現的所有位置
Ctrl + F/H 進行標準查找/替換，之后：
Alt + C 切換大小寫敏感（Case-sensitive）模式
Alt + W 切換整字匹配（Whole matching）模式
Alt + R 切換正則匹配（Regex matching）模式
Ctrl + Shift + H 替換當前關鍵字
Ctrl + Alt + Enter 替換所有關鍵字匹配
Ctrl + Shift + F 多文件搜索&替換
5、跳轉
Ctrl + P 跳轉到指定文件，輸入文件名后可以：
@ 符號跳轉 輸入@symbol跳轉到symbol符號所在的位置
# 關鍵字跳轉 輸入#keyword跳轉到keyword所在的位置
: 行號跳轉 輸入:12跳轉到文件的第12行。
Ctrl + R 跳轉到指定符號
Ctrl + G 跳轉到指定行號
6、窗口
Ctrl + Shift + N 創建一個新窗口
Ctrl + N 在當前窗口創建一個新標簽
Ctrl + W 關閉當前標簽，當窗口內沒有標簽時會關閉該窗口
Ctrl + Shift + T 恢復剛剛關閉的標簽
7、屏幕
F11 切換至普通全屏
Shift + F11 切換至無干擾全屏
Alt+Shift+1 Single 切換至獨屏
Alt+Shift+2 Columns:2 切換至縱向二欄分屏
Alt+Shift+3 Columns:3 切換至縱向三欄分屏
Alt+Shift+4 Columns:4 切換至縱向四欄分屏
Alt+Shift+8 Rows:2 切換至橫向二欄分屏
Alt+Shift+9 Rows:3 切換至橫向三欄分屏
Alt+Shift+5 Grid 切換至四格式分屏
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Ctrl + ` 打開Sublime Text控制臺，將之前復制的代碼粘貼到控制臺里，按下“Eenter”鍵。
{
"keys": ["ctrl+shift+o"],
"command": "htmlprettify"
}
{
"browser": "chrome64"
}
{
"soda_classic_tabs": true,
"theme": "Soda Light 3.sublime-theme",
}
{
"soda_classic_tabs": true,
"theme": "Soda Dark 3.sublime-theme",
}
藍藍設計的小編 http://www.syprn.cn