首頁 > web前端 > H5教程 > 主體

小強的HTML5行動開發之路(39)-jqMobi外掛json格式ActionSheet

黄舟
發布: 2017-02-13 14:18:36
原創
1926 人瀏覽過

在上一篇中我們學會了ActionSheet的使用,細心的朋友可能會發現其中創建列表的格式是HTML的,代碼如下:


function showCustomHtmlSheet() {
     $("#afui").actionsheet(&#39;<a  >Back</a><a  onclick="alert(\&#39;hi\&#39;);" >Show Alert 3</a><a  onclick="alert(\&#39;goodbye\&#39;);">Show Alert 4</a>&#39;);
}
登入後複製

這一篇我們來研究一下json格式的ActionSheet,其實很簡單,和上一篇的分析方法一樣,我們先找到實例程式碼中的原始碼如下:



<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>
登入後複製
                        function showCustomJsonSheet() {
                            $("#afui").actionsheet(
                            [{
                                text: &#39;back&#39;,
                                cssClasses: &#39;red&#39;,
                                handler: function () {
                                    $.ui.goBack();
                                }
                            }, {
                                text: &#39;show alert 5&#39;,
                                cssClasses: &#39;blue&#39;,
                                handler: function () {
                                    alert("hi");
                                }
                            }, {
                                text: &#39;show alert 6&#39;,
                                cssClasses: &#39;&#39;,
                                handler: function () {
                                    alert("goodbye");
                                }
                            }]);
                        }
登入後複製

運作效果:


一個條目試試。修改程式碼如下:


 



jqMobi




 
 
	

<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>

首页

<script> function showCustomJsonSheet() { $("#afui").actionsheet( [{ text: &#39;back&#39;, cssClasses: &#39;red&#39;, handler: function () { $.ui.goBack(); } }, { text: &#39;show alert 5&#39;, cssClasses: &#39;blue&#39;, handler: function () { alert("hi"); } }, { text: &#39;show alert 6&#39;, cssClasses: &#39;&#39;, handler: function () { alert("goodbye"); } },{ text: &#39;大碗干拌&#39;, cssClasses: &#39;red&#39;, handler: function () { alert("哈哈"); } }]); } </script>
登入後複製

運行一下,看看效果:



突然發現我們上面設定的背景沒作用,這是什麼原因呢?我們再來看看原始碼,定位到元素如下:


<a href="javascript:;" class="red">大碗干拌</a>
登入後複製

看到上面的background:white;這就是原因,將這一禁掉會發現有效果了,如下:

好吧,我們進到af.ui.css檔案中修改如下:


#afui #af_actionsheet a{
    border-radius:0;
    -webkit-border-radius:0;
    color:black;
    /*background:white;*/
    border:none;
    text-shadow:none;
}
登入後複製

和上面的效果相同,我就不想貼圖了,那麼如果我們想讓上面選單上面的文字是藍色的怎麼辦?其實可以像上面一樣在af.ui.css中該,但是我建議最好不要在這個配置文件中修改,我們可以在我們的index.html中添加如下代碼:


<style>
	#afui #af_actionsheet a{
		color:blue;
	}
</style>
登入後複製
效果如下:



以上就是小強的HTML5行動開發之路(39)-jqMobi插件json格式ActionSheet的內容,更多相關內容請關注PHP中文網(www.php.cn)!

🎜
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板