<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

272018-8

JS：獲取驅動器的大小和可用空間

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

親測必須將代碼放在記事本中，改成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">  </script> </body> </html> 運行：結果：單位為g

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(3113)

242018-8

Bootstrap Table實現定時刷新數據

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

Bootstrap Table實現定時刷新數據

推薦第二種方法

令表格的id為realTimeTable

1、毀掉表格，再查詢數據后append，如果你查大量的數據（例如：查詢很多渠道的信息），而獲取服務器數據又太慢，你就會看到表格在一行一行的增加

定時器，多長時間執行一次，自己定義，此處是30S

setInterval(function() { queryAll(); }, 30000);

1

2

3

先定義一個函數，里面放入查詢的方法updateRealTimeData和你所自定義使用的方法

function queryAll() { updateRealTimeData(); . . . . }

1

2

3

4

5

6

7

方法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，……); } } }); }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

方法showTableData

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); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

2、使用updateRow方法

首先，得存在表格，里面有數據，才能更新行，否則沒作用。此方法不會像上面的方法表格消失再增加，這個是整體不變，里面的數據會自動更新

定時器，和上面一樣，多長時間執行一次，自己定義，此處是30S

setInterval(function() { queryAll(); for (var j = 0; j < 請求的數據的總條數（也就等于表格的行數）; j++) { changeAllChannelRealTime(j, .....); } }, 30000);

1

2

3

4

5

6

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("查詢數據出錯"); } }); }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

function changeData(i,msg,......){ $('#realTime_Table').bootstrapTable('updateRow', { //i表示第幾行，從0開始 index: i, row: { //這里也就是data-field的名稱,*表示字段名 date: msg.* . . . . } }); }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

大象~ 大象~ 你的鼻子怎么那么長~~

其他相關：

BootstrapTable API 中文版 http://blog.csdn.net/S_clifftop/article/details/77937356

Bootstrap Table 雙擊或單擊行獲取該行內容 http://blog.csdn.net/S_clifftop/article/details/77915934

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(5409)

232018-8

nodejs 升級后， vue+webpack 項目 node-sass 報錯的解決方法

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

關于 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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

這段代碼是我升級node之后，在我的電腦上復制出來的。但大概就是這么個意思，里面根據不同的項目位置什么的，會有所不同。

簡單的說，這段代碼就是告訴你，node-sass 不兼容 node v8 的版本。那就很好解決了。在當前項目下面執行

npm i node-sass -D

1

然后項目就恢復正常了。

當項目出錯之后，不要著急，仔細看下報錯代碼，實在不行用翻譯工具翻譯一下。一般來說，是很快能夠找到解決方法的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(6184)

222018-8

CefSharp 集成谷歌瀏覽器詳解（三）--官網示例解析2 CefSettings 介紹

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

本章節介紹CefSetting各種設置

CefExample.Init(osr: false, multiThreadedMessageLoop: multiThreadedMessageLoop, browserProcessHandler: browserProcessHandler);

1

2

這個方法就是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);這些域名添加到白名單。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

做完這些以后并且設置好ChromiumWebBrowser后就可以使用Application.Run(browser);啟動瀏覽器。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(7689)

212018-8

從h5網站頁面跳轉到微信小程序——微信web-view高級用法9

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

我們把自己的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
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(10599)

202018-8

JavaScript判斷變量是否為空對象 {} 的幾種方法

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

將`json`對象轉化為`json`字符串，再判斷該字符串是否為`"{}"`

var obj = {}; var b = (JSON.stringify(obj) === "{}"); console.log(b); // true

1

2

3

for in 循環判斷

var obj = {}; var b = function() { for(var key in obj) { return false; } return true; } console.log(b()); // true

1

2

3

4

5

6

7

8

網上很多都是如上的說法，但是會存在一個問題，就是如果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

1

2

3

4

5

6

7

8

9

10

11

方案二：

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

1

2

3

4

5

6

7

8

9

10

11

上面兩種方案的區別就是判斷判斷空數組的方式不同。

jQuery的jQuery.isEmptyObject(obj)方法

var obj = {}; var b = $.isEmptyObject(obj); console.log(b); // true

1

2

3

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

1

2

3

var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && !Array.isArray(obj); console.log(b); // true

1

2

3

var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && Object.prototype.toString.call(obj) !== "[object Array]"; console.log(b); // true

1

2

3

Object.getOwnPropertyNames()方法

Object.getOwnPropertyNames() 方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數組。

var obj = {}; var b = !Object.getOwnPropertyNames(obj).length; console.log(b); // true

1

2

3

Object.getOwnPropertyNames() 方法存在obj=0 以及obj為任意數字返回true的問題，所以我們還應該再用typeof 判斷一下：

var obj = {}; var b = !Object.getOwnPropertyNames(obj).length && typeof obj === "object"; console.log(b); // true

1

2

3

Object.keys()方法

Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in循環遍歷該對象時返回的順序一致。

var obj = {}; var b = !Object.keys(obj).length; console.log(b); // true

1

2

3

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

1

2

3

var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && Object.prototype.toString.call(obj) !== "[object Array]"; console.log(b); // true

1

2

3

在實際應用中，如果對象不為空，并且知道對象不為空時，某個屬性一定存在，則直接判斷這個對象的此屬性是否存在。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(5116)

172018-8

QTableView基本用法

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

一、添加表頭：

QStandardItemModel *model = new QStandardItemModel();
model->setColumnCount(2);
model->setHeaderData(0,Qt::Horizontal,QString::fromLocal8Bit("卡號"));
model->setHeaderData(1,Qt::Horizontal,QString::fromLocal8Bit("姓名"));

復制代碼

二、設置表格屬性：

ui->tableView->setModel(model);
//表頭信息顯示居左
ui->tableView->horizontalHeader()->setDefaultAlignment(Qt::AlignLeft);
//設置列寬不可變
ui->tableView->horizontalHeader()->setResizeMode(0,QHeaderView::Fixed);
ui->tableView->horizontalHeader()->setResizeMode(1,QHeaderView::Fixed);
ui->tableView->setColumnWidth(0,101);
ui->tableView->setColumnWidth(1,102);

復制代碼

注：在進行表格設置時必須是“ui->tableView->setModel(model);”在前，屬性具體設置在后，

反之則設置不會生效。如上述代碼所示。

三、添加行（添加三行一樣的信息）：

for(int i = 0; i < 3; i++)
{
model->setItem(i,0,new QStandardItem("2009441676"));
//設置字符顏色
model->item(i,0)->setForeground(QBrush(QColor(255, 0, 0)));
//設置字符位置
model->item(i,0)->setTextAlignment(Qt::AlignCenter);
model->setItem(i,1,new QStandardItem(QString::fromLocal8Bit("哈哈")));
}

復制代碼

四、刪除行：

//x是指定刪除哪一行
model->removeRow(x);
//刪除所有行
model->removeRows(0,model->rowCount());

復制代碼

再舉一個例子：

在一個藥品劃價模塊中有這樣的操作流程：

檢索處方項目成功后，把該項目顯示到QTableView里，把需要編輯的數量字段提供給用戶輸入，用戶輸入確認后，該項目留在列表中，然后開始下一項目檢索錄入。

實現過程如下：

錄入的項目保留在臨時表tmp中，界面上的QTableView取名為tbList，與tbList關聯的Model取名為tb1。檢索成功后，把檢索結果插入到臨時表中，把需要編輯的字段提供給用戶。

tb1=newQSqlTableModel(this,*dbR); //dbR是本應用中的數據源
tb1->setTable("tmp"); //處方臨時表

復制代碼

程序中需要顯示的時候，

tbList->setModel(NULL); //清除原先數據集
tbList->setModel(tb1); //刷新顯示

復制代碼

程序中需要提供編輯輸入的時候

QModelIndexmdidx=m_ui->tbList->model()->index(row,column); //獲得需要編輯的單元格的位置
m_ui->tbList->setFocus(); //把輸入焦點交給tbList
m_ui->tbList->setCurrentIndex(mdidx); //設定需要編輯的單元格
m_ui->tbList->edit(mdidx); //開始編輯

復制代碼

有一個問題需要注意。向QTableView中添加記錄時，字段一定要完整，不能有空白字段，否則結果無法保存。切記。

如果需要對用戶輸入做限制，比如只能在指定的字段輸入指定的數據類型，可以通過QItemDelegate來實現。

貼一段代碼，說明QTableView基本用法

QStandardItemModel model;
//設置大小
model.setColumnCount(3); //列
model.setRowCount(musicFound); //行
//設置標題
model.setHeaderData(0,Qt::Horizontal,"ID");
//添加數據
for(int j=0;j<row;j++)
{
//寫id
QStandardItem *itemID = new QStandardItem("hello");//QString::number(j)));
model.setItem(j,0,itemID);
}
//選擇這個model
m_ui->tableView->setModel(&model);
//隱藏左邊那列
m_ui->tableView->verticalHeader()->hide();
//列寬
m_ui->tableView->setColumnWidth(0,30);
//整行選擇
m_ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);

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界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4372)

162018-8

sublime的使用

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

一、前言

       使用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”選項卡，復制出里面的代碼段：

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)

      雙擊桌面“Sublime Text 3”打開程序，快捷鍵 Ctrl + ` 打開Sublime Text控制臺，將之前復制的代碼粘貼到控制臺里，按下“Eenter”鍵。

      等待其安裝完成后關閉程序，重新啟動“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” 里新增：

{ "keys": ["ctrl+shift+o"], "command": "htmlprettify" }

       完成后保存，以上代碼設定執行此插件的快捷鍵是：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”，寫入以下代碼：

{ "browser": "chrome64" }

      這樣你就把它默認設置為“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_classic_tabs": true, "theme": "Soda Light 3.sublime-theme", }



      Soda 暗色主題請添加：

{ "soda_classic_tabs": true, "theme": "Soda Dark 3.sublime-theme", }

      要達到圖中的效果，你還需要下載與之搭配的 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              切換至四格式分屏
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3517)

152018-8

JavaScript對象、JSON對象、JSON字符串的區別

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

JavaScript對象、JSON對象、JSON字符串的區別

一、首先看下什么是JSON

JSON：JavaScript Object Natation，JavaScript對象的表現形式，已經發展成一種輕量級的數據交換格式。

JavaScript對象的表現形式，指定義JS對象的一種方式。
數據交換格式，即用于交換的數據格式。

JSON是種格式：

數據在鍵值對中, 數據由逗號分隔, 花括號保存對象, 方括號保存數組.
鍵值對組合中的名稱寫在前面，值對寫在后面，中間用冒號隔開
JSON 值可以是：數字, 字符串, 邏輯值, 數組, 對象, null

JSON與XML相比，JSON更輕量級，XML更重量級，目前XML更多的用作配置文件。

二、再來看下什么是javascript對象

雖然有人說JavaScript 中的所有事物都是對象，但是 javascript 中，并不是所有的值都是對象，而有兩種值類型：原始值和對象。
（參考：http://blog.csdn.net/justjavac/article/details/8432989 JavaScript 并非所有的東西都是對象）

JavaScript原始值:
字符串，數字，布爾值，null，正則表達式
注：在 JavaScript 中所有的數字都是浮點數

JavaScript內置對象：
Object(基礎對象)，
Array(數組)，
Function(函數構造器)，
Math(數學對象)，
String(字符串對象)，
Number(數值對象)，
Boolean(布爾對象)，
Date(日期時間)，
Error(異常對象)，
RegExp(正則表達式對象)，
Arguments(函數參數集合)
(參考：http://www.cnblogs.com/lianzi/archive/2011/08/26/2154253.html javascript內置對象列表及Array和String的常用方法)

其中 Boolean, Number, String 是原始值的包裝器，很少直接使用

JavaScript 創建對象的方法：
1）使用內置對象
var person=new Object();//創建基礎對象實例，然后為其添加屬性
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
2）自定義對象構造
function Person(firstname,lastname,age){//自定義對象構造器，然后創建實例
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
}
var person=new Person("Bill","Gates",56);
//定義對象構造器，可以使用“this”關鍵字構造、也可以使用原型prototype構造
（參考：http://www.jb51.net/article/20428.htm JavaScript 三種創建對象的方法）
3）使用直接量(literals 有直接量、字面量、常量等詞義)
var arr = [obj.a, 0, obj.a+1];
var obj = {name: 'John' + 'McCarthy'};

注：
準確的說不叫直接量（literals），而叫初始器（Initialiser），可以在里面使用表達式
初始器有對象和數組兩種，所以有“對象直接量”，“數組直接量”這樣的說法

初始器基于JSON，要符合JSON語法格式，
因此有人說JSON是JavaScript的原生格式,
在JavaScript中處理JSON數據不需要任何特殊的API或者工具包

但是初始器里面是可以有表達式的，就像例子里的一樣
（參考：http://www.cnblogs.com/snandy/p/3439790.html JavaScript中的直接量與初始器的區別）

原始值只包括字符串，數字，布爾值，null，正則表達式，不包括 Undefined 和 Initialiser

三、JavaScript對象、JSON對象、JSON字符串

javascript對象：javascript中，除開JavaScript原始值(字符串，數字，布爾值，null，正則表達式)的都是javascript對象

JSON對象：JSON對象這種叫法不太準確，可以理解為使用基于JSON的初始器定義的javascript對象

JSON字符串：符合JSON語法格式的字符串

javascript對象和JSON字符串相互轉換：
1：jQuery插件支持的轉換方式
$.parseJSON( jsonstr );$("xxx").serializeArray();
2：瀏覽器支持的轉換方式(Firefox，chrome，opera，safari，ie9，ie8)等瀏覽器
JSON.parse(jsonstr);JSON.stringify(jsonobj);
3：Javascript支持的轉換方式
eval('(' + jsonstr + ')');//不推薦
4：JSON官方的轉換方式
引入 json.js 或 json2.js,用法同第二種
（參考：http://www.cnblogs.com/luminji/p/3617160.html JS中對象與字符串的互相轉換)

JAVA對象和JSON字符串相互轉換：
可以用jackson、Gson和json-lib等
（參考：http://www.blogjava.net/bolo/archive/2014/04/16/412533.html 使用jackson對Java對象與JSON字符串相互轉換的一些總結）

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3186)

142018-8

C#-XML基礎使用瀏覽器檢查手寫的xml文件是否正確

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

慈心積善融學習，技術愿為有情學。善心速造多好事，前人栽樹后乘涼。我今于此寫經驗，愿見文者得啟發。

   .NET Framework : 4.6.1

                          ide : visual studio 2017 community

                            os : win7 x86_64

           type setting : markdown

                        blog : https://blog.csdn.net/yushaopu

                    github : https://github.com/GratefulHeartCoder

xml file - 正確的文件

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100" comment="good-t"> <book> <name>道德經</name> <author>老子</author> </book> <book> <name>文始真經</name> <author>關尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金剛經</name> <author>釋迦牟尼</author> </book> <book> <name>地藏菩薩本愿經</name> <author>地藏</author> </book> </buddhism> </cultures>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

使用瀏覽器進行校驗

xml file - 錯誤的

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100 comment="good-t" <book> <name>道德經</name> <author>老子</author> </book> <book> <na>文始真經</name> <author>關尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金剛經</name> <author>釋迦牟尼</author> </book> <book> <name>地藏菩薩本愿經</name> <author>地藏</author> </book> </buddhism> </cultures>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

使用瀏覽器進行校驗

感想

xml文件挺常用的，用程序自動生成的xml文件最好，引號和尖括號等標點符號肯定是全的。把事情交給擅長它的人去做。知人善任！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3324)

« 1 ... 107 108 109 110 111 112 113 ... 122 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合