當前位置:首頁 » 編程軟體 » weui如何編譯

weui如何編譯

發布時間: 2022-02-18 07:01:02

① 如何利用weui作為前端來開發

先引用樣式文件. 請在github上下載對應的文件.
下載地址為: 3次未審核, 搜索吧.

下載之後的目錄結構為:
dist : 編譯之後的目錄, 裡面的文件可以直接使用
src : 源碼目錄

可以打開dist下example目錄, 這個是官方的例子文件. 裡面比較全的基本使用方法.

打開example目錄下的index.html 就可以看到官方的例子了.
這里需要說明一下, 這個官方使用的zepto.js框架. 這個框架更加適用移動端.

開始使用, 如果使用呢? 第一步先把css文件引用到頁面中.
<link rel="stylesheet" type="text/css" href="路徑地址" />
然後, 就可以使用官方的樣式了. 首先來說明一下button.
使用方法:class="weui_btn weui_btn_primary"
其中屬性有:
weui_btn weui_btn_primary
weui_btn weui_btn_warn
weui_btn weui_btn_default
三種, 如果你想擴展, 直接增加響應的樣式就可以了.

Tab使用:
tab包含兩種: navbar 和 tabbar
使用方法.
navbar :
<div class="weui_tab">
<div class="weui_navbar">
<div class="weui_navbar_item weui_bar_item_on"> 選項一</div>
<div class="weui_navbar_item"> 選項二 </div>
<div class="weui_navbar_item">選項三 </div>
</div>
<div class="weui_tab_bd"></div>
</div>
weui_bar_item_on 為選中項
tabbar:
<div class="weui_tabbar">
<a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_button.png" alt="">
</div>
<p class="weui_tabbar_label">微信</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_msg.png" alt="">
</div>
<p class="weui_tabbar_label">通訊錄</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_article.png" alt="">
</div>
<p class="weui_tabbar_label">發現</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_cell.png" alt="">
</div>
<p class="weui_tabbar_label">我</p>
</a>
</div>
圖片來自官方例子中的素材.

Toast
彈出層: 一個是彈出提示數據.
<div id="toast">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content">已完成</p>
</div>
</div>
使用$('#toast').show();進行顯示數據.

searchBar搜索框
簡單的搜索, 搜索世界的大不同, 不是所有的網站都可以

圖標的使用.
<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>

Panel的使用
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">圖文組合列表</div>
<div class="weui_panel_bd">
<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
<div class="weui_media_hd">
<img class="weui_media_appmsg_thumb" src="" alt="">
</div>
<div class="weui_media_bd">
<h4 class="weui_media_title">標題一</h4>
<p class="weui_media_desc">由各種物質組成的巨型球狀天體,叫做星球。星球有一定的形狀,有自己的運行軌道。</p>
</div>
</a>
<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
<div class="weui_media_hd">
<img class="weui_media_appmsg_thumb" src="" alt="">
</div>
<div class="weui_media_bd">
<h4 class="weui_media_title">標題二</h4>
<p class="weui_media_desc">由各種物質組成的巨型球狀天體,叫做星球。星球有一定的形狀,有自己的運行軌道。</p>
</div>
</a>
</div>
<a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
</div>

圖片裡面沒有填寫地址, 請您自己填寫信息.

② jquery-weui.js這個文件怎麼使用i18n國際化

jQuery.i18n.properties是一款輕量級的jQuery國際化插件,能實現Web前端的國際化。國際化英文單詞為:Internationalization,又稱i18n,「i」為單詞的第一個字母,「18」為「i」和「n」之間單詞的個數,而「n」代表這個單詞的最後一個字母。jQuery.i18n.properties採用.properties文件對JavaScript進行國際化。jQuery.i18n.properties插件首先載入默認的資源文件(strings.properties),然後載入針對特定語言環境的資源文件(strings_zh.properties),這就保證了在未提供某種語言的翻譯時,默認值始終有效。

③ weui 怎麼集成到javaweb 工程中

首先建立一個JAVA WEB項目,比如說AJAXDate;
然後將dwr.jar拷貝到/WEB-INF/lib目錄下,實際上對於這一點,我是將官方例子dwr.war中包含的所有jar包統統拷貝進來了,因為我實在不確定是不是只考一個dwr.jar就行。所以,我覺得所有新手都可以按照我的做法來做,免得麻煩!

④ weui 的文本中 如何添加空格

HTML中的空格符號是:&nbsp;
前面的符號和後面的分號都不能少,用的時候把前面的符號換成半形才行
提示:鍵盤的空格在編寫代碼的時候確實是空格,但在測試瀏覽器的時候只會有一個空格
如:

<tr><td> </td></tr>

⑤ weui 彈出層自己寫樣式就可以實現的嗎,還是需要寫js代碼

Js代碼:
$('#yesNextBtn').click(function(){
$('#btnGroups').find('input[type=radio]').each(function(){
$(this).removeProp("checked").checkboxradio("refresh");
})
document.getElementById("bg").style.display ="block";
document.getElementById("show").style.display ="block";
$('html,body').animate({scrollTop: '0px'}, 100);
//因為頁面很長,有縱向滾動條,先讓頁面滾動到最頂端
$('#bg').bind("touchmove",function(e){
e.preventDefault();
});
})

⑥ 請問下WeUI可以在eclipse上開發嗎,有weui的demo參考嗎謝謝

WeUI在Myeclipse集成版開發。
WeUI demo項目參考框架

⑦ weui 組件.net開發時怎麼調用

<!-- 微信樣式引入開始 -->
<link rel="stylesheet" href="public/js/weui/dist/lib/weui.css">
<link rel="stylesheet" href="public/js/weui/dist/css/jquery-weui.css">
<script src="public/js/weui/dist/lib/jquery-2.1.4.js"></script>
<script src="public/js/weui/dist/js/jquery-weui.js"></script>
<!-- 微信樣式引入結束 -->
在附件中下載,放入自己的項目中就可以使用了。

⑧ 微信小程序 weui 前端樣式庫怎麼導入

你好,是需要第三方公司進行開發的。我是做這個的,請問你是做什麼行業的,需要哪些功能呢

⑨ jsp中怎樣調用.weui

下載weui庫,導入頁面,然後調用裡面的函數就可以了

⑩ 如何用npm 安裝 jquery-weui

下載完成後,打開nodejs命令行窗口,進入到npm的代碼文件夾下,使用下邊命令安裝
node cli.js install npm -gf
其中-gf是指全局安裝的意思,你可以不要,這樣會安裝在當前文件夾下,當前工程下而已。

安裝完成了npm後,你就可以安裝其他想要的nodejs模塊了,比如安裝express命令行輸入:
npm install express -gf
其中-gf是指全局安裝的意思,你可以不要,這樣會安裝在當前文件夾下,當前工程下而已。全局安裝完成後,會在nodejs安裝目錄下的模塊文件夾中有npm

4
安裝express
npm安裝完成後,可以使用npm命令安裝express了。npm install express -gf

熱點內容
shell腳本平方計算公式 發布:2024-04-26 23:29:26 瀏覽:186
比較實惠的雲伺服器 發布:2024-04-26 23:24:57 瀏覽:973
怎麼增加電腦緩存 發布:2024-04-26 23:23:46 瀏覽:450
android調試gdb 發布:2024-04-26 23:22:27 瀏覽:98
androidsocket服務 發布:2024-04-26 22:49:53 瀏覽:980
python編譯時加密 發布:2024-04-26 22:49:20 瀏覽:246
買車看哪些配置參數 發布:2024-04-26 22:45:50 瀏覽:835
linux顯示圖像 發布:2024-04-26 22:45:41 瀏覽:493
flash腳本格式 發布:2024-04-26 22:43:41 瀏覽:452
c語言求三位數 發布:2024-04-26 22:43:39 瀏覽:690