2012年4月16日星期一

jquery ui for bootstrap 的使用

最近常常使用 Bootstrap 在做版面配置，頓時覺得 UI 美化是一件很輕鬆的事情，只是要我設計出這種羽量級且各大瀏覽器都通用的 css，那叫我去撞牆會比較快。

可是在我網頁缺少日歷的元件時，才發現他少了這麼個東西，應該是說要用甚麼卻發現沒有才知道沒有，所以我就去 google 了一下，找到一個 Bootstrap 相容的外掛，居然還是 jquery ui，那我就毫不客氣的去引用啦！

果然好用，以下就介紹使用他流程：

1.

首先先到 jquery for bootstrap 下載檔案：

2.

解壓縮出來，將必要的檔案取出來並分類建立路徑 ( 暫以解壓縮出來的檔案路徑為路徑 )

需要的檔案：

css/custom-theme/jquery-ui-1.8.16.custom.css
bootstrap/bootstrap.css
js/jquery-1.6.2.min.js
js/jquery-ui-1.8.16.custom.min.js

3.

最後我建立一個 sample 檔案，供大家隨意取用：

<html>
    <head>
        <link type="text/css" rel="stylesheet"
href="css/custom-theme/jquery-ui-1.8.16.custom.css"/>
        <link href="bootstrap/bootstrap.css" rel="stylesheet">
    </head>
    
    <body>
        <div id="datepicker"></div>
    </body>
    
    <script type="text/javascript" 
src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" 
src="js/jquery-ui-1.8.16.custom.min.js"></script>
    
    <script>
        $('#datepicker').datepicker();
    </script>
</html>

回html目錄
回首頁

程式設計筆記

2012年4月16日星期一

jquery ui for bootstrap 的使用

1.

2.

3.

沒有留言 :

張貼留言

2012年4月16日 星期一

jquery ui for bootstrap 的使用

1.

2.

3.

沒有留言 :

張貼留言

2012年4月16日星期一