表單美化，下拉菜單，箭頭美化插件，比較實用的jQuery插件。
在使用之前先引入css，js 文件
- <link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
- <script src="./js/M_select/M_select.min.js"></script>
- <div style="display:inline-block;width: 150px;">
- <select class="select01">
- <option value="01">第一個下拉</option>
- <option value="02">第二個下拉第二個下拉第二個下拉第二個下拉</option>
- <option value="03">第三個下拉</option>
- </select>
- </div>
- $(".select01").M_select();
- M_select_init(selectList);
- // selectList 為 json對象
- $(".select01").M_select({
- "ico":"1",// ico的值可以為1-5 有五個樣式的下拉箭頭，如果想自己定義箭頭樣式，可以使用img，img2 傳參
- // 手動添加下拉框箭頭圖片（以html頁面為起始位置寫路徑）
- // "Img":"./js/M_select/up4.png",
- // "Img2":"./js/M_select/down1.png",
- "Title":"--下拉款的標題--",//定義為選擇前的下拉框顯示文檔
- "radius":"10px",//定義圓角屬性
- "inputName":"selected_value",//這里的inputName可以定義隱藏的input的name，通過name獲取它的value的值（value的值為選中的下拉的value值，默認值為sel_v）
- "selected":"03",//選擇select初始的選擇狀態，相當于selected，03為下拉框的value的值
- Succee:function(){
- alert("選擇下拉之后的彈窗");
- }//選擇選項之后的回調函數
- });
- <div style="display:inline-block;width: 200px;">
- <select class="select02">
- <option value="01">第一個下拉</option>
- <option value="02" disabled=true>第二個下拉</option>
- <option value="03">第三個下拉</option>
- </select>
- </div>
|
收藏
點贊
反對
