Настраиваемый код модуля агрегированного поиска в навигационной версии FinchUI

finchui 2023-04-26 09:55:01 1315

一、菜单

<label for="type-baidu">常用</label><label for="type-easyicon">图片</label><label for="type-shejidaren-sc">素材</label><label for="type-zcool-web">设计</label><label for="type-163">音乐</label><label for="type-douyin">影视</label><label for="type-taobao">购物</label><label for="type-qunar">旅游</label><label for="type-zhihu">社区</label><label for="type-kuaidi100">工具</label>

II. Вкладки

<div class="search-group s-current"><span class="type-text">常用</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-baidu" value="https://www.baidu.com/s?wd=" data-placeholder="百度一下"><label for="type-baidu"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/www.baidu.com.ico" alt="百度">百度</span></label></li>
        <li><input hidden type="radio" name="type" id="type-bing" value="https://cn.bing.com/search?q=" data-placeholder="必应搜索"><label for="type-bing"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/cn.bing.com.ico" alt="必应">Bing</span></label></li>
        <li><input hidden type="radio" name="type" id="type-seo" value="https://seo.chinaz.com/" data-placeholder="输入网址（不带http或https）"><label for="type-seo"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/tool.chinaz.com.ico" alt="站长工具 - 站长之家">SEO</span></label></li>
        <li><input hidden type="radio" name="type" id="type-benzhan" value="" data-placeholder="站内搜索"><label for="type-benzhan"><span><img src="https://hao.hnysnet.com/zb_users/upload/fui_hao/20230305090649717.png" alt="站内搜索">本站</span></label></li>
    </ul></div><div class="search-group"><span class="type-text">图片</span>
    <ul class="search-type">
    <li><input hidden type="radio" name="type" id="type-easyicon" value="https://www.iconfont.cn/search/index?searchType=icon&q=" data-placeholder="图标搜索 (支持中文)"><label for="type-easyicon"><span><img src="https://hao.hnysnet.com/zb_users/upload/fui_hao/20230305095742441.png" alt="Iconfont">Iconfont</span></label></li>
        <li><input hidden type="radio" name="type" id="type-pexels" value="https://www.pexels.com/search/" data-placeholder="免版税图库(请用英文关键字搜索)"><label for="type-pexels"><span>PEXELS</span></label></li>
        <li><input hidden type="radio" name="type" id="type-pxhere" value="https://pxhere.com/zh/photos?q=" data-placeholder="免费高清商业素材"><label for="type-pxhere"><span><img src="https://hao.hnysnet.com/zb_users/upload/fui_hao/20221126113046587.jpg" alt="Pxhere">Pxhere</span></label></li>
        <li><input hidden type="radio" name="type" id="type-huaban" value="http://huaban.com/search/?q=" data-placeholder="搜索花瓣网"><label for="type-huaban"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/huaban.com.ico" alt="花瓣">花瓣</span></label></li>
    </ul></div><div class="search-group"><span class="type-text">素材</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-shejidaren-sc" value="https://www.shejidaren.com/?s=" data-placeholder="搜素材、经验、设计作品"><label for="type-shejidaren-sc"><span><img src="https://api.hnysnet.com/favicon/get.php?url=https://www.shejidaren.com" alt="站酷">设计达人</span></label></li>
        <li><input hidden type="radio" name="type" id="type-officeplus" value="http://www.officeplus.cn/List.shtml?cat=" data-placeholder="Office Plus"><label for="type-officeplus"><span>PPT</span></label></li>
        <li><input hidden type="radio" name="type" id="type-soogif" value="http://soogif.com/search/1/" data-placeholder="Gif"><label for="type-soogif"><span style="color:#00585f">Gif</span></label></li>
    </ul></div><div class="search-group"><span class="type-text">设计</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-zcool-web" value="http://www.zcool.com.cn/tosearch.do?page=0&f=hb&world=" data-placeholder="站酷"><label for="type-zcool-web"><span><img src="https://hao.hnysnet.com/zb_users/upload/fui_hao/20230305101330726.ico" alt="站酷">站酷</span></label></li>
        <li><input hidden type="radio" name="type" id="type-ui-cn" value="http://s.ui.cn/index.html?keywords=" data-placeholder="UI中国"><label for="type-ui-cn"><span style="color:#3498db">UI中国</span></label></li>
        <li><input hidden type="radio" name="type" id="type-CSSWINNER" value="http://www.csswinner.com/search/" data-placeholder="CSS Winner 网页画廊"><label for="type-CSSWINNER"><span>CSS Winner</span></label></li>    
    </ul></div><div class="search-group"><span class="type-text">音乐</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-163" value="http://music.163.com/#/search/m/?s=" data-placeholder="网易云音乐"><label for="type-163"><span>云音乐</span></label></li>
        <li><input hidden type="radio" name="type" id="type-qianqian" value="https://music.91q.com/search?word=" data-placeholder="千千音乐（原百度音乐）"><label for="type-qianqian"><span>千千音乐</span></label></li>
        <li><input hidden type="radio" name="type" id="type-qq-music" value="https://y.qq.com/portal/search.html#searchid=1&remoteplace=txt.yqq.top&t=song&w=" data-placeholder="QQ音乐"><label for="type-qq-music"><span>QQ音乐</span></label></li>
    </ul></div><div class="search-group"><span class="type-text">影视</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-douyin" value="https://www.douyin.com/search/" data-placeholder="抖音短视频"><label for="type-douyin"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/www.douyin.com.ico" alt="Iconfont">抖音</span></label></li>
        <li><input hidden type="radio" name="type" id="type-vqq" value="https://v.qq.com/x/search/?q=" data-placeholder="腾讯视频"><label for="type-vqq"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/v.qq.com.ico" alt="腾讯视频">腾讯视频</span></label></li>
        <li><input hidden type="radio" name="type" id="type-bilibili" value="https://search.bilibili.com/all?keyword=" data-placeholder="哔哩哔哩"><label for="type-bilibili"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/www.bilibili.com.ico" alt="哔哩哔哩">B站</span></label></li>
        <li><input hidden type="radio" name="type" id="type-youku" value="http://www.soku.com/search_video/q_" data-placeholder="优酷"><label for="type-youku"><span>优酷</span></label></li> 
        <li><input hidden type="radio" name="type" id="type-aiqiyi" value="https://so.iqiyi.com/so/q_" data-placeholder="爱奇艺"><label for="type-aiqiyi"><span>爱奇艺</span></label></li>
    </ul></div><div class="search-group"><span class="type-text">购物</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-taobao" value="https://s.taobao.com/search?q=" data-placeholder="淘宝"><label for="type-taobao"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/www.taobao.com.ico" alt="淘宝">淘宝</span></label></li>
        <li><input hidden type="radio" name="type" id="type-tmall" value="https://hao.hnysnet.com/zb_users/upload/fui_hao/20221013180759509.png" data-placeholder="天猫"><label for="type-tmall"><span><img src="https://hao.hnysnet.com/zb_users/upload/fui_hao/20221013180759509.png" alt="天猫">天猫</span></label></li>
        <li><input hidden type="radio" name="type" id="type-jd" value="https://search.jd.com/Search?keyword=" data-placeholder="京东"><label for="type-jd"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/www.jd.com.ico" alt="京东">京东</span></label></li>
        <li><input hidden type="radio" name="type" id="type-dangdang" value="http://search.dangdang.com/?key=" data-placeholder="当当"><label for="type-dangdang"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/www.dangdang.com.ico" alt="当当">当当</span></label></li>
    </ul></div><div class="search-group"><span class="type-text">旅游</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-qunar" value="http://travel.qunar.com/search/all/" data-placeholder="搜索「去哪儿」旅游攻略"><label for="type-qunar"><span>去哪儿</span></label></li>
        <li><input hidden type="radio" name="type" id="type-qyer" value="http://search.qyer.com/index?wd=" data-placeholder="穷游"><label for="type-qyer"><span>穷游</span></label></li>
        <li><input hidden type="radio" name="type" id="type-amap" value="http://ditu.amap.com/search?query=" data-placeholder="高德地图"><label for="type-amap"><span>高德地图</span></label></li>
        <li><input hidden type="radio" name="type" id="type-baidumap" value="https://map.baidu.com/search/" data-placeholder="百度地图"><label for="type-baidumap"><span><img src="https://hao.hnysnet.com/zb_users/upload/ico/www.baidu.com.ico" alt="百度">百度地图</span></label></li>
    </ul></div><div class="search-group"><span class="type-text">社区</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-weibo" value="http://s.weibo.com/weibo/" data-placeholder="微博"><label for="type-weibo"><span>微博</span></label></li>
        <li><input hidden type="radio" name="type" id="type-zhihu" value="http://zhihu.sogou.com/zhihu?query=" data-placeholder="知乎"><label for="type-zhihu"><span>知乎</span></label></li>
        <li><input hidden type="radio" name="type" id="type-douban" value="https://www.douban.com/search?q=" data-placeholder="豆瓣"><label for="type-douban"><span>豆瓣</span></label></li>
        <li><input hidden type="radio" name="type" id="type-weixin" value="http://weixin.sogou.com/weixin?type=2&query=" data-placeholder="微信"><label for="type-weixin"><span>微信</span></label></li>
    </ul></div><div class="search-group"><span class="type-text">工具</span>
    <ul class="search-type">
        <li><input hidden type="radio" name="type" id="type-kuaidi100" value="https://m.kuaidi100.com/result.jsp?nu=" data-placeholder="请输入快递单号"><label for="type-kuaidi100"><span>查快递</span></label></li>
        <li><input hidden type="radio" name="type" id="type-youdao" value="http://www.youdao.com/w/" data-placeholder="请输入要翻译的单词或文字"><label for="type-youdao"><span>有道翻译</span></label></li>
    </ul></div>

三、默认搜索

<form action="https://www.baidu.com/s?wd=" method="get" target="_blank" id="ag-search-form">
                <input type="text" id="ag-search-text" autocomplete="off" placeholder="百度一下" autofocus />
                <button type="submit"></button>
        </form>