日常隨筆: 工具使用

顯示具有 工具使用 標籤的文章。顯示所有文章

2016年1月24日星期日

[工具]bootstrap-select介紹

今天介紹bootstrap裡一個好用的東西：selectpicker

首先他需要的元件有jquery、bootstrap與bootstrap-select，以下範例使用cdn：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/css/bootstrap-select.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/i18n/defaults-zh_CN.min.js"></script>

然後html body裡面寫入以下的內容

 <body>

  <h2>selectpicker</h2>

  <form>

  <select class="selectpicker" data-live-search="true">

    <option>Mustard</option>

     <option>Ketchup</option>

     <option>Relish</option>

  </select>

  </form>

  <script type="text/javascript">

   $('.selectpicker').selectpicker({

     style: 'btn-info',

     size: 4

  });

  </script>

 </body>

javascript的部分只要使用$('.selectpicker').selectpicker()就可以了
裡面的物件是定義他的大小跟樣式
也可以不定義
畫面如下

如果要更詳細的內容可以參考此網站的範例
bootstrap-select

2015年12月27日星期日

Visual Studio 快速鍵

首先一些常用的快速鍵可以在編輯→進階裡找到

有些快速鍵是用","隔開，

舉例來說註解是Crtl+K,Ctrl+C

那麼你就要先按下Ctrl+K，此時畫面的左下角會顯示這個訊息

然後再按下Ctrl+C就可以把選取範圍註解

還有一些常用的快速鍵如下

快速鍵	效果
CTRL + G	移動到指定行號位置
CTRL + F4	關閉程式頁籤
CTRL + F	尋找
CTRL + SHIFT + F	在檔案中尋找
CTRL + H	取代
CTRL + SHIFT + H	在檔案中取代
CTRL + ALT + L	檢視方案總管
CTRL + ALT + X	檢視工具列
F5	開始偵錯
CTRL + F5	啟動但不偵錯
CTRL + SHIFT + W	在瀏覽器中顯示

2015年9月7日星期一

[教學]如何在Eclipse中使用Github(Dynamic project)(後記)

有鑑於用之前的設定方式在共通作業時classpath常常會跳出問題
所以我試著去把跟eclipese有關的檔案全部ignore的方法
方法大致上跟前面兩篇一樣，請自行參閱前兩篇
上篇
下篇
不過設定的時候.ignore檔設定改成這樣

因為多設定了一些ignore檔案
所以拉下來的方法稍微不一樣

請務必在project explorer上右鍵不是點下面的Repository不然之後拉下來會長的很怪

Repository拉到本地端後不要點Repository右鍵
改成在project explorer右鍵來import

找到Git裡面的Projects from Git

再來選Existing local repository

下一步到這邊點Import as general project
並且把選擇你要的專案資料夾
下一步後按finish

資料夾還是一樣看不懂，沒關係按右鍵選擇Properties

與之前方法不同的是Project Facets畫面不一樣
點畫面中的Convert to faceted from...

這時會出現跟之前方法差不多的畫面
點選Dynamic web modile跟Java還有把Runtime的Server打勾
版本記得先跟團隊確認好不要選錯，按下ok就完成了

(‧ω‧‵)將將將將~~完成啦

2015年9月4日星期五

[教學]如何在Eclipse中使用Github(Dynamic project)(下)

本篇要示範的是怎麼將已經推上去的檔案拉回本機端
如果要看怎麼將專案推上去請去看上一篇
文章的上篇內容請點此

首先點選Clone a Git repository，並且貼上你要拉下來專案的連結
如果在這一步出現「Internal error; consult Eclipse error log.」
請到使用者user目錄下的「.eclipse\org.eclipse.equinox.security」資料夾內刪除「secure_storage」這個檔案，然後重新啟動eclipse。

如果你專案推了很多奇怪的支線進去你就要知道你要拉下來的是那一枝了
不過一般來說看到這畫面應該都是直接下一步才對

這個路逕是以後你要找檔案的地方，選個你方便找檔案的路徑

再來要複製專按，點你拉下來的Repository右鍵→Import Projects

選Import exsting projects並且點你要的專案內容後按下一步

然後按Finish後將專案拉下來

接著你點開專案會發現這專案完全看不懂
不過不要緊張這個可以解決

點選專案右鍵→Properties

選到Project Facets，先點到Runtimes那邊將你的server打勾
這邊我用的是Tomcat 8.0、接著Dynamic Web Module、Java、JavaScript打勾後按OK
剩下的設定也要跟將專案推上來的人同步
像是Java編碼跟Html或Xml的編碼等等

然後按ok後就會發現親愛的專案他回來了

[教學]如何在Eclipse中使用Github(Dynamic project)(上)

因為有人反應說Eclipse使用Github相當複雜
稍微整理一下後說一點簡單的設定說明

本篇介紹的是將專案上傳，下篇會介紹怎麼將上傳的檔案拉下來
如何將推上去的專案拉下來請看這篇
首先要把Git的repository打開

點選window→showview→other

然後在GIT選項找到Git Repositories，找不到Git選項上面直接打Git搜尋關鍵字

點選你要上傳的專案右鍵→Team→Share Project

選擇Git

然後挑選一個你比較好找到的位置放你的Git檔案，最後按Finish

複製你Git的連結

因為把.classpath跟.project也設成ignore時Eclipse專案設定會很困難
所以建議在團隊都使用Eclipse時
將Working Directory/Demo/.gitignore下的設定成這樣
只忽略/build/跟/.settings/資料夾
/.classpath跟 /.project就不設定，之後比較好拉檔案下來