使用jQuery UI选项卡,如何在单击选项卡后运行代码?

时间:2010-11-14 03:07:24

标签: jquery jquery-ui jquery-ui-tabs

使用jQuery UI tabs,您可以使用select方法在单击选项卡时运行代码:

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

但代码在加载刚刚单击的选项卡之前运行。我需要在加载新标签后运行代码。我怎样才能做到这一点?谢谢阅读。

4 个答案:

答案 0 :(得分:12)

API已更改。 此事件现在是“激活”/“tasbactivate”;见http://api.jqueryui.com/tabs/#event-activate

----- OLD 以下答案-----------

根据问题,它是tabsshow(而不是tabload)事件所需的...当显示标签时触发事件。

代码示例:(来自http://jqueryui.com/demos/tabs/

提供一个回调函数来将show事件作为init选项处理。

$( ".selector" ).tabs({
   show: function(event, ui) { ... }
});

按类型绑定到show事件:tabsshow。

$( ".selector" ).bind( "tabsshow", function(event, ui) {
  ...
});

如果您想将注意力集中在控制或类似事件上,该事件非常有用。

答案 1 :(得分:7)

$( ".selector" ).tabs({
   load: function(event, ui) { ... }
});

来自http://jqueryui.com/demos/tabs/

答案 2 :(得分:6)

看起来你可以绑定到tabsload或tabsshow:

http://jqueryui.com/demos/tabs/#Events

例如

$('#example').bind('tabsshow', function(event, ui) { ... });

答案 3 :(得分:0)

HTML

 void GetContacts(final String sText) {
        try {
            Thread thread = new Thread() {
                public void run() {
                    Looper.prepare();
                    final JSONObject[] maindata = {new JSONObject()};

                    final Handler handler = new Handler(Looper.getMainLooper());
                    handler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            List<Actors> myList = new ArrayList<>();
                            HttpHandler sh = new HttpHandler();
                            String url = "https://myurl?par="+sText;

                            String jsonStr = sh.makeServiceCall(url);

                            if (jsonStr != null) {
                                try {JSONObject jsonObj = new JSONObject(jsonStr);
                                    JSONArray actors = jsonObj.getJSONArray("result");

                                    for (int i = 0; i < actors.length(); i++) {
                                        JSONObject c = actors.getJSONObject(i);

                                        Actors actor = new Actors();
                                        actor.setNazov(c.getString("title"));
                                   actor.setThumb(c.getString("thumb"));


                                        myList.add(actor);
                                    }

                                }  catch (final JSONException e) {
                                    runOnUiThread(new Runnable() {
                                        @Override
                                        public void run() {
                                            Toast.makeText(getApplicationContext(),
                                                    R.string.Nodata,
                                                    Toast.LENGTH_LONG).show();
                                        }
                                    }); }

                              //  return myList;

                            } else {
                                runOnUiThread(new Runnable() {
                                    @Override
                                    public void run() {
                                        Toast.makeText(getApplicationContext(),
                                                R.string.Network,
                                                Toast.LENGTH_LONG).show();
                                    }
                                });
                             //   return null;
                            }

                            handler.removeCallbacks(this);
                            Objects.requireNonNull(Looper.myLooper()).quit();
                        }
                    }, 2000);

                    Looper.loop();
                }
            };
            thread.start();

        } catch (Exception ex) {
            Log.e("ERROR =>", "" + ex.getMessage());
            ex.printStackTrace();
        }

    }

JS

<div id="tabs">
    <ul>
        <li><a href="#job_information_tab">Job Information</a></li>
    </ul>
    <div id="job_information_tab">
        [content]
    </div>
</div>