概要

layer是一款近年來備受青睞的web彈層元件，這完全得益於她全方位的解決方案。她致力於服務各個水平段的開發人員，您的頁面會輕鬆地擁有豐富友好的操作體驗。在與同類元件的比較中，layer總是能輕易獲勝。她儘可能地在以更少的程式碼展現更強健的功能，且格外注重效能的提升、易用和實用性，正因如此，越來越多的開發者將媚眼投上了layer。layer相容了包括IE6在內的所有主流瀏覽器。 她數量可觀的介面，使得您可以自定義太多您需要的風格，每一種彈層模式各具特色，皆廣受歡迎。當然，這種“王婆賣瓜”的陳述聽起來總是有點難受，因此你需要進一步瞭解她是否真的如你所願。

文件與演示 （所有效果都在這裡）

願景

layer致力於打造國內最盛行的彈層元件，為web開發提供強勁動力。

現狀

因著數年的堅持維護，截至到2017年03月21日，已運用在超過30萬家Web平臺，其中不乏眾多知名大型網站。目前layer已經成為國內乃至全世界最多人使用的Web彈層解決方案，並且她仍在與Layui一併高速發展。

相關

官網、社群

也支援手機版

如何使用

先下載下來原始碼

下載地址

放入到自己的js中

D:\devlop\phpStudy\PHPTutorial\WWW\mall\static\js

匯入一次 便可永久在js中使用

<script src="./static/js/jquery-1.10.2.min.js"></script>
<script src="./static/js/layer/layer.js"></script>
 

<script>
    $(function () {
        $('#test').click(function () {
            //配置一個透明的詢問框
            layer.msg('大部分引數都是可以公用的<br>合理搭配，展示不一樣的風格', {
                time: 20000, //20s後自動關閉
                btn: ['明白了', '知道了', '哦']
            });


        });
</script>

表單驗證錯誤提示

簡寫

layer.tips("商品名稱應該再1-500字元之間",'#name',{time:2000,tips:2});
 

以下是專案中使用到的地方 

 <form action="publish.php" method="post" name="publish-form" id="publish-form" enctype="multipart/form-data">
                <div class="additem">
                    <label id="for-name">商品名稱</label><input type="text" name="name" id="name" placeholder="請輸入商品名稱">
                </div>
                <div class="additem">
                    <label id="for-price">商品價格</label><input type="text" name="price" id="price" placeholder="請輸入商品價格"> 元
                </div>
                <div class="additem">
<!--                    使用accept html5屬性 宣告僅接受png gif jpeg格式的檔案-->
                    <label id="for-file">商品縮圖</label><input type="file" accept="image/png,image/gif,image/jpeg,image/jpg" id="file" name="file">
                </div>
                <div class="additem textwrap">
                    <label class="ptop" id="for-des">商品簡介</label><textarea id="des" name="des" placeholder="請輸入商品簡潔"></textarea>
                </div>
                <div class="additem textwrap">
                    <label class="ptop" id="for-content">商品詳情</label>
                    <div class="container" style="margin-left: 120px">
                        <textarea id="content" name="content"></textarea>
                    </div>
                </div>
                <button type="submit">釋出</button>
            </form>

<script>
    $(function () {


        $('#publish-form').submit(function () {
            var name=$('#name').val();
            var price=$('#price').val();
            var file=$('#file').val();
            var content=$('#content').val();
            var des=$('#des').val();
            if(name.length<=0||name.length>500){
                layer.tips("商品名稱應該再1-500字元之間",'#name',{time:2000,tips:2});
                $('#name').focus();
                return false;
            }
          if(!/^[1-9]\d{0,8}$/.test(price)){
              layer.tips("請輸入最多9位正整數",'#price',{time:2000,tips:2});
              $('#price').focus();
              return false;
          }
          if(file==""||file.length<=0){
              layer.tips("請選擇圖片",'#file',{time:2000,tip:2});
              $('#file').focus();
              return false;
          }
            if(des.length<=0||des.length>100){
                layer.tips("商品簡介應該再1-100字元之間",'#des',{time:2000,tips:2});
                $('#des').focus();
                return false;
            }
            if(content.length<=0){
                layer.tips("請輸入商品詳情",'#container',{time:2000,tips:2});
                $('#content').focus();
                return false;
            }
            return true;



        });
    })
</script>