zoukankan      html  css  js  c++  java
  • 美丽的前端控件

    一,status bootstrap提更的一个下拉控件,可是它支持复选。。实现的方式是通过隐藏真实的checkbox,通过js将操作值传递给checkbox

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                Status
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style=" 153px">
                <li role="presentation">
                    <a class="aaa" role="menuitem" tabindex="-1" href="#" id="drafted" style="color:#CC9900">
                        <?php if($_GET['draft']):?>Drafted <span style='position: relative;right:-70px;'>√</span>      //由于隐藏表单的提交方式是通过get所以我们能够获取到操作值。
                        <?php else: ?

    >
                            Drafted
                        <?php endif; ?>
                    </a>
                </li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#" id="scheduled" style="color:green">
                        <?php if($_GET['scheduled']):?

    >Scheduled <span  style='position: relative;right:-50px;'>√</span>
                        <?

    php else: ?>
                            Scheduled
                        <?php endif; ?>
                    </a>
                </li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#" id="published" style="color:blue">
                        <?php if($_GET['published']):?

    >Published <span s style='position: relative;right:-55px;'>√</span>
                        <?php else: ?>
                            Published
                        <?

    php endif; ?

    >
                    </a>
                </li>
            </ul>


    js........................................................................

    $("#drafted").click(function(){
                    //jQuery("#edit-draft").attr("checked", "checked");
                    jQuery("#edit-draft").click();     //点击隐藏表单的那个checkbox
                    jQuery("#views-exposed-form-messages-page").submit();   //js 调用提交事件
                    jQuery("#edit-submit").click();
                });
                $("#scheduled").click(function(){
                    jQuery("#edit-scheduled").click();
                    jQuery("#views-exposed-form-messages-page").submit();
                    jQuery("#edit-submit").click();
                });
                $("#published").click(function(){
                    jQuery("#edit-published").click();
                    jQuery("#views-exposed-form-messages-page").submit();
                    jQuery("#edit-submit").click();
                });


    二,日期选择器

    <div style="float: left; 40px;margin-right: 10px;margin-top: 5px;margin-left: 20px"><b>From:</b></div>
        <div id="start_filter_date" class="input-append date" style="float:left">
            <input size="16" type="text" class="input-small" readonly style="cursor: pointer" /><span class="add-on"><i class="icon-calendar"></i></span>
        </div>
        <div id="end_filter_date" class="input-append date" style="float:left;margin-left: 5px;">
            - <input size="16" type="text" class="input-small" readonly style="cursor: pointer" /><span class="add-on"><i class="icon-calendar"></i></span>
        </div>
        <button class="date_submit icon-search btn btn form-submit" style="float:left;40px;margin-left: 5px;"></button>

    js............................................................................................................................

    $(".date_submit").click(function(){

    //获取选择器中时间值
                    var start_date = jQuery("#start_filter_date").find('input').val();

           //将时间赋值给隐藏的表单项
                    jQuery("#start_date").attr("value",start_date);


                    var end_date = jQuery("#end_filter_date").find('input').val();
                    jQuery("#end_date").attr("value",end_date);

    //然后出发提交button
                    jQuery("#edit-submit").click();
                });

    //时间选择器的相关js函数

     var current_date = new Date();
                //current_date.setDate(current_date.getDate()-30);
                current_date.setDate(current_date.getDate());


                jQuery("#start_filter_date").datetimepicker({
                    format: 'M dd, yyyy',
                    autoclose: true,
                    startView: 2,
                    minView: 2,
                    maxView: 2,
                    startDate: 0,
                    endDate:current_date
                });
                jQuery("#end_filter_date").datetimepicker({
                    format: 'M dd, yyyy',
                    autoclose: true,
                    startView: 2,
                    minView: 2,
                    maxView: 2,
                    startDate: 0
                    //endDate: current_date
                });

    三。自己主动完毕框


    <div style="float: right">
            <div style="float: left; 40px;margin-right: 31px;margin-top: 5px;"><b>Keyword:</b></div>
            <input class="span2" data-provide="typeahead" data-source=''  autocomplete="off" id="keyworld" type="text"  placeholder="Enter keyword" style="float: left">
            <button class="keyworld_submit icon-search btn btn form-submit" style="float:left;40px;margin-right: 0px"></button>
        </div>

    //当中data-source 的值是从数据库调取出来的

    js..................................................................................................

    $(".keyworld_submit").click(function(){
                    var key = jQuery("#keyworld").val();  
                    jQuery("#edit-title--2").attr("value",key);
                    jQuery("#edit-submit").click();
                });

    //假设data-source假设用js 赋值的话那么,应该在整个dom 载入完毕后就立即被调用(不用什么触发事件才调用)

     var source = jQuery("#edit-title--2").attr("data-source");
     $("#keyworld").attr("data-source",source);


    // 这是drupal获取data-source 的方式

    $form['title'] = array(
    '#type' => 'textfield',
    '#title'=> '',
    '#attributes' => array(
    'placeholder' => t('Search by campaign name'),
    'data-provide' => t('typeahead'),
    'data-source' => json_encode($arrMsg),  //将数组转化为json格式的
                   'autocomplete' => t('off')
    ),
    '#prefix' => '<div class="span4 pull-left spacer10">',
    );

    //$arrMsg要求是普通数组

    $results = db_query($queryString)->fetchAll();
        $arrMsg = array();
        foreach($results as $result){
            array_push($arrMsg, $result->title);
        }

  • 相关阅读:
    react Native 运行报错之一 gradle-2.14.1-all解压失败的问题
    react native windows create bundle folder
    gulp+browserSync+nodemon 实现express 全端自动刷新的实践
    nodejs框架express4.x 学习--安装篇
    转: angularjs 指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效
    angular 基础练习
    自己写的数组排重+排序
    前端开发bower包管理器
    定位网站性能的一些经验
    记一次大规模数据迁移和加密
  • 原文地址:https://www.cnblogs.com/cynchanpin/p/7353083.html
Copyright © 2011-2022 走看看