當前位置:首頁 » 文件管理 » weui圖片上傳

weui圖片上傳

發布時間: 2023-06-04 23:28:33

❶ 如何利用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>

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

熱點內容
sql2008r2導入數據 發布:2023-09-29 08:33:05 瀏覽:29
安卓無線投屏在哪裡設置 發布:2023-09-29 08:32:09 瀏覽:560
解壓泥清理 發布:2023-09-29 08:30:56 瀏覽:257
spark源碼語言 發布:2023-09-29 08:14:43 瀏覽:922
怎麼查看上架伺服器的ip 發布:2023-09-29 08:09:02 瀏覽:764
資料庫表數據復制 發布:2023-09-29 08:02:33 瀏覽:574
王牌戰爭為什麼一直顯示伺服器維修中 發布:2023-09-29 07:59:46 瀏覽:706
硬碟緩存18m 發布:2023-09-29 07:57:27 瀏覽:784
吃雞給別的房間的密碼是多少 發布:2023-09-29 07:56:45 瀏覽:549
數控折彎編程 發布:2023-09-29 07:55:49 瀏覽:432