精华内容
下载资源
问答
  • 主要为大家详细介绍了java实现简单注册选择所在城市的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下html部分:定位城市上海市css部分:*{margin: 0;padding: 0;list-style: none;}html{font-size: 12px;}body {background...

    本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下

    html部分:

    定位城市
    上海市

    css部分:

    *{

    margin: 0;

    padding: 0;

    list-style: none;

    }

    html{

    font-size: 12px;

    }

    body {

    background-color: #f5f5f5;

    font-family: 'PingFang SC Regular', 'PingFang SC';

    width: 100%;

    height: 100%;

    min-width: 320px;

    max-width: 480px;

    position: relative;

    }

    .cityPage {

    width: 100%;

    height: 100%;

    /* border: 1px solid black; */

    position: relative;

    top: 0;

    display: flex;

    flex-direction: column;

    /* justify-content: center; */

    }

    .cityContent {

    width: 100%;

    height: 140px;

    /* border: 1px solid black; */

    background: #f7f7f9;

    position: fixed;

    z-index: 9999;

    top: 0;

    }

    .inputBox input {

    width: 90%;

    height: 30px;

    border: 1px solid rgb(215, 215, 215);

    outline: none;

    background: #fff;

    margin-left: 4%;

    border-radius: 4px;

    padding-left: 4px;

    color: #9e9e9e;

    font-size: 14px;

    margin-bottom: 16px;

    margin-top: 14px;

    }

    .localCity {

    color: #333;

    font-size: 13px;

    font-weight: bold;

    margin-left: 4.5%;

    margin-bottom: 16px;

    }

    .cityname {

    font-size: 13px;

    margin-left: 4.5%;

    margin-bottom: 16px;

    }

    #list {

    font-size: 13px;

    position: fixed;

    height: 100%;

    top: 140px;

    width: 100%;

    overflow: scroll;

    font-size: 15px;

    /* margin-bottom: 140px; */

    /* bottom: 200px; */

    }

    #list>section {

    overflow-y: auto;

    height: 100%;

    margin-bottom: 140px;

    }

    #list>section>dl>dt {

    background: #f7f7f9;

    color: #999;

    height: 40px;

    line-height: 40px;

    padding-left: 15px;

    }

    #list>section>dl>dd {

    color: #333;

    line-height: 40px;

    padding-left: 15px;

    position: relative;

    background-color: #fff;

    }

    #list>section>dl>dd:after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 1px;

    width: 100%;

    height: 1px;

    background-color: #c8c7cc;

    transform: scaleY(.5);

    -webkit-transform: scaleY(.5);

    }

    #list>section>dl>dd:last-of-type:after {

    display: none;

    }

    #navBar {

    position: fixed;

    width: 26px;

    height: 50%;

    right: 0;

    z-index: 30;

    top: 50%;

    display: flex;

    flex-direction: column;

    margin-top: -25%;

    /* text-align: center; */

    }

    #navBar.active {

    background: rgba(211, 211, 211, .6);

    }

    #navBar>div {

    text-align: center;

    display: block;

    text-decoration: none;

    /* height: 4.166%;

    line-height: 100%; */

    color: #333;

    font-size: 13px;

    flex: 1;

    }

    .letterBox{

    width: 40px;

    height: 40px;

    background:#9f9f9f;

    opacity: .5;

    position: fixed;

    top: 50%;

    left: 50%;

    margin-top: -25px;

    margin-left: -25px;

    text-align: center;

    line-height: 40px;

    color: #fff;

    display: none;

    }

    js部分:

    $(function () {

    initCities(cityData);

    clickAction()

    //输入城市查询

    var key = false;

    $('#findcityInp').on('compositionstart', function () {

    key = true;

    console.log('不搜索')

    });

    $('#findcityInp').on('compositionend', function (e) {

    var keyWord = $.trim(e.target.value);

    if(keyWord.length>0){

    var result = findCity(keyWord, cityData);

    initCities(result);

    bindEvent();

    }else{

    initCities(cityData);

    bindEvent();

    }

    });

    $('#findcityInp').on('change', function (e) {

    var keyWord = $.trim(e.target.value);

    console.log(keyWord)

    var result = findCity(keyWord, cityData);

    // console.log(result)

    initCities(result)

    });

    //城市查询

    function findCity(keyWord, data) {

    if (!(data instanceof Array)) return;

    var reg = new RegExp(keyWord);

    var arr = [];

    var obj ={

    name:'',

    cities:[]

    }

    if(keyWord.length>0 && checkCh(keyWord)==false){

    data.forEach((item, index) => {

    item.cities.forEach((childItem, childIndex) => {

    if (childItem.tags.match(reg)) {

    obj.name = childItem.tags[0];

    obj.cities.push(childItem)

    arr=[obj]

    }

    })

    })

    }else if(keyWord.length ==1 && checkCh(keyWord)==true){

    data.forEach((item,index)=>{

    if(item.name == keyWord){

    // console.log(item)

    arr.push(item)

    }

    })

    }

    else{

    arr = data

    }

    return arr;

    }

    function checkCh(str){

    var RegExp = /^[a-zA-Z]{1}$/;

    return RegExp.test(str);

    }

    //点击右边描点

    function toTarget(tag){

    var text = $(tag).text();

    location.href = "#"+text;

    $('.letterBox').html(text);

    $('.letterBox').show()

    setTimeout(function(){

    $('.letterBox').hide()

    },1000)

    }

    //初始化城市列表

    function initCities(cityData) {

    var g = "";

    $('section').html('');

    $('nav').html('')

    cityData.forEach((item, index) => {

    g += "

    " + item.name + "

    item.cities.forEach((citiesItem, citiesIndex) => {

    g += "

    " + citiesItem.name + ""

    })

    g += "

    "

    })

    $('section').append(g);

    var g = $('nav').height() / 26;

    var f = '';

    cityData.forEach((item, index) => {

    // f += '' + item.name + ""

    f+=`

    ${item.name}
    `

    })

    $('nav').append(f);

    }

    //点击城市列表某城市

    function clickAction(){

    $('.list').click(function (e) {

    console.log(e.target.getAttribute('data-name'))

    })

    }

    f11350fafc02fad4b98eab113e81e608.png

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 城市选择

    2016-03-18 16:23:30
    在开发O2O相关应用的时候,选择所在城市这个东西肯定不会少。个人感觉美团的城市选择用户体验更好,就模仿了美团的城市选择。现在就和大家分享下,我在开发项目时的城市选择如何做出来的。   城市选择看起来这么...

      在开发O2O相关应用的时候,选择所在城市这个东西肯定不会少。个人感觉美团的城市选择用户体验更好,就模仿了美团的城市选择。现在就和大家分享下,我在开发项目时的城市选择如何做出来的。
      城市选择看起来这么高大上,有木有很难实现呢?其实不然,做起来很简单。定位和区域选择也很简单就不做了。在这个信息丰富的世界中,学啥都很简单,只要你想,你就能站在巨人的肩膀上。

    • 说这么多,还不如看看效果图

    城市选择效果图;

    • 我们先了解一下选择城市的基本流程

    o2o app城市选择的基本流程;

    • 在做城市选择前,你必须有个城市列表的本地数据库。在没了解城市选择前,我还以为城市列表数据需要在服务器获取,然而却是本地数据库。我把数据库放到assets,其实参考美团的。数据库中有城市的名字、名字的拼音和名字的拼音缩写。如果要增加区域选择的话,还需要区域列表。

    城市列表数据库位置;

    • 还需要导入汉语拼音工具包,对城市名字按首字字母进行排列。 pinyin4j的使用

    汉语拼音工具包;

    右边索引 view 代码

    /**
     * Created by kn on 2016/3/17.
     */
    public class CityIndexListView extends View {
    
        OnTouchingIndexChangedListener onTouchingIndexChangedListener;
        String[] str_index = {"热门", "全部", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K",
                "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
        int choose = -1;
        Paint paint = new Paint();
        boolean showBkg = false;
    
        public CityIndexListView(Context context) {
            super(context);
        }
    
        public CityIndexListView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public CityIndexListView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if (showBkg) {
                canvas.drawColor(getResources().getColor(R.color.grey_bg));
            }
            int height = getHeight();
            int width = getWidth();
            int singleHeight = height / str_index.length;
            for (int i = 0; i < str_index.length; i++) {
                paint.setColor(getResources().getColor(R.color.grey));
                paint.setTextSize(26);
                // paint.setTypeface(Typeface.DEFAULT_BOLD);
                paint.setAntiAlias(true);
                /*if (i == choose) {
                    paint.setColor(Color.parseColor("#3399ff"));
                    paint.setFakeBoldText(true);
                }*/
                float xPos = width / 2 - paint.measureText(str_index[i]) / 2;
                float yPos = singleHeight * i + singleHeight;
                canvas.drawText(str_index[i], xPos, yPos, paint);
                paint.reset();
            }
        }
    
        @Override
        public boolean dispatchTouchEvent(MotionEvent event) {
            final int action = event.getAction();
            final float y = event.getY();
            final int oldChoose = choose;
            final OnTouchingIndexChangedListener listener = onTouchingIndexChangedListener;
            final int c = (int) (y / getHeight() * str_index.length);
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    showBkg = true;
                    if (oldChoose != c && listener != null) {
                        if (c >= 0 && c < str_index.length) {
                            listener.onTouchingIndexChanged(str_index[c]);
                            choose = c;
                            invalidate();
                        }
                    }
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (oldChoose != c && listener != null) {
                        if (c >= 0 && c < str_index.length) {
                            listener.onTouchingIndexChanged(str_index[c]);
                            choose = c;
                            invalidate();
                        }
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    showBkg = false;
                    choose = -1;
                    invalidate();
                    break;
            }
            return true;
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            return super.onTouchEvent(event);
        }
    
        public void setOnTouchingIndexChangedListener(
                OnTouchingIndexChangedListener onTouchingIndexChangedListener) {
            this.onTouchingIndexChangedListener = onTouchingIndexChangedListener;
        }
    
        public interface OnTouchingIndexChangedListener {
            void onTouchingIndexChanged(String s);
        }
    }
    

    然后再布局文件中引用

        ……
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            ……
    
            <io.github.kntryer.CitySelect.ui.view.CityIndexListView
                android:id="@+id/ci_lv_index"
                android:layout_width="25dip"
                android:layout_height="fill_parent"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="2dp"
                android:layout_marginTop="7dp" />
        </RelativeLayout>    
        ……
    

      说这么多好像懵懂懵懂的,其实这只是给你了解个大概,如果你真的要做出来的话,还需要仔细研究一下源码,这个代码挺好的,希望可以认真看一下,有助于你对 adapter 的理解。提醒一下,我们不要一味用别人的代码,有时候也因该了解一下如何实现,才能创造出更好的代码,不是么?

    • 源码

      城市选择

    展开全文
  • 仿美团城市选择

    2016-03-18 16:14:37
    在开发O2O相关应用的时候,选择所在城市这个东西肯定不会少。个人感觉美团的城市选择用户体验更好,就模仿了美团的城市选择。现在就和大家分享下,我在开发项目时的城市选择如何做出来的。
  • 仿美团实现地域选择城市列表

    万次阅读 2015-09-01 15:14:35
    在开发O2O相关应用的时候,肯定会有定位,选择所在城市,选择地域,然后再向服务器请求该地区的相关数据,这时就需要我们提供一个导向让用户选择所在区域。 看来看去,最终还是选择模仿美团,感觉用户体验最好。 ...

    介绍

    在开发O2O相关应用的时候,肯定会有定位,选择所在城市,选择地域,然后再向服务器请求该地区的相关数据,这时就需要我们提供一个导向让用户选择所在区域。

    看来看去,最终还是选择模仿美团,感觉用户体验最好。

    《-美团的地域选择看起来是这样的

    原理

    1、定位我们可以使用第三方API,例如百度地图,腾讯地图等,官方文档写的非常清楚了。

    百度地图地址:http://developer.baidu.com/map/index.php?title=androidsdk,这里不再多述,demo也不涉及定位相关代码。

    2、对于RadioButton的布局,之前尝试过使用GridLayout,GridView,但是都无法完美的展示布局效果,最后决定使用LinearLayout+RadioButton动态生成,通过view.getChildCount(),view.getChildAt()循环遍历所有的RadionButton,模拟实现换行的RadioGroup效果。

    3、PopupWindow默认情况下窗口后的背景不是黑色透明的,我们可以通过这是窗口的alpha实现

              WindowManager.LayoutParams lp = getWindow().getAttributes();
                    lp.alpha = 0.4f;
                    getWindow().setAttributes(lp);

    然后在窗口关闭的时候又恢复

    复制代码
            mPopuWindow.setOnDismissListener(new OnDismissListener() {
    
                // 在dismiss中恢复透明度
                public void onDismiss() {
                    WindowManager.LayoutParams lp = getWindow().getAttributes();
                    lp.alpha = 1f;
                    getWindow().setAttributes(lp);
                }
            });
    复制代码

    4、自定义RadioButton背景使用xml定义shape即可,然后通过selector定义状态样式。

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <corners android:radius="3dp" />
        <solid android:color="#FFFFFF" />
        <stroke
            android:width="1dp"
            android:color="#cecece" />
    </shape>
    复制代码
    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/radio_district_p" android:state_checked="true" />
        <item android:drawable="@drawable/radio_district_p" android:state_pressed="true"/>
        <item android:drawable="@drawable/radio_district_n"/>
    </selector>
    复制代码

    实现

    核心代码

    /**
     * @author Leestar54 
     * http://www.cnblogs.com/leestar54
     */
    package com.example.popupwindow;
    
    import java.util.ArrayList;
    
    import android.support.v7.app.ActionBarActivity;
    import android.graphics.drawable.ColorDrawable;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.WindowManager;
    import android.widget.LinearLayout;
    import android.widget.LinearLayout.LayoutParams;
    import android.widget.PopupWindow;
    import android.widget.PopupWindow.OnDismissListener;
    import android.widget.RadioButton;
    import android.widget.TextView;
    
    public class MainActivity extends ActionBarActivity {
        private PopupWindow mPopuWindow;
        private LinearLayout ll_location;
        private TextView txt_city_d;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            getSupportActionBar().setDisplayShowHomeEnabled(false);// 隐藏logo
            getSupportActionBar().setDisplayShowCustomEnabled(true);
            getSupportActionBar().setCustomView(R.layout.actionbar);
            txt_city_d = (TextView) getSupportActionBar().getCustomView()
                    .findViewById(R.id.txt_city);
    
            mPopuWindow = new PopupWindow(LayoutParams.MATCH_PARENT,
                    LayoutParams.WRAP_CONTENT);
            mPopuWindow.setOutsideTouchable(true);// 点击外部可关闭窗口
            mPopuWindow.setFocusable(true);
            mPopuWindow.update();
            mPopuWindow.setOnDismissListener(new OnDismissListener() {
    
                // 在dismiss中恢复透明度
                public void onDismiss() {
                    WindowManager.LayoutParams lp = getWindow().getAttributes();
                    lp.alpha = 1f;
                    getWindow().setAttributes(lp);
                }
            });
    
            ll_location = (LinearLayout) getSupportActionBar().getCustomView()
                    .findViewById(R.id.ll_location);
            ll_location.setOnClickListener(new OnClickListener() {
    
                @Override
                public void onClick(View v) {
                    // 这两行代码意义在于点击窗体外时获得响应
                    ColorDrawable cd = new ColorDrawable(0x000000);
                    mPopuWindow.setBackgroundDrawable(cd);
    
                    // 打开窗口时设置窗体背景透明度
                    WindowManager.LayoutParams lp = getWindow().getAttributes();
                    lp.alpha = 0.4f;
                    getWindow().setAttributes(lp);
                    mPopuWindow.showAsDropDown(getSupportActionBar()
                            .getCustomView());
                }
            });
    
            // 模拟数据
            ArrayList<District> dlist = new ArrayList<District>();
            District d1 = new District();
            d1.setName("青秀区");
            District d2 = new District();
            d2.setName("兴宁区");
            District d3 = new District();
            d3.setName("西乡塘区");
            District d4 = new District();
            d4.setName("江南区");
            District d5 = new District();
            d5.setName("良庆区");
            District d6 = new District();
            d6.setName("近郊");
    
            dlist.add(d1);
            dlist.add(d2);
            dlist.add(d3);
            dlist.add(d4);
            dlist.add(d5);
            dlist.add(d6);
            // 初始化PopupWindow
            initPopupWindow(dlist);
        }
    
        private void initPopupWindow(ArrayList<District> list) {
            LinearLayout root = (LinearLayout) LayoutInflater.from(
                    MainActivity.this).inflate(R.layout.popup_district, null);
            // ((TextView) root.findViewById(R.id.txt_city)).setText(cityname);
            ((LinearLayout) root.findViewById(R.id.ll_change_cities))
                    .setOnClickListener(new OnClickListener() {
    
                        @Override
                        public void onClick(View v) {
                            // Intent it = new Intent(MainActivity.this,
                            // CitiesActivity.class);
                            // startActivityForResult(it, 54);
                            // mPopuWindow.dismiss();
                        }
                    });
    
            final LinearLayout view = (LinearLayout) root
                    .findViewById(R.id.ll_district);
            LinearLayout ll = null;
    
            // 在列表最前面添加全部
            District d = new District();
            d.setName("全城");
            list.add(0, d);
    
            // 代码动态生成
            for (int i = 0; i < list.size(); i++) {
                // 这里LinearLayout肯定会实例化,因为一开始i=0,由于3个换行,所以%3
                if (i % 3 == 0) {
                    ll = new LinearLayout(MainActivity.this);
                    ll.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                            LayoutParams.WRAP_CONTENT));
                    ll.setOrientation(LinearLayout.HORIZONTAL);
                    view.addView(ll);
                }
    
                District de = list.get(i);
    
                // 由于样式设置麻烦,所以直接用xml声明样式了。
                View v = LayoutInflater.from(MainActivity.this).inflate(
                        R.layout.item_radio_district, null);
                ((RadioButton) v.findViewById(R.id.rb_district)).setText(de
                        .getName());
                ((RadioButton) v.findViewById(R.id.rb_district)).setTag(de);
                LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
                        LayoutParams.MATCH_PARENT);
                lp.weight = 1;
    
                // 一开始,设置“全部”RadioButton为选中状态
                if (i == 0) {
                    ((RadioButton) v.findViewById(R.id.rb_district))
                            .setChecked(true);
                }
                ((RadioButton) v.findViewById(R.id.rb_district))
                        .setOnClickListener(new OnClickListener() {
    
                            @Override
                            public void onClick(View v) {
                                RadioButton rb = (RadioButton) v;
                                // check事件发生在click之前,模拟group操作。
                                if (rb.isChecked()) {
    
                                    // 当点击Button时,遍历布局中所有的RadioButton,设置为未选中。
                                    for (int i = 0; i < view.getChildCount(); i++) {
                                        LinearLayout l = (LinearLayout) view
                                                .getChildAt(i);
                                        for (int j = 0; j < l.getChildCount(); j++) {
                                            // 根据xml布局的定义,可以知道具体是在第几层LinearLayout里。
                                            RadioButton b = (RadioButton) ((LinearLayout) ((LinearLayout) l
                                                    .getChildAt(j)).getChildAt(0))
                                                    .getChildAt(0);
                                            b.setChecked(false);
                                        }
                                    }
                                }
                                // 完成后,设置该按钮选中
                                rb.setChecked(true);
    
                                // 这里开始处理点击
                                District d = (District) rb.getTag();
                                txt_city_d.setText("南宁" + "-" + d.getName());
                                mPopuWindow.dismiss();
                            }
                        });
                ll.addView(v, lp);
            }
    
            // 填充RadioButton空白,使其布局对其,保证每行都有3个,只不过设置看不见而已。
            for (int i = list.size() % 3; i < 3 && i != 0; i++) {
                District dd = list.get(i);
                View v = LayoutInflater.from(MainActivity.this).inflate(
                        R.layout.item_radio_district, null);
                ((RadioButton) v.findViewById(R.id.rb_district)).setText(dd
                        .getName());
                ((RadioButton) v.findViewById(R.id.rb_district))
                        .setVisibility(View.INVISIBLE);
                LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
                        LayoutParams.MATCH_PARENT);
                lp.weight = 1;
                ll.addView(v, lp);
            }
            mPopuWindow.setContentView(root);
            mPopuWindow.update();
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            // Handle action bar item clicks here. The action bar will
            // automatically handle clicks on the Home/Up button, so long
            // as you specify a parent activity in AndroidManifest.xml.
            int id = item.getItemId();
            if (id == R.id.action_settings) {
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
    }

    Demo看起来是这样的

     

    demo下载地址:

    链接:http://pan.baidu.com/s/1mg5NrlA 密码:d6ii

    介绍如何实现带有首字母的快速索引list,进行城市选择,我也是参考了相关博文才弄出来的,知道了原理,才发现如此简单。

    其中有个开源项目可以参考,但与本文实现的方式略有不同。

    地址:https://github.com/woozzu/IndexableListView

    美团的城市选择看起来是这样的。本例中不包含搜索,有空再模仿研究下。

    原理

    1、侧边快速索引和首字母直接在framelayout中布局的,也可以用代码动态生成。

    2、获取拼音首字写用到了pinyin4j开源库,但是这样效率低下,可以考虑数据库字段冗余拼音等方式提高效率。

    3、使用Comparator对获取首字母的列表进行了排序。

    4、按下快速索引之后,使用Listview.setSelectionFromTop进行定位。

    实现

    activity_city_list.xml布局

    复制代码
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical" >
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff" >
    
            <ListView
                android:id="@+id/listView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </ListView>
    
            
            <!-- 选中索引时,屏幕中间显示的大写字母 -->
            <TextView
                android:id="@+id/tv"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_gravity="center"
                android:background="#aaffffff"
                android:gravity="center"
                android:text="A"
                android:textColor="#aa000000"
                android:textSize="30sp" />
    
            <!-- 右侧快速索引列表 -->
            <LinearLayout
                android:id="@+id/layout"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="right"
                android:layout_marginBottom="3dp"
                android:layout_marginLeft="3dp"
                android:layout_marginTop="3dp"
                android:background="#d7d7d7"
                android:gravity="center"
                android:orientation="vertical" >
    
            </LinearLayout>
        </FrameLayout>
    
    </LinearLayout>
    复制代码

    item_city.xml布局

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
    
        <!-- 列表中的index首字母,之后第一个首字母下的item显示,其他隐藏 -->
        <TextView
            android:id="@+id/tv_index"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#777777"
            android:paddingBottom="2dp"
            android:paddingLeft="10dp"
            android:paddingTop="2dp"
            android:text="index"
            android:textColor="#ffffff" />
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="10dp"
            android:paddingLeft="10dp"
            android:paddingTop="10dp" >
    
            <TextView
                android:id="@+id/tv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="城市" />
        </LinearLayout>
    
    </LinearLayout>
    复制代码

    CityListAdapter

    /**
     * @author Leestar54 
     * http://www.cnblogs.com/leestar54
     */
    package com.example.popupwindow;
    
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    public class CityListAdapter extends BaseAdapter {
        private Context ctx;
        private ViewHolder holder;
        List<CityListItem> list;
        Map<String, Integer> selector;// 键值是索引表的字母,值为对应在listview中的位置
        String index[];//字母表
    
        public CityListAdapter(Context context, List<CityListItem> list, String[] index) {
            this.ctx = context;
            this.list = list;
            this.index = index;
            selector = new HashMap<String, Integer>();
            // 循环字母表,找出list中对应字母的位置
            for (int j = 0; j < index.length; j++) {
                for (int i = 0; i < list.size(); i++) {
                    // 由于已经按照字母排序过了,匹配中第一个就找下一个下标了。
                    if (list.get(i).getIndex().equals(index[j].toLowerCase())) {
                        selector.put(index[j], i);
                        break;
                    }
                }
            }
        }
    
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return list.size();
        }
    
        @Override
        public Object getItem(int arg0) {
            // TODO Auto-generated method stub
            return list.get(arg0);
        }
    
        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return 0;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            try {
                if (convertView == null) {
                    holder = new ViewHolder();
                    convertView = LayoutInflater.from(ctx).inflate(R.layout.item_city, null);
                    holder.tv1 = (TextView) convertView.findViewById(R.id.tv1);
                    holder.index = (TextView) convertView.findViewById(R.id.tv_index);
                    convertView.setTag(holder);
                } else {
                    holder = (ViewHolder) convertView.getTag();
                }
                // 绑定数据
                CityListItem item = list.get(position);
                holder.tv1.setText(item.getName());
    
                // 显示index
                String currentStr = item.getIndex();
                // 上一项的index
                String previewStr = (position - 1) >= 0 ? list.get(position - 1).getIndex() : " ";
    
                //判断是否上一次的存在
                if (!previewStr.equals(currentStr)) {
                    holder.index.setVisibility(View.VISIBLE);
                    holder.index.setText(currentStr);// 文本显示当前滑动的字母
                } else {
                    holder.index.setVisibility(View.GONE);
                }
            } catch (OutOfMemoryError e) {
                Runtime.getRuntime().gc();
            } catch (Exception ex) {
                ex.printStackTrace();
            }
            return convertView;
        }
    
        class ViewHolder {
            TextView tv1;
            TextView index;//索引字母
        }
    
        public Map<String, Integer> getSelector() {
            return selector;
        }
    
        public void setSelector(Map<String, Integer> selector) {
            this.selector = selector;
        }
    
        public String[] getIndex() {
            return index;
        }
    
        public void setIndex(String[] index) {
            this.index = index;
        }
    }
    
    
    CitiesActivity

    /**
     * @author Leestar54 
     * http://www.cnblogs.com/leestar54
     */
    package com.example.popupwindow;
    
    import java.text.Collator;
    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.Comparator;
    import java.util.List;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.support.v7.app.ActionBarActivity;
    import android.view.MenuItem;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.View.OnTouchListener;
    import android.widget.LinearLayout;
    import android.widget.LinearLayout.LayoutParams;
    import android.widget.ListView;
    import android.widget.TextView;
    
    public class CitiesActivity extends ActionBarActivity {
        LinearLayout layoutIndex;
        /** 字母索引表 */
        private String[] str_index = { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q","R","S","T"
                ,"U", "V", "W", "X", "Y", "Z" };// "#",
    
        private int height;// 字体高度
        private List<CityListItem> listData;
        private ListView listView;
        private CityListAdapter adapter;
        private TextView tv_show;// 中间显示标题的文本
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            getSupportActionBar().setTitle("城市列表");
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setHomeButtonEnabled(true);
    
            setContentView(R.layout.activity_city_list);
            layoutIndex = (LinearLayout) this.findViewById(R.id.layout);
            layoutIndex.setBackgroundColor(Color.parseColor("#00ffffff"));
    
            getData();
    
            tv_show = (TextView) findViewById(R.id.tv);
            tv_show.setVisibility(View.INVISIBLE);
    
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                return true;
            }
            return false;
        }
    
        /**
         * 获取城市列表
         */
        public void getData() {
            CityListItem ci1=new CityListItem();
            ci1.setName("北京");
            CityListItem ci2=new CityListItem();
            ci2.setName("上海");
            CityListItem ci3=new CityListItem();
            ci3.setName("广州");
            CityListItem ci4=new CityListItem();
            ci4.setName("广西");
            CityListItem ci5=new CityListItem();
            ci5.setName("长沙");
            CityListItem ci6=new CityListItem();
            ci6.setName("贵阳");
            CityListItem ci7=new CityListItem();
            ci7.setName("福建");
            
            ArrayList<CityListItem> list=new ArrayList<CityListItem>();
            list.add(ci1);
            list.add(ci1);
            list.add(ci1);
            list.add(ci1);
            list.add(ci1);
            list.add(ci1);
            list.add(ci2);list.add(ci2);list.add(ci2);list.add(ci2);list.add(ci2);list.add(ci2);
            list.add(ci3);list.add(ci3);list.add(ci3);list.add(ci3);list.add(ci3);
            list.add(ci4);list.add(ci4);list.add(ci4);list.add(ci4);list.add(ci4);
            list.add(ci5);    list.add(ci5);    list.add(ci5);    list.add(ci5);
            list.add(ci6);list.add(ci6);list.add(ci6);list.add(ci6);
            list.add(ci7);list.add(ci7);list.add(ci7);list.add(ci7);
            
            //获取首字母
            for (CityListItem cityListItem : list) {
                cityListItem.setIndex(String.valueOf(ChineseUtils.getHanyuPinyin(cityListItem.getName())
                        .charAt(0)));
            }
            //排序
            LetterComparator lc = new LetterComparator();
            Collections.sort(list, lc);
            
            listView = (ListView) findViewById(R.id.listView1);
            adapter = new CityListAdapter(CitiesActivity.this, list, str_index);
            listView.setAdapter(adapter);
    
        }
        
        @Override
        public void onWindowFocusChanged(boolean hasFocus) {
            // 在oncreate里面执行下面的代码没反应,因为oncreate里面得到的getHeight=0
            // System.out.println("layoutIndex.getHeight()=" +
            // layoutIndex.getHeight());
            height = layoutIndex.getHeight() / str_index.length;
            getIndexView();
        }
    
        /** 绘制索引列表 */
        public void getIndexView() {
            LinearLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, height);
            // params.setMargins(10, 5, 10, 0);
            for (int i = 0; i < str_index.length; i++) {
                final TextView tv = new TextView(this);
                tv.setLayoutParams(params);
                tv.setText(str_index[i]);
                tv.setPadding(10, 0, 10, 0);
                layoutIndex.addView(tv);
                layoutIndex.setOnTouchListener(new OnTouchListener() {
    
                    @Override
                    public boolean onTouch(View v, MotionEvent event)
    
                    {
                        float y = event.getY();
                        int index = (int) (y / height);
                        if (index > -1 && index < str_index.length) {// 防止越界
                            String key = str_index[index];
                            if (adapter.getSelector().containsKey(key)) {
                                // 获得位置
                                int pos = adapter.getSelector().get(key);
                                if (listView.getHeaderViewsCount() > 0) {// 防止ListView有标题栏,本例中没有。
                                    listView.setSelectionFromTop(pos + listView.getHeaderViewsCount(), 0);
                                } else {
                                    listView.setSelectionFromTop(pos, 0);// 滑动到第一项
                                }
                                tv_show.setVisibility(View.VISIBLE);
                                tv_show.setText(str_index[index]);
                            }
                        }
                        switch (event.getAction()) {
                        case MotionEvent.ACTION_DOWN:
                            //按下颜色
                            layoutIndex.setBackgroundColor(Color.parseColor("#aaffffff"));
                            break;
    
                        case MotionEvent.ACTION_MOVE:
    
                            break;
                        case MotionEvent.ACTION_UP:
                            //释放还原
                            layoutIndex.setBackgroundColor(Color.parseColor("#00ffffff"));
                            tv_show.setVisibility(View.INVISIBLE);
                            break;
                        }
                        return true;
                    }
                });
            }
        }
    
        private class LetterComparator implements Comparator<CityListItem> {
    
            @Override
            public int compare(CityListItem lhs, CityListItem rhs) {
                return Collator.getInstance().compare(lhs.getIndex(), rhs.getIndex());
            }
        }
    }

    最后看起来应该是这样的

     链接:http://pan.baidu.com/s/1o6keEKE 密码:ssbn

    上面附件的备份下载地址:

    http://download.csdn.net/detail/jdsjlzx/9070539

    展开全文
  • 城市选择器(实现自动定位选择和手动搜索选择城市) 可以根据拼音首字母搜索城市列表 默认定位所在城市
  • PHP代码: 所在城市 选择所在城市 " selected >


    PHP代码:

                     <li>
                        <span class="l2">所在城市</span>
                        <select class="city">
                            <option  value="">选择所在城市</option>
                           <%foreach from=$supportcity item=city key=k%>
                            <option value="<%$k%>" <%if $nowcity==$city.city_name%>selected<%/if%> ><%$city.city_name%></option>
                            <%/foreach%>
                        </select>
                    </li>
                    <li>
                    <span class="l2" id="area">所在地区</span>
                    <%foreach from=$supportcity item=city key=k%>
                        <select class="area" citycode="<%$k%>" >
                            <option value="">选择所在地区</option>
                            <%foreach from=$city.areas item=area%>
                                <option value="<%$area.area%>"><%$area.area%></option>
                            <%/foreach%>
                        </select>
                    <%/foreach%>
                    </li>

    Jquery代码:

            $("select.city").change(function(){
                var ccode = $(this).val();
                $("select.area").hide();
                if(ccode){
                    $("select.area[citycode="+ccode+"]").show();
                }
            });
            var sltcity = $("select.city").val();
            if(sltcity){
                 $("select.area[citycode="+sltcity+"]").show();
            }

    下面是详细的:

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置

     

    获取一组radio被选中项的值:var item = $('input[name=items][checked]').val();
    获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text();

    获取select被选中项的文本 :var item = $("select[name=items] option[selected]").text(); 或$("select[name=items]").find("option:selected").text();

    select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1;

    select下拉框value = 'val'的元素为当前选中项:$("select[name=items] option[value='val']").attr("selected","selected");

    radio单选组的第二个元素为当前选中项 :$('input[@name=items]').get(1).checked = true; 或$('input[name=items]').attr("checked", '1′);

    radio的value = 'val'的元素为当前选中项:$('input[name=items] [value='val']').attr("checked","checked");


    获取值:

    文本框,文本区域:$("#txt").attr("value");

    多选框checkbox:$("input[name='checkbox':checked]").each(function(){

    var val = $(this).val();

    });

    单选组radio: $("input[type=radio][checked]").val();

    下拉框select的value值: $('select').val();

    下拉框select选中的text 值:$("select").find("option:selected").text();

    控制表单元素:

    文本框,文本区域:$("#txt").attr("value","); //清空内容

                           $("#txt").attr("value",'11′); //填充内容

    多选框checkbox:
    checkbox的第二个元素被打勾:$("input[name=items]").get(1).checked = true; //打勾
                                               $("input[name=items]").get(1).checked = false; //不打勾

    checkbox的value='val'的元素前打勾:$("input[name=item][value='val']").attr("checked",true); 或$("input[name=item][value='val']").attr("checked","checked");

    if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾

    单选组radio: $("input[type=radio]").attr("checked",'2′);//设置value=2的项目为当前选中项

    下拉框select: $("#sel").attr("value",'-sel3′);//设置value=-sel3的项目为当前选中项

    $("<option value='1′>1111</option><option value='2′>2222</option>").appendTo("#sel")//添加下拉框的option

    $("#sel").empty();//清空下拉框

     

    jQuery获取Radio选择的Value值


    代码

    $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值
    $("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发
    $("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发
    $("#text_id").select(); //使文本框的Vlaue值成选中状态
    $("input[name='radio_name'][value='要选中Radio的Value值'").
    attr("checked",true); //根据Value值设置Radio为选中状态

    jQuery获取CheckBox选择的Value值

    $("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合 如果你想得到Value值你需要遍历这个集合
    $($("input[name='checkbox_name'][checked]")).
    each(function(){arrChk+=this.value + ',';});//遍历被选中CheckBox元素的集合 得到Value值
    $("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)
    $("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)
    $("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)
    $("input[name='checkbox_name']").attr
    ("checked",$("#checkbox_id").attr("checked"));//根据3,4,5条,你可以分析分析这句代码的意思
    $("#text_id").val().split(","); //将Text的Value值以','分隔 返回一个数组

     

     jquery1.3.2

    ISDARK : $("input[@type=radio][name=ISDARK][checked]").val()

    $("input[name=radioname][value=radio值]").attr("checked","checked");



    展开全文
  • js城市选择

    2019-04-04 16:35:26
    1、自动定位所在城市 2、热门城市列表展示 3、所有城市列表的展示
  • html5选择当地城市天气预报代码是一款显示城市近5天天气情况,默认进入是根据所在地显示当前城市的天气情况。
  • 是旅行商要到若干个城市旅行,各城市之间的费用是已知的,为了节省费用,旅行商决定从所在城市出发,到每个城市旅行一次后返回初始城市,问他应选择什么样的路线才能使所走的总费用最短?
  • html5选择当地城市天气预报代码是一款显示城市近5天天气情况,默认进入是根据所在地显示当前城市的天气情况。
  • 省份城市联级选择

    千次阅读 2018-01-12 09:21:41
    介绍: 在写界面的时候可能时常会用到选择自己所在的省份城市,因此在学习js的时候做了一个备份,以后使用的时候可以直接借鉴。
  • 高德地图获取所在城市POI数据

    千次阅读 2020-10-11 17:20:28
    在服务平台的选项中,选择Web服务,这一步很重要! 选完之后可以在界面中得到你的key 接下来需要知道需要查询城市以及POI分类的代码,进入此界面下载参考文档 在之前所说的参考文章中,我找到了作者用来爬数据的...
  • 在天气预报之前,用户需要选择所在城市,因此本微信小程序代码中包括了全国省份、地级市、县级市的城市选择菜单 ,你可以把这个菜单 用到其它的微信小程序中。  本天气预报可显示当前温度、相对湿度、降水量、...
  • 一步步实现一个城市选择

    千次阅读 2016-11-07 18:20:46
    http://download.csdn.net/detail/baidu_31093133/9675482效果图预览主要包含以下内容:1、自动定位所在城市 2、热门城市列表展示 3、所有城市列表的展示 4、输入城市名或者城市拼音搜索对应城市 5、右侧的...
  • 第一步:... 第二步: 登陆https://lbs.qq.com/dev/console/key/manage,注册QQ地图key密匙,选择微信小程序输入小程序APPID,选择WebServerAPI保存 第三步:js文件引入let...
  • 下面是我这次的多级联动练习,我觉得最重要的是处理好选择城市时函数的递归应用问题。 1.body内容 <div class="box"> <div class="s1"> 请输入您所在省份: <input type="text" id="txt" list=...
  • 省份 城市 选择列表

    万次阅读 2012-07-11 15:57:29
    在填写用户信息的时候可能要填写用户所在地区,下面提供一个中国城市的二级对照形式的JavaScript代码: function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray) { this....
  • 中国城市数据源,同小程序选择器中数据。使用数据库存储,有城市名,城市code,城市拼音以及城市所在的省份
  • 城市选择控件 想到做这个,是因为无意中在github上看到了这一个仓库,做...可定位到当前所在城市,可支持传城市 下次打开优先选取上次定位城市,如本次定位和上次不一样,则取本地城市,同时展示最近选择的城市,最近选
  • 中国城市数据源,同小程序选择器中数据。JSON格式字符串,有城市名,城市code,城市拼音以及城市所在的省份
  • 如何修改QQ上显示的所在城市? 比如说我现在在重庆,要改成南京什么的怎么修改! reply: 要更改你的IP地址,一般更改都是在登陆的时候选择代理IP地址上线。 代理IP地址在网上有很多。你找个相关地区的代理IP即可...
  • 特效描述:jQuery手机端 收货地址选择 城市三级联动代码。jQuery手机端收货地址选择城市三级联动代码代码结构1. 引入CSS2. 引入JS3. HTML代码默认调用所在地区:设置默认值所在地区:/*** 默认调用*/!function () {...
  • 由于金融危机,很多公司裁员,降薪,加上大城市的房价高,物价贵,生活成本高,压力大,很多白领离开北京,上海,广州等大城市,回到了家乡所在的小城市或者二线城市,于是有段时间,“逃离北上广“的新闻、帖子很多...
  • 滑动触摸字母时,首先要得到所有字母所在块的高度,再平均的获取到每个字母的高度。当触摸滚动时,拿到pageY(距离文档左上角的距离,具体解释官网有https://developers.weixin.qq.com/miniprogram/d

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 609
精华内容 243
关键字:

选择所在城市