Exploring and Thinking

Robomongo

滿多人推薦的 MongoDB GUI 管理工具:Robomongo

在畫面操作、可跨不同平台(Mac, Linux, Windows)的特點,讓滿多人推薦的。

特色:
  • Full Power of MongoDB Shell. Robomongo embeds the same JavaScript engine (based on Mozilla SpiderMonkey), that powers MongoDB’s mongo shell. It means that you can reuse your existing skills of MongoDB Shell in Robomongo
  • Multiple Shells. Open as many shells as you need. Every tab in Robomongo is a MongoDB shell, fully isolated from each other.
  • Multiple Results. Robomongo executes your code in statement by statement way. That means that you will receive as many result as many statements you have.
  • Autocompletion. Robomongo provides you with autocompletion for all objects (and thus functions) that are known by JavaScript runtime, including autocompletion for databases, collections and even your document objects.
  • Cross-platform, open source.



這篇中文文章亦可參考:
MongoDB Tutorial(2)MongoDB 的 Query Language
Share:

Sublime Text3 改預設開啟頁籤 (取消預設開啟新視窗)

若預設 Sublime Text 來開啟文字檔案,Sublime Text 都會以一個檔案開啟一個新視窗來呈現。半手動方式只能在開啟一個檔案後,後續檔案直接拖曳到 Sublime Text 視窗上。

如果有大量需求的話,可直接更改開啟設定,作法很簡單:

1. 點選上方選單 Sublime Text > Preferences > Settings - User


2. 加入 "open_files_in_new_window": false 這段文字,記得前一段設定要加「,」分隔。


3. 存檔即可。

Share:

Emmet 快速筆記

句法說明:Abbreviations Syntax
詳細句法:Syntax

# id
. class

jQuery Mobile List
Short
ul[data-role="listview"]>li*3>a[]>h2{Headline $}+p>Lorem5
Produce
<ul data-role="listview">
 <li><a href="">
   <h2>Headline 1</h2>
   <p>Lorem ipsum dolor sit amet.</p>
  </a></li>
 <li><a href="">
   <h2>Headline 2</h2>
   <p>Cum, nulla, omnis! Quidem, eaque.</p>
  </a></li>
 <li><a href="">
   <h2>Headline 3</h2>
   <p>Facilis eius ratione alias asperiores.</p>
  </a></li>
</ul>
Share:

Sublime Text 必裝套件

Package Control
在 Sublime Text 中,安裝其他套件。使用方式:
  1. 在 Sublime Text 按 Ctrl + `,啟用 Console 畫面。
  2. 依使用版本貼上語法
  3. 重啟 SubLime Text 。
  4. Ctrl+Shift+P,再輸入 install 即可啟用 Package Control 裡的套件安裝列表。

SublimeAllAutocomplete
自動提示、補足程式碼。使用方式:
  1. 先安裝 Package Contrl。
  2.  Ctrl+Shift+P,再輸入 install 啟用 Package Control 裡的套件安裝列表。
  3. 輸入 all 出來第一項就是 All Autocomplete。
  4. 若要移除,只要按 Ctrl+Shift+P,再輸入 remove 、點選這個套件即可。


Sublime Alignment
按 Ctrl+Alt+A可使程式碼對齊等號或是其他自訂符號。使用方式:
  1. 先安裝 Package Contrl。
  2.  Ctrl+Shift+P,再輸入 install 啟用 Package Control 裡的套件安裝列表。
  3. 輸入 alignment 
  4. 若要移除,只要按 Ctrl+Shift+P,再輸入 remove 、點選這個套件即可。
  5. 詳細使用方式可參考這篇文章


Emmet
輸入簡易程式代碼,自動轉換成一般程式碼。使用方式:
  1. 先安裝 Package Contrl。
  2.  Ctrl+Shift+P,再輸入 install 啟用 Package Control 裡的套件安裝列表。
  3. 輸入 Emmet 
  4. 若要移除,只要按 Ctrl+Shift+P,再輸入 remove 、點選這個套件即可。
  5. 使用方式請參考官網範例: http://docs.emmet.io/abbreviations/syntax/

中文參考資源:Sublime Text 手冊
Share:

Ajax-Loader 測試

在做 jQuery Mobile 時,可能會碰到 mobileinit 事件。以下是模擬 A網頁前往 B網頁,可在B網頁加上載入三秒鐘的資料,藉以得知loading的狀態或圖示。

<script runat="server">
 
  protected void Page_Load(object sender, EventArgs e)
  {
    System.Threading.Thread.Sleep(3000);
  }

</script>
Share:

勾選我同意後,出現「下一步」按鈕,可指往第二頁。

當點選我同意時,顯示「下一步」。按「下一步」時導到第二頁。



<!DOCTYPE html>
<html>
<head>
 <title>Agree check</title>
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
 
 <script type="text/javascript">
  $(document).on("change", "#checkbox-agree", function () {
      if ($(this).prop("checked")) {
          $("#NextPage").button("enable");
      } else {
          $("#NextPage").button("disable");
      }
  });
 </script>
</head>
 
<body>
 
<div data-role="page" id="Page1">
 <div data-role="fieldcontain">
     <fieldset data-role="controlgroup" style="width:150px">
      <input type="checkbox" name="checkbox-agree" id="checkbox-agree" class="custom" />
      <label for="checkbox-agree">我同意</label>
     </fieldset>
     <input type="button" id="NextPage" data-inline="true" onclick="javascript:location.href='#Page2'"  value="下一步" disabled/>
 </div>
</div>
 
<div data-role="page" id="Page2">
 This is Page2.
</div>
 
</body>
</html>
Share:

熱門文章